import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text, Input } from "@tarojs/components";
import { Popup, Progress, Slider } from "@antmjs/vantui";
import { useEffect, useRef, useState, useCallback } from "react";
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
import echarts from "@/utils/echarts.min.js";

import "./index.less";

interface Props {
  data: any
}



function Index({ data }: Props) {
  const buttonRef = useRef(null);
  const echartsRef = useRef<EchartsHandle>(null);
  const [options, setOptions] = useState({
    animation: false,
    grid: {
      // 让图表占满容器
      // containLabel: true,
      top: "28rpx",
      left: "18rpx",
      right: "28rpx",
      bottom: "17rpx",
    },
    // legend: {
    //   itemStyle: {
    //     decal: {
    //       rotation: 90
    //     }
    //   }
    // },
    xAxis: {
      // name: '',
      // nameGap: 5,
      // nameTextStyle: {
      //   color: '#e4e4e4',
      //   fontSize:7
      // },
      type: "category",
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#cccccc",
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        color: "#cccccc",
        fontSize: 8,
      },
      axisTick: {
        show: false,
      },
      data: [
        "00:01",
        "00:02",
        "00:03",
        "00:04",
        "00:05",
        "00:06",
        "00:07",
        "00:08",
        "00:09",
        "00:10",
      ],
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 8,
      splitNumber: 8,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#cccccc",
          type: [4, 2],
          dashOffset: 4,
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    visualMap: {
      z: 1,
      top: 0,
      right: 0,
      seriesIndex: 0,
      show: false,
      pieces: [
        {
          gt: 0,
          lte: 1,
          color: "#fff8c9",
        },
        {
          gt: 1,
          lte: 2,
          color: "#fff0c6",
        },
        {
          gt: 2,
          lte: 3,
          color: "#ffe5c3",
        },
        {
          gt: 3,
          lte: 4,
          color: "#ffdbbf",
        },
        {
          gt: 4,
          lte: 5,
          color: "#ffcfbb",
        },
        {
          gt: 5,
          lte: 6,
          color: "#ffbab5",
        },
        {
          gt: 6,
          lte: 7,
          color: "#ffb4b3",
        },
        {
          gt: 7,
          lte: 8,
          color: "#ffb4b3",
        },
      ],
      outOfRange: {
        color: "#ff8410",
      },
    },
    series: [
      {
        data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
        type: "line",
        smooth: true,
        z: 1,
        areaStyle: {},
        color: "red",
      },
      {
        data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
        type: "line",
        smooth: true,
        symbolSize: 5,
        lineStyle: {
          color: "#ff8410",
          width: 1,
        },
        itemStyle: {
          color: "#ff8410",
        },
      },
      {
        name: "a",
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        type: "bar",
        barWidth: 12,
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#ffcf56",
        },
      },
      {
        name: "b",
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#febb22",
        },
      },
      {
        name: "c",
        data: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#ffac28",
        },
      },
      {
        name: "d",
        data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 1],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#ff8410",
        },
      },
      {
        name: "e",
        data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 0],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#f85804",
        },
      },
      {
        name: "f",
        data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#e02e14",
        },
      },
      {
        name: "h",
        data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#b30016",
        },
      },
      {
        name: "i",
        data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
        type: "bar",
        z: 2,
        stack: "x",
        visualMap: false,
        itemStyle: {
          color: "#750010",
        },
      },
    ],
  })

  const level = [8, 7, 6, 5, 4, 3, 2];
  const [newOptions, setNewOptions] = useState(options)
  const [newData, setNewData] = useState(0)
  const full = useCallback(() => {
    // let box = document.getElementById("box");
    // box?.classList.add('fullscreen')


    let stop = 0
    // let time = setInterval(function () {
    //   stop++
    let option = JSON.parse(JSON.stringify(options))
    let num = Math.floor(Math.random() * 9)
    let count = 0
    options.series.map(item => {
      if (item.type === 'line') {
        item.data.splice(0, 1)
        item.data.push(num)
      }
      if (item.type === 'bar') {
        count++
        item.data.splice(0, 1)
        if (count <= num) {
          item.data.push(1)
        } else {
          item.data.push(0)
        }
      }
    })
    console.log(option);

    // 更新图表数据
    setNewOptions(option)
    //   if (stop > 20) {
    //     clearInterval(time)
    //   }
    // }, 1000)

  }, [data])


  useEffect(() => {
    setOptions(newOptions)
  }, [newOptions]);

  useEffect(() => {
    setNewData(data)
  }, [data]);

  useEffect(() => {
    let option = JSON.parse(JSON.stringify(options))
    let num = Math.floor(newData * 9)
    let count = 0
    options.series.map(item => {
      if (item.type === 'line') {
        item.data.splice(0, 1)
        item.data.push(num)
      }
      if (item.type === 'bar') {
        count++
        item.data.splice(0, 1)
        if (count <= num) {
          item.data.push(1)
        } else {
          item.data.push(0)
        }
      }
    })
    console.log(option, data);

    // 更新图表数据
    setNewOptions(option)
  }, [newData])
  // 当 someProp 变化时执行
  // const quanping = () => {
  //     T.setPageOrientation({
  //       orientation: "portrait",
  //     });


  //     // taro.setPageOrientation({
  //     //   orientation: "landscape",
  //     // });

  // },


  return (
    <Block>
      <View id='box' className='box'>
        <Echarts
          force-use-old-canvas='false'
          echarts={echarts}
          option={options}
          ref={echartsRef}
          // isPage={false}
          // style自定义设置echarts宽高
          style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
        />
        <View className='box_background'>
          <Image className='full' ref={buttonRef} src={require("@/img/full-scran.png")} onClick={full}></Image>
          <View className='power'>实时能量</View>
          {level.map((item) => (
            <View className='line' key={item}>
              <View className='number'>{item}</View>
              <View className='bottom_line'></View>
            </View>
          ))}
          <View className='line'>
            <View className='number'>1</View>
          </View>
          <View className='time'>时间</View>
        </View>
      </View>
    </Block >
  );
}

export default Index;