import type { ITouchEvent } from '@tarojs/components'
import { ScrollView, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import BottomBtns from '@/components/BottomBtns'
import { formatHashTag, formatPriceDiv } from '@/common/format'
import LabAndImg from '@/components/LabAndImg'
import NormalButton from '@/components/normalButton'
import Divider from '@/components/divider'
import Tag from '@/components/tag'
import LayoutBlock from '@/components/layoutBlock'
import { goLink } from '@/common/common'

interface PropsType {
  data?: any
  cancel?: (e: ITouchEvent) => void
}
const ItemList = (props: PropsType) => {
  const { data, cancel } = props

  const labAndImgObj = useCallback((item) => {
    return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url }
  }, [])
  // 进入详情页
  const navTo = () => {
    goLink('/pages/sampleCutting/sampleCuttingDetail/index', { id: data.order_id })
  }

  return (
    <LayoutBlock onClick={navTo} circle>
      <View className={styles.topItem}>
        <View className={styles.orderNo}>单号：{data.order_no}</View>
        <View className={styles.status}>{data.mp_cut_sample_audit_status_name}</View>
      </View>
      <View className={styles.flexBox}>
        <View className={styles.pussName}>{data.purchaser_name}</View>
        {
          data.sale_user_name && <Tag type="primary" size="normal" circle customClassName={styles.tag} plain>
            {data.sale_user_name}
          </Tag>
        }
      </View>
      <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
      <View className={styles.contBox}>
        <View style={{ minWidth: '24%' }}>
          <View className={styles.leftCont}>
            <LabAndImg value={labAndImgObj(data.cut_sample_order_product_list[0])} />
          </View>
        </View>

        <View className={styles.rightCont}>
          <View className={styles.rightTop}>
            <View className={styles.productName}>{data.cut_sample_order_product_list[0].name}</View>
            <View className={styles.shipMode}>{data.shipment_mode_name}</View>
          </View>
          {
            data.cut_sample_order_product_list[0].product_colors?.map((item, index) => {
              if (index < 2) {
                return <View className={styles.colorsBox} key={index}>
                  <View className={styles.colorName}>{formatHashTag(item.code, item.name)}</View>
                  <View className={styles.colorCount}>x{item.color_num || 0}份</View>
                </View>
              }
              else {
                return null
              }
            })
          }
        </View>
      </View>
      <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
      <View className={styles.bottomMsg}>
        <View className={styles.msgLeft}>剪样信息：</View>
        <View className={styles.msgRight}>{data?.total_fabrics || 0} 种面料，{data?.total_colors || 0} 种剪样，共 {data?.total_number || 0} 份</View>
      </View>
      <View className={styles.paymentMethod}>
        <View className={styles.msgRightOne}>快递到付</View>
      </View>
      <View className={styles.bottomBox}>
        {
          data.order_status === 1 && <NormalButton
            customStyles={{ fontSize: '14px' }}
            type="info"
            size="normal"
            round
            plain
            onClick={cancel}
          >
          取消订单
          </NormalButton>
        }

      </View>
    </LayoutBlock>
  )
}
export default memo(ItemList)
