import { Image, Input, ScrollView, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

interface props {
  clickAdd: (any) => void
  // onInputEven?: (a: any, c: any) => void,
  clickReduce: (any) => void
  handPlus: (any) => void
  modeFont?: number
  value: {
    showInput?: boolean
    nums?: string
    bulk_price?: Number | 0
    length_cut_price?: Number
    weight_cut_price?: Number
    code?: string
    rgb?: { r: number; g: number; b: number }
    name?: string
    roll?: number | string
    buyNums?: number | string
    id?: number
    weight_error?: number | string
  }
  goodList?: any[]
  onBlur?: (a: any, c: any) => void
}

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

  const onInputEven = (e) => {
    const res = e.detail.value
    if (props.modeFont == 0) {
      if (Number(res) < 1) {
        setValue({ count: '' })
      }
    }
    if (props.modeFont == 1) {
      if (Number(res) < 0) {
        setValue({ count: 0.5 })
      }
    }
    if (props.modeFont == 2) {
      if (Number(res) < 3) {
        setValue({ count: '' })
      }
    }
  }

  const type = useMemo(() => {
    if (props.modeFont === 0) {
      return 'number'
    }
    else {
      return 'digit'
    }
  }, [props.modeFont])
  return (
    <View className={styles.goodsBox}>
      {
        props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
      }
      {
        (props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0)
                && <View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
      }
      <View className={styles.rightGoodbox}>
        <View className={styles.leftFontsbox}>
          <View className={styles.title}>{props.value?.code} {props.value?.name}</View>
          <View className={styles.productNums}>剩：{props.value?.roll}件</View>
          {
            props?.modeFont === 0 && <View className={styles.productName}>空差：{props?.value?.weight_error as number / 1000 || 0}Kg</View>
          }
        </View>
        <View className={styles.rightFontsbox}>
          <View className={styles.money}>¥{props?.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont != 1 ? '/Kg' : '/m'}</View>
          {
            props.value.showInput && <View className={styles.inputBox}>
              <View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
                <View className={styles.reduce}>
                </View>
              </View>
              <View className={styles.numsBox}>
                <Input alwaysEmbed cursorSpacing={100} adjustPosition type={type as any} value={value.count} onInput={onInputEven} onBlur={e => props.onBlur?.(e, props.value.id)}></Input>

                {/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
              </View>
              <View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
                                +
              </View>
            </View>
          }
          {
            !props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd?.(props.value)}>+</View>
          }
        </View>
      </View>
    </View>
  )
})
// ($event) => onInputEven($event, props.value)