import { Input, View } from "@tarojs/components"
import { useEffect, useMemo, useRef, useState } from "react"
import Big from 'big.js'
import styles from "./index.module.scss"
type params = {
    minNum?: number, //最小值
    maxNum?: number, //最大值
    step?: number, //步长
    defaultNum?: number, //默认值
    digits?: number //多少位小数
    onChange?:(val:number) => void, 
    onBlue?:(val:number) => void, //失去焦点触发
    onClickBtn?:(val:number) => void, 
    unit?: string,
    disable?: true|false, //是否禁用
}
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
    const [value, setValue] = useState<any>({count:defaultNum})

    const onPlus = () => {
        if(disable) return false
        let {count} = value
        let num_res = Big(count).add(step).toNumber()
        num_res = num_res >= maxNum?maxNum:num_res
        num_res = formatDigits(num_res)
        setValue({...value, count:num_res})
        onChange?.(parseFloat(num_res))
        onClickBtn?.(parseFloat(num_res))
    }
    const minus = () => {
        if(disable) return false
        let {count} = value
        let num_res = Big(count).minus(step).toNumber()
        num_res = num_res < minNum?minNum:num_res
        setValue({...value, count:num_res})
        onChange?.(parseFloat(num_res))
        onClickBtn?.(parseFloat(num_res))
    }

    //保留小数
    const formatDigits = (num) => {
        num = num + ''
        if(num.includes('.')&&digits > 0) { 
            console.log('num::',num.includes('.'))
            let res = num.split('.')
            let last_num = res[1].substr(0, digits)
            return res[0] + '.' + last_num
        }
        return  parseFloat(num) 
    }

    //检查数据
    const checkData = (val) => {
        let num = parseFloat(val)
        if(num > maxNum) return maxNum
        if(num < minNum) return minNum
        return val
    }
    

    const onInputEven = (e) => {
        let res = e.detail.value
        if(res === '') {
            setValue({...value, count:minNum})
            onChange?.(minNum)
        }
        else if(!isNaN(Number(res))) {
            let count = formatDigits(res)
            count = checkData(count)
            setValue({...value, count})
            onChange?.(parseFloat(count as string))
        } else {
            let num = parseFloat(res)
            if(!isNaN(num)) {
                let count  = formatDigits(num)
                count = checkData(count)
                setValue({...value, count})
                onChange?.(count as number)
            } else {
                setValue({...value, count:defaultNum})
                onChange?.(defaultNum)
            }
            
        }
    }

    const onBluerEven = () => {
        let num = parseFloat(value.count)
        if(!isNaN(num)) {
            let count  = formatDigits(num)
            count = checkData(count)
            setValue({...value, count})
            onBlue?.(count as number)
        } else {
            setValue({...value, count:defaultNum})
            onBlue?.(defaultNum)
        }
    }   
    return (
        <View className={styles.main}>
            <View className={styles.reduce} onClick={() => minus()}>-</View>
            <View className={styles.input}>
                <Input 
                    value={String(value.count)}
                    onInput={onInputEven}
                    onBlur={onBluerEven}
                    type='digit'
                    disabled={disable}
                />
                <View className={styles.unit}>{unit}</View>
            </View>
            <View className={styles.plus} onClick={() => onPlus()}>+</View>
        </View>
    )
}