import { Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import type { FC } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import LayoutBlock from '@/components/layoutBlock'
import Divider from '@/components/divider'
import Tag from '@/components/tag'
import NormalButton from '@/components/normalButton'
import { EnumSaleMode } from '@/common/Enumerate'
import { formatDateTime, formatMeterDiv } from '@/common/format'
import { goLink } from '@/common/common'
import { TakeGoodsOrderAudit } from '@/api/index'
import SaleModeTag from '@/components/saleModeTag'

interface PropsType {
  itemData: Record<string, any>
  onSuccess?: Function
}

const ItemList: FC<PropsType> = (props) => {
  const { itemData, onSuccess } = props
  // 查看详情
  const handleDetail = (itemData: Record<string, any>) => {
    goLink('/pages/takeDeliveryDetail/index', {
      id: itemData.id,
    })
  }

  const { fetchData } = TakeGoodsOrderAudit()

  // 确认审核
  const handleAudit = (id: number) => {
    Taro.showModal({
      content: '确认要提货吗？',
      confirmColor: '#337FFF',
      success: async(res) => {
        if (res.confirm) {
          const res = await fetchData({ take_goods_order_id: [id] })
          if (res.success) {
            Taro.showToast({ title: '提货成功', icon: 'success' })
            onSuccess?.()
          }
          else {
            Taro.showToast({ title: '操作失败', icon: 'error' })
          }
        }
      },
    })
  }

  return (
    <LayoutBlock circle customClassName={styles.layoutBlock}>
      <View className={styles.topBar}>
        <View className={styles.topBar__orderNo}>
          <View className={styles.orderNo}>单号：{itemData?.take_goods_order_no}</View>
          {itemData?.take_goods_status === 0 && (
            <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>
          )}
          {itemData?.take_goods_status === 1 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>}
        </View>
        <Text className={styles.topBar__orderType}>{itemData?.take_goods_order_type_name}</Text>
      </View>
      <Divider direction="horizontal" customStyles={{ margin: '20rpx 0 10rpx 0' }}></Divider>
      <View className={styles.content}>
        <View className={classnames(styles.content__row, styles.bord)}>
          <View className={styles.content__row__left}>货品信息：</View>
          <View className={styles.content__row__right}>
            <SaleModeTag saleMode={itemData.sale_mode} size="small" customClassName={styles.tag}></SaleModeTag>
            {itemData.product_count}种面料，{itemData.product_color_count}种颜色，共
            {itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.take_roll}条` : `${formatMeterDiv(itemData?.take_meters)}米`}
          </View>
        </View>
        <View className={classnames(styles.content__row, styles.bord)}>
          <View className={styles.content__row__left}>供应信息：</View>
          <View className={styles.content__row__right}>{itemData?.supplier_name || '空'}</View>
        </View>
        <View className={styles.content__row}>
          <View className={styles.content__row__left}>创建时间：</View>
          <View className={styles.content__row__right}>{formatDateTime(itemData?.take_goods_order_create_time) || '空'}</View>
        </View>
      </View>
      <View className={styles.bottomBar}>
        <NormalButton
          customClassName={styles.bottomBar__button}
          type="info"
          plain
          customStyles={{ color: '#636363', borderColor: '#c8c8c8' }}
          round
          onClick={() => handleDetail(itemData)}
        >
          查看详情
        </NormalButton>
        {itemData?.status === 0 && (
          <NormalButton plain customClassName={styles.bottomBar__button} type="primary" round onClick={() => handleAudit(itemData?.id)}>
            确认审核
          </NormalButton>
        )}
      </View>
    </LayoutBlock>
  )
}
export default ItemList
