import { Text, View } from '@tarojs/components'
import { useMemo } from 'react'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import { goLink } from '@/common/common'
import { formatHashTag } from '@/common/fotmat'

interface order_product_item {
  code: string
  lab: { l: number; a: number; b: number }
  name: string
  rgb: { r: number; g: number; b: number }
  product_id: number
  texture_url: string
  product_colors: {
    code: string
    color_num: number
    lab: { l: number; a: number; b: number }
    name: string
    product_color_id: number
    rgb: { r: number; g: number; b: number }
    texture_url: string
  }[]
}

export interface ParamItem {
  id: number
  order_id: number
  order_no: string
  mp_cut_sample_audit_status: number
  mp_cut_sample_audit_status_name: string
  shipment_mode: number
  shipment_mode_name: string
  cut_sample_order_product_list: order_product_item[]
  total_colors: number
  total_fabrics: number
  total_number: number

}

interface Param {
  value: ParamItem
  onCancel?: (val: number) => void
}
export default (props: Param) => {
  const { value, onCancel } = props
  const card_one = useMemo(() => {
    return value.cut_sample_order_product_list ? value.cut_sample_order_product_list[0] : null
  }, [value])
  const onCancelEven = (e, id: number) => {
    e.stopPropagation()
    onCancel?.(id)
  }

  const labAndImgObj = useMemo(
    () => {
      const res = value.cut_sample_order_product_list[0]
      return { lab: res.lab, rgb: res.rgb, texture_url: res.texture_url }
    },
    [value],
  )
  return <View className={styles.list_item} onClick={() => goLink('/pages/cutSampleListOrderDetail/index', { id: value.order_id })} >
    <View className={styles.item_header}>
      <Text>单号：{value.order_no}</Text>
      <Text>{value.mp_cut_sample_audit_status_name}</Text>
    </View>
    <View className={styles.item_con}>
      <View className={styles.image}>
        <LabAndImg value={labAndImgObj} showStatus={false} />
      </View>
      <View className={styles.item_con_desc}>
        <View className={styles.item_con_name}>
          <Text>{card_one?.name}</Text>
          <Text>{value.shipment_mode_name}</Text>
        </View>
        <View className={styles.item_con_color_list}>
          {card_one?.product_colors?.map((citem, index) => <View key={citem.product_color_id} className={styles.color_item}>
            {index < 2 && <><Text>{formatHashTag(citem.code, citem.name)}</Text>
              <Text>x{citem.color_num}份</Text></>}
          </View>)}
        </View>
      </View>

    </View>
    <View className={styles.card_info}>
      <Text>色卡信息:</Text>
      <Text>{value.total_fabrics}种面料，{value.total_colors}种剪样，共 {value.total_number} 份</Text>
    </View>
    <View className={styles.express}>快递到付</View>
    {value.mp_cut_sample_audit_status === 1 && <View className={styles.btns} onClick={e => onCancelEven?.(e, value.order_id)}><Text>取消订单</Text></View>}
  </View>
}
