import { Text, View } from '@tarojs/components'
import { useCallback } from 'react'
import styles from './index.module.scss'
import Counter from '@/components/counter'
import LabAndImg from '@/components/LabAndImg'

export interface orderParam {
  affiliation_product: any
  count: number
  lab: { l: number; a: number; b: number }
  name: string
  rgb: { r: number; g: number; b: number }
  texture_url: string
}

interface Param {
  value: orderParam[]
}

export default (props: Param) => {
  const { value } = props
  const labAndImgObj = useCallback(
    (item) => {
      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
    },
    [value],
  )
  return <View className={styles.card_con}>
    <View className={styles.card_header}>色卡信息</View>
    <View className={styles.card_list}>
      <>
        {value?.map((item, index) => {
          return <View key={index} className={styles.card_item}>
            <View className={styles.img}><LabAndImg value={labAndImgObj(item)} /></View>
            <View className={styles.name_count}>
              <Text>{item.name}</Text>
              <Text>x{item.count}本</Text>
            </View>
          </View>
        })}
        <View className={styles.express_btn}>快递到付</View>
      </>
    </View>
  </View>
}
