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 { formatHashTag } from '@/common/fotmat'
import { alert } from '@/common/common'

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

export interface ColorItem {
  bulk_price: number
  code: string
  id: number
  kind_code: string
  kind_id: number
  kind_name: string
  lab: { l: number; a: number; b: number }
  last_bulk_price: number
  length_cut_price: number
  name: string
  rgb: { r: number; g: number; b: number }
  texture_url: string
  update_price_time: string
  weight_cut_price: number
  status: boolean
  count?: number
}

export interface Param {
  value: ColorItem
  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) => {
      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}>
        <Text>{formatHashTag(value.code, value.name)}</Text>
        <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>
  </>
})
