import { CustomWrapper, View } from '@tarojs/components'
import { memo, useCallback, useMemo } from 'react'
import classnames from 'classnames'
import Big from 'big.js'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
import Counter from '@/components/counter'
import LabAndImg from '@/components/LabAndImg'
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import type { saleModeType } from '@/common/enum'

interface param {
  sale_model: saleModeType
  onChangeSelect: (val: any) => any
  onChangeCount: (val: any) => any
  item: any
}
const ProductItem = (props: param) => {
  const { onChangeCount, onChangeSelect, item, sale_model } = props

  const selectCallBack = useCallback(() => {
    onChangeSelect({ ...item, selected: true })
  }, [item])
  const colseCallBack = useCallback(() => {
    onChangeSelect({ ...item, selected: false })
  }, [item])
  const getLabAndImg = useCallback(() => {}, [])
  const getInputValue = useCallback(
    (e) => {
      const roll = item.sale_mode == 0 ? parseFloat(e) : 0
      const length = item.sale_mode != 0 ? parseFloat(new Big(parseFloat(e)).times(100)) : 0
      onChangeCount({ ...item, roll, length })
    },
    [item],
  )
  const rga = useMemo(() => {
    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.product_color_code }
  }, [item])

  const clickProduct = useCallback(() => {
    if (sale_model == item.sale_mode) { onChangeSelect({ ...item, selected: !item.selected }) }
  }, [item])

  console.log('刷新2：：', item)

  // 格式化金额
  const formatPirce = useCallback((price) => {
    return Number(formatPriceDiv(price))
  }, [])
  // 格式化数量
  const formatCount = useCallback((item) => {
    return item.sale_mode == 0 ? item.roll : item.length / 100
  }, [])
  // 格式化单位
  const formatUnit = useCallback((item) => {
    return item.sale_mode == 0 ? '条' : '米'
  }, [])

  const model_status = useMemo(() => {
    return sale_model != item.sale_mode
  }, [item])
  return (
    <View className={classnames(styles.product_item, model_status && styles.no_product_item_select)}>
      <View className={styles.checkbox}>
        <MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={model_status} />
      </View>
      <View className={styles.img}>
        <LabAndImg value={rga} showStatus={false} onClick={getLabAndImg} />
      </View>
      <View className={styles.product_item_name}>
        <View className={styles.product_item_name_header}>
          <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
          <View className={styles.price}>
            <text>￥</text>
            {formatPirce(item.sale_price)}
            <text>/{item.eunit}</text>
          </View>
        </View>
        <View className={styles.count}>
          <View className={styles.des}>
            <View className={styles.subtitle}>{`${item.product_color_code} ${item.product_color_name}`}</View>
            <View className={styles.tag}>{item.sale_mode_name}</View>
          </View>
          <View className={styles.btn_count}>
            <Counter
              onBlue={getInputValue}
              defaultNum={formatCount(item)}
              step={item.step}
              digits={item.digits}
              onClickBtn={getInputValue}
              unit={formatUnit(item)}
              minNum={item.minNum}
              maxNum={item.maxNum}
              disabled={model_status}
            />
          </View>
        </View>
      </View>
    </View>
  )
}
export default memo(ProductItem)
