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 classnames from 'classnames'
import { isObject } from '@tarojs/shared'
import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth'
import styles from './index.module.scss'
import { useBluetooth } from '@/use/contextBlueTooth'
import { toRgb } from '@/common/bluetooth/color/colorSpace'
import { ProductAbsorbContrast } from '@/api/index'
import { alert } from '@/common/common'

const SampleComparison = () => {
  // 搜索参数
  const [searchField, setSearchField] = useState({
    l1: '',
    a1: '',
    b1: '',
    l2: '',
    a2: '',
    b2: '',
  })
  interface ColorList {
    one?: Record<string, any> | null
    two?: Record<string, any> | null
  }
  const [colorList, setColorList] = useState<ColorList>({
    one: null,
    two: null,
  })
  const { state: colorState, measureAndGetLab } = useBluetooth()

  const getLab = async(val) => {
    if (colorState.connected) {
      const 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) {
      const one = colorList.one
      const two = colorList.two
      if (isObject(one)) {
        const rgb = toRgb([one?.L, one?.a, one?.b])
        setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
        setTime(getNowTime())
        setSearchField({ ...searchField, l1: rgb[0], a1: rgb[1], b1: rgb[2] })
      }
      if (isObject(two)) {
        const rgb = toRgb([two?.L, two?.a, 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 [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
    }
    alert.showLoading('分析中')
    const query = {
      ...searchField,
    }
    const res = await fetchData(query)
    if (res.success) {
      setData(res.data)
      const diffarray = [
        res.data.reddish && '偏红',
        res.data.yellowish && '偏黄',
        res.data.greenish && '偏绿',
        res.data.bluish && '偏蓝',
        res.data.whitish && '偏亮',
        res.data.darker && '偏暗',
      ]
      const resCont = diffarray.filter(item => item).join(',')
      setResult(resCont)
    }
    alert.hideLoading()
  }
  const reset = () => {
    setColorList({})
    setBlueToothColor('')
    setBlueToothColorTwo('')
    setTime('')
    setTimeTwo('')
    setData('')
    setResult('')
  }
  return (
    <View className={styles.body}>
      <View className={styles.topBox}>
        <LinkBlueTooth />
      </View>
      <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>
  )
}
export default SampleComparison
