import { Text, View } from '@tarojs/components'
import type { FC } from 'react'
import { useState } from 'react'
import classnames from 'classnames'
import DrawerCenter from '../DrawerCenter'
import styles from './index.module.scss'
import { toRgb } from '@/common/bluetooth/color/colorSpace'
import { formatDateTime } from '@/common/format'

interface PropsType {
  list?: Array<any>
  customStyle?: React.CSSProperties
}

const RecommendColor: FC<PropsType> = (props) => {
  const { list, customStyle = {} } = props

  // rgb转换字符串
  const labRoRgb = (val) => {
    const lab = val ? [val.l, val.a, val.b] : []
    const rgb = toRgb(lab)
    return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
  }

  // 保留1位小数
  const noScale = (val, num = 1) => {
    return val.toFixed(num)
  }

  const [show, setShow] = useState(false)
  const [selectObj, setSelectObj] = useState({
    rgb: '',
    product_color_code: '',
    product_color_name: '',
  })

  const openShow = (val) => {
    setShow(true)
    setSelectObj(val)
    setSelectObj({ ...val, rgb: labRoRgb(val.lab) })
  }

  return (
    <View className={classnames(styles.RecommendColor_main, customStyle)}>
      <View className={styles.RecommendColor_list}>
        {list?.map((item) => {
          return (
            <View className={styles.RecommendColor_item} key={item.id} onClick={() => openShow(item)}>
              <View className={styles.rgbColor} style={{ background: labRoRgb(item.lab) }}>
                <View className={styles.lab}>
                  <text>L*a*b*</text>
                  <text>{noScale(item.lab.l)}</text>
                  <text>{noScale(item.lab.a)}</text>
                  <text>{noScale(item.lab.b)}</text>
                </View>
              </View>
              <View className={styles.product_con}>
                <View className={styles.product_title}>
                  <View className={styles.product_name}>{`${item.product_code}# ${item.product_name}`}</View>
                  <View className={styles.product_num}>{noScale(item.match_rate_percent, 1)}%</View>
                </View>
                <View className={styles.product_color}>{`${item.product_color_code} ${item.product_color_name}`}</View>
                <View className={styles.date}>
                  <text className={styles.g_num}>{item.dyelot_number}</text>
                  <View className={styles.labColor_btn}>+</View>
                </View>
              </View>
            </View>
          )
        })}
      </View>

      <DrawerCenter showModal={show}>
        <View className={styles.con}>
          <View className={styles.showRgb} style={{ background: selectObj?.rgb }}></View>
          <View className={styles.name}>{`${selectObj.product_color_code} ${selectObj.product_color_name}`}</View>
        </View>
      </DrawerCenter>
    </View>
  )
}
export default RecommendColor
