import { Text, View } from '@tarojs/components'
import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
import { memo, useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import Counter from '@/components/counter'
import LabAndImg from '@/components/LabAndImg'
import { alert } from '@/common/common'

interface ProductItemParamType {
  code: string
  id: number
  name: string
}

export interface ParamItem {
  id: number
  affiliation_product: ProductItemParamType[]
  color_card_name: string
  texture_url: string
  lab: { l: number; a: number; b: number }
  rgb: { r: number; g: number; b: number }
  is_add: boolean
  count?: number
}

export interface Param {
  value: ParamItem
  onChangeNum?: (val: { id: number; count: number }) => void
  onDelData?: (val: number) => void
}

export default memo((props: Param) => {
  return <ProductItem onChangeNum={props.onChangeNum} onDelData={props.onDelData} value={props.value} />
})

const ProductItem = memo((props: Param) => {
  const { value } = props
  const labAndImgObj = useCallback(

    (item) => {
      console.log('item:::', item)
      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
    },
    [value],
  )
  const onChangeNum = (num) => {
    props.onChangeNum?.({ id: value.id, count: num })
  }
  const onMin = () => {
    Taro.showModal({
      title: '确认删除所选色卡？',
      success(res) {
        if (res.confirm) {
          props?.onDelData?.(value.id)
        }
        else if (res.cancel) {
          props.onChangeNum?.({ id: value.id, count: 1 })
        }
      },
    })
  }
  const onMax = () => {
    alert.none('最多领取2份')
  }
  return <>
    <View key={value.id} className={styles.card_item}>
      <View className={styles.img}>
        <LabAndImg value={labAndImgObj(props.value)} />
      </View>
      <View className={styles.name_count}>
        <View className={styles.name_con}>
          <Text>{value.color_card_name}</Text>
          <View className={styles.card_info_label}>
            {value.affiliation_product?.map(item => <Text key={item.id}>{item.code}</Text>)}
          </View>
        </View>

        <View className={styles.btns}>
          <View className={styles.count_btn}>
            <Counter
              minNum={1}
              maxNum={2}
              defaultNum={value.count}
              onClickBtn={onChangeNum}
              onBlue={onChangeNum}
              unit="件"
              onMin={onMin}
              onMax={onMax}
            />
          </View>
        </View>
      </View>
    </View>
  </>
})
