import { View, Image } from '@tarojs/components'
import './index.less'
import ColorPicker from "@/components/color-picker";
import { useEffect, useState } from 'react';
import history from "../../assets/history.png";

export default function Index() {
  const list = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',]
  const [open, setOpen] = useState(false)


  const handleColorPicker = (e) => {
    setOpen(false)
  }
  useEffect(() => {

  }, [])
  return (
    <View className="index">
      <View className='head'>
        <View className='head-left'>像素跳动</View>
        <View className='head-right'>  <Image className='icon' src={history} />历史记录</View>
      </View>
      <View className="grid">
        {list.map((item, index) => <View className={`grid-item ${index == 0 ? 'active' : ''}`} key={index}></View>)}
      </View >

      <View className='colorbox'>
        <View className='colorbox-icon' onClick={() => setOpen(true)}></View>
        <View className='colorbox-btn' onClick={() => setOpen(true)}>#EDEDED</View>
      </View>
      <View className='hint'>*请选取喜欢的颜色，再点击小方格填入颜色；</View>
      <View className='btn' >传输画面到音响屏幕</View>
      <ColorPicker open={open} handleColorPicker={handleColorPicker} />
    </View >
  )
}