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'

interface color_card_info {
  count: number
  lab: { l: number; a: number; b: number }
  name: string
  rgb: { r: number; g: number; b: number }
  texture_url: string
}

export interface ParamItem {
  color_card_count: number
  color_card_number: number
  id: number
  order_id: number
  order_no: string
  order_status: number
  order_status_name: string
  shipment_mode: number
  shipment_mode_name: string
  color_card_info: color_card_info[]

}

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

  return <View className={styles.list_item} onClick={() => goLink('/pages/colorCardOrderDetail/index', { id: value.order_id })} >
    <View className={styles.item_header}>
      <Text>单号：{value.order_no}</Text>
      <Text>{value.order_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>
        <Text className={styles.item_con_count}>x{card_one?.count}本</Text>
      </View>

    </View>
    <View className={styles.card_info}>
      <Text>色卡信息:</Text>
      <Text>{value.color_card_count} 种色卡，共 {value.color_card_number} 本</Text>
    </View>
    <View className={styles.express}>快递到付</View>
    {value.order_status === 1 && <View className={styles.btns} onClick={e => onCancelEven?.(e, value.order_id)}><Text>取消订单</Text></View>}
  </View>
}
