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

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
    },
    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) => {
        let 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) == 0 || Number(res) < 3) {
                setValue({ count: 3 })
            }
        }
    }

    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.productName}>0681# 26S全棉平纹</View> */}
                    <View className={styles.productNums}>剩:{props.value?.roll}件</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 === 0 ? '/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 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)