import { Input, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'

// 产品商品元素
interface PropGoods {
  list: any[]
  obj: {
    sale_mode?: number | string
  }
  modeFont: number
  clickReduce?: (item: any) => void
  handPlus?: (item: any) => void
  onBlur?: (e: any, item: any) => void
}
const GoodsItem = (porps: PropGoods) => {
  const { list = [], obj = {} } = porps
  const labAndImgObj = useCallback((item) => {
    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
  }, [])

  // const [value, setValue] = useState<any>({ count: props.value.nums })

  const onInputEven = (e, it) => {
    const res = e.detail.value
    if (porps.modeFont == 0) {
      if (Number(res) < 1) {
        // setValue({ count: '' })
      }
    }
    if (porps.modeFont == 1) {
      if (Number(res) < 0) {
        // setValue({ count: '' })
      }
    }
    if (porps.modeFont == 2) {
      if (Number(res) < 0) {
        // setValue({ count: '' })
      }
    }
  }

  const type = useMemo(() => {
    if (porps.modeFont === 0) {
      return 'number'
    }
    else {
      return 'digit'
    }
  }, [porps.modeFont])

  return (
    <>
      {
        list.map((item, index) => {
          return (
            <View className={styles.goodsBox} key={index}>
              <View className={styles.goodsProduct}>{item.code}# {item.name}</View>
              <View className={styles.goodsLine}></View>
              {
                item.product_colors.map((it, inx) => {
                  return (
                    <View className={styles.itemGoods} key={inx}>
                      <View className={styles.itemPic}>
                        <LabAndImg value={labAndImgObj(it)} />
                      </View>
                      {/* <View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View> */}
                      <View className={styles.itemRight}>
                        <View className={styles.item_right_top}>
                          <View className={styles.itemName}>{formatHashTag(it.code, it.name)}</View>
                          <View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View>
                          {/* <View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View> */}
                        </View>
                        <View className={styles.item_right_Bottom}>
                          <View className={styles.flexBox}>
                            <View className={styles.itemMoney}>¥{formatPriceDiv(it.sale_price)}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
                            {/* {
                              obj?.sale_mode === 0 && it?.sale_price !== it?.standard_sale_price && <View className={styles.lastBox}>¥{it?.standard_sale_price / 100}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
                            } */}
                          </View>
                          <View className={styles.newBox}>
                            <View className={styles.reduceBox} onClick={() => { porps.clickReduce?.(it) }}>
                              <View className={styles.reduce}>
                              </View>
                            </View>
                            <View className={styles.numsBox}>
                              <Input alwaysEmbed cursorSpacing={100} adjustPosition type={type as any} value={it.nums} onInput={e => onInputEven(e, it)} onBlur={e => porps.onBlur?.(e, it)}></Input>
                            </View>
                            <View className={styles.addBox} onClick={() => { porps.handPlus?.(it) }}>
                                +
                            </View>
                          </View>
                        </View>
                      </View>
                    </View>
                  )
                })
              }
            </View>
          )
        })
      }
    </>

  )
}
export default memo(GoodsItem)
