import { Image, Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useBluetooth } from "../../use/contextBlueTooth"
import classnames from "classnames";
import LinkBlueTooth from "./compoents/bluetooth/LinkBlueTooth";
import { toRgb } from '../../common/bluetooth/color/colorSpace'
import styles from './index.module.scss'
import { productabsorbcontrast } from "@/api/mine"
export default () => {
    //搜索参数
    const [searchField, setSearchField] = useState({
        l1: '',
        a1: '',
        b1: '',
        l2: '',
        a2: '',
        b2: '',
    })
    type ColorList = {
        one?: any,
        two?: any
    }
    const [colorList, setColorList] = useState<ColorList>()
    const { state: colorState, measureAndGetLab } = useBluetooth()

    const getLab = async (val) => {
        if (colorState.connected) {
            let res = await measureAndGetLab()
            if (val === 1) {
                setColorList({ ...colorList, one: res })
            } else {
                setColorList({ ...colorList, two: res })
            }
        } else {
            Taro.showToast({
                title: '请链接设备',
                icon: 'none'
            })
        }
    }
    const getNowTime = () => {
        const yy = new Date().getFullYear()
        const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
        const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
        const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
        const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
    }
    //监听lab数据变化
    const [blueToothColor, setBlueToothColor] = useState('')
    const [blueToothColorTwo, setBlueToothColorTwo] = useState('')
    const [time, setTime] = useState('')
    const [timeTwo, setTimeTwo] = useState('')
    useEffect(() => {
        if (colorState.deviceLab) {

            if ((colorList as any).one?.constructor === Object) {
                const rgb = toRgb([(colorList as any).one.L, (colorList as any).one.a, (colorList as any).one.b])
                setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
                setTime(getNowTime())
                setSearchField({ ...searchField, l1: rgb[0], a1: rgb[1], b1: rgb[2] })
            }
            if ((colorList as any).two?.constructor === Object) {

                const rgb = toRgb([(colorList as any).two.L, (colorList as any).two.a, (colorList as any).two.b])
                setBlueToothColorTwo(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
                setTimeTwo(getNowTime())
                setSearchField({ ...searchField, l2: rgb[0], a2: rgb[1], b2: rgb[2] })

            }
        }
    }, [colorList])
    const reset = () => {
        setColorList({})
        setBlueToothColor('')
        setBlueToothColorTwo('')
        setTime('')
        setTimeTwo('')
        setData('')
        setResult('')
    }
    const [data, setData] = useState('')
    const [result, setResult] = useState('')
    const { fetchData } = productabsorbcontrast()
    const handTake = async () => {
        if (searchField.l1 === '') {
            Taro.showToast({
                title: '请填充基础样品',
                icon: 'none'
            })
            return
        }
        if (searchField.l2 === '') {
            Taro.showToast({
                title: '请填充对比样品',
                icon: 'none'
            })
            return
        }
        const query = {
            ...searchField
        }
        const res = await fetchData(query)
        if (res.data) {
            setData(res.data)
            let diffarray = [
                res.data.reddish && "偏红",
                res.data.yellowish && "偏黄",
                res.data.greenish && "偏绿",
                res.data.bluish && "偏蓝",
                res.data.whitish && "偏亮",
                res.data.darker && "偏暗",
            ];
            let resCont = diffarray.filter(item => item).join(",");
            setResult(resCont)
        }
    }
    return (
        <View className={styles.body}>
            {/* <View className={styles.topBox}>
                <View className={styles.leftBox}>
                    <View className={styles.leftFont}>蓝牙设备</View>
                    <View className={styles.borderBox}></View>
                    <View className={styles.cricleBox}></View>
                    <View className={styles.notNet}></View>
                </View>
                <Text className={classnames("iconfont icon-a-moreback", styles.iconMore)}></Text>
            </View> */}
            <LinkBlueTooth />
            <View className={styles.contBox} >
                <View className={styles.firstBox} style="margin-right:27px">
                    <View className={styles.firstLeftName} >基础样品</View>
                    {
                        blueToothColor === '' &&
                        <View className={styles.firstLeftbox} onClick={() => getLab(1)}>
                            <View className={styles.clickFont} >点击取色</View>
                        </View>
                    }
                    {blueToothColor && <View className={classnames(styles.color_bock)} onClick={() => getLab(1)} style={{ background: blueToothColor }}></View>

                    }
                    {
                        time === '' && <View className={styles.nameColor}>--</View>
                    }
                    {
                        time && <View className={styles.nameColor}>{time}</View>
                    }
                </View>
                <View className={styles.firstBox}>
                    <View className={styles.firstLeftName}>对比样品</View>
                    {
                        blueToothColorTwo === '' &&
                        <View className={styles.firstLeftbox} onClick={() => getLab(2)}>
                            <View className={styles.clickFont} >点击取色</View>
                        </View>
                    }
                    {blueToothColorTwo && <View className={classnames(styles.color_bocktwo)} onClick={() => getLab(2)} style={{ background: blueToothColorTwo }}></View>

                    }
                    {
                        timeTwo === '' && <View className={styles.nameColor}>--</View>
                    }
                    {
                        timeTwo && <View className={styles.nameColor}>{timeTwo}</View>
                    }
                </View>
            </View>
            <View className={styles.reslutBox}>
                <View className={styles.reslutTitle}>
                    <View className={styles.titleLeft}>测量结果</View>
                    {
                        (data as any).ciede_2000 >= 1 &&
                        <View className={styles.titleRiht}>不合格</View>
                    }
                    {
                        (data as any).ciede_2000 <= 1 &&
                        <View className={styles.titleRiht1}>合格</View>
                    }

                </View>
                {
                    data === '' &&
                    <View className={styles.notResult}>暂无数据</View>
                }
                {
                    data &&
                    <View className={styles.notBox}>
                        <View className={styles.notLeft}>色差值: {(data as any).ciede_2000}</View>
                        {
                            !(data as any).reddish && !(data as any).yellowish && !(data as any).greenish && !(data as any).bluish && !(data as any).whitish && !(data as any).darker &&
                            <View className={styles.notright}>无明显色差</View>
                        }
                        {
                            result &&
                            <View className={styles.notright}>{result}</View>
                        }
                    </View>
                }
            </View>
            <View className={styles.bottomBox}>
                <View className={styles.leftBtn} onClick={() => reset()}>重置</View>
                <View className={styles.rightBtn} onClick={() => handTake()}>提交</View>
            </View>
        </View >
    )
}