import type { ITouchEvent } from '@tarojs/components'
import { ScrollView, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
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/getColorCard/colorCardDetail/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.order_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.color_card_info[0])} />
          </View>
        </View>

        <View className={styles.rightCont}>
          <View className={styles.rightTop}>
            <View className={styles.productName}>{data.color_card_info[0].name}</View>
            <View className={styles.shipMode}>{data.shipment_mode_name}</View>
          </View>
          <View className={styles.colorsBox}>
            <View className={styles.colorName}>x{data.color_card_info[0].count || 0}本</View>
          </View>
        </View>
      </View>
      <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
      <View className={styles.bottomMsg}>
        <View className={styles.msgLeft}>色卡信息：</View>
        <View className={styles.msgRight}>{data?.color_card_count || 0} 种色卡，共 {data?.color_card_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)
