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 { useRef } from "react";
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
import echarts from "@/utils/echarts.min.js";

import "./index.less";

interface Props {
  Electricity: any;
  matrixElectricity: any;
  facialMaskConnectStatus: any;
}

function Index() {
  const stepIndex = 0;
  const testIndex = 1;

  const stepList = [
    {
      value: "Step1",
      name: "额头",
      finish: false,
    },
    {
      value: "Step2",
      name: "左脸颊",
      finish: false,
    },
    {
      value: "Step3",
      name: "右脸颊",
      finish: false,
    },
  ];

  const gearLevel = {
    currentGear: null,
    //现在工作的档位
    currentGearMode: "forehead",
    //现在工作模式
    forehead: 5,
    leftCheek: 5,
    rightCheek: 5,
  };
  const echartsRef = useRef<EchartsHandle>(null);
  const option: EChartOption = {
    grid: {
      // 让图表占满容器
      top: "28rpx",
      left: "18rpx",
      right: "28rpx",
      bottom: "17rpx",
    },
    legend: {
      show: false,
      zlevel: -1,
    },
    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: false,
        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];

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

      <Block>
        <View>
          <View className="water_test">
            <View className="test_step flex aitems sb">
              {stepList.map((item, index) => {
                return (
                  <View className="step_block flex aitems" key={index}>
                    <View className="step_top flex aitems">
                      <View className="drop"></View>
                      <View className="step_num">{item.value}</View>
                      {index != 2 && <View className="line"></View>}
                    </View>
                    <View className="step_name">{item.name}</View>
                  </View>
                );
              })}
            </View>
            <View className="test_txt">
              通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案
            </View>
          </View>

          <View className="testing">
            <View className="testing_header flex aitems">
              {stepList.map((item, index) => {
                return (
                  <View
                    className="items flex aitems jcenter"
                    key={index}
                    style={stepIndex == index ? "background: #fff" : ""}
                  >
                    {stepIndex > index && (
                      <Image
                        className="finish_img"
                        src={require("@/img/full-scran.png")}
                        mode="aspectFill"
                      ></Image>
                    )}
                    <View className="value">{item.value}</View>
                    <View className="name">{item.name}</View>
                  </View>
                );
              })}
            </View>
            <View className="testing_content">
              <View className="progress_box flex aitems">
                <View className="title">
                  {stepList[stepIndex].name + "水分测试"}
                </View>
                {/*  <view class='progress_block flex aitems'> */}
                <Progress
                  style={{
                    width: "300rpx",
                  }}
                  percentage="80"
                  strokeWidth="14"
                  showPivot={false}
                  color="#C2E5F3"
                ></Progress>
                {stepList[stepIndex].finish && 80 >= 99 ? (
                  <Image
                    className="finish_img"
                    src={require("@/img/finished.png")}
                    mode="aspectFill"
                  ></Image>
                ) : (
                  <Image
                    className="finish_img"
                    src={require("@/img/no-finish.png")}
                    mode="aspectFill"
                  ></Image>
                )}
                {/*  </view> */}
              </View>
              {/*  <view class='tips' wx:if='{{!finish}}'> */}
              {/*  请参考视频指引，将仪器紧贴<text style='color: #000000'>额头区域</text> */}
              {/*  </view> */}
              <View className="tips flex sb">
                <View>
                  请参考视频指引，将仪器紧贴
                  {(testIndex == 1 || testIndex == 2 || testIndex == 4) && (
                    <Text
                      style={{
                        color: "#000000",
                      }}
                    >
                      {stepList[stepIndex].name + "区域"}
                    </Text>
                  )}
                  {testIndex == 1 && (
                    <Text>，并点击下方启动检测按钮进行测试</Text>
                  )}
                </View>
              </View>
            </View>
          </View>
        </View>

        <View>
          <View className="gear_adjust">
            <View className="title">档位调节</View>
            <View className="gear_box">
              <View className="gear flex aitems">
                <View className="pos">额头</View>
                <Slider
                  style={{
                    flex: "1",
                  }}
                  value={gearLevel.forehead}
                  min={1}
                  max={10}
                  inactiveColor="#F8F8F8"
                  activeColor={
                    gearLevel.currentGearMode == "forehead"
                      ? "#EECDA1"
                      : "#CCCCCC"
                  }
                  disabled={gearLevel.currentGearMode !== "forehead"}
                  barHeight={6}
                  // useButtonSlot
                  data-key="forehead"
                  // onDrag={this.onDrag}
                  // onChange={this.onChange}
                  renderButton={
                    <Block>
                      <View
                        className={
                          "custom-button " +
                          (gearLevel.currentGearMode !== "forehead" &&
                            "current-button")
                        }
                      >
                        <View className="circle"></View>
                        <View className="level">
                          {gearLevel.forehead + "档"}
                        </View>
                      </View>
                    </Block>
                  }
                ></Slider>
              </View>
              <View className="gear flex aitems">
                <View className="pos">左脸颊</View>
                <Slider
                  style={{
                    flex: "1",
                  }}
                  value={gearLevel.leftCheek}
                  min={1}
                  max={10}
                  inactiveColor="#F8F8F8"
                  activeColor={
                    gearLevel.currentGearMode == "leftCheek"
                      ? "#EECDA1"
                      : "#CCCCCC"
                  }
                  disabled={gearLevel.currentGearMode !== "leftCheek"}
                  barHeight={6}
                  // useButtonSlot
                  data-key="leftCheek"
                  // onDrag={this.onDrag}
                  // onChange={this.onChange}
                  renderButton={
                    <Block>
                      <View
                        className={
                          "custom-button " +
                          (gearLevel.currentGearMode !== "leftCheek" &&
                            "current-button")
                        }
                      >
                        <View className="circle"></View>
                        <View className="level">
                          {gearLevel.leftCheek + "档"}
                        </View>
                      </View>
                    </Block>
                  }
                ></Slider>
              </View>
              <View className="gear flex aitems">
                <View className="pos">右脸颊</View>
                <Slider
                  style={{
                    flex: "1",
                  }}
                  value={gearLevel.rightCheek}
                  min={1}
                  max={10}
                  inactiveColor="#F8F8F8"
                  activeColor={
                    gearLevel.currentGearMode == "rightCheek"
                      ? "#EECDA1"
                      : "#CCCCCC"
                  }
                  disabled={gearLevel.currentGearMode !== "rightCheek"}
                  barHeight={6}
                  // useButtonSlot
                  data-key="rightCheek"
                  // onDrag={this.onDrag}
                  // onChange={this.onChange}
                  renderButton={
                    <Block>
                      <View
                        className={
                          "custom-button flex jcenter aitems " +
                          (gearLevel.currentGearMode !== "rightCheek" &&
                            "current-button")
                        }
                      >
                        <View className="circle"></View>
                        <View className="level">
                          {gearLevel.rightCheek + "档"}
                        </View>
                      </View>
                    </Block>
                  }
                ></Slider>
              </View>
              {/* <View className='level_box flex aitems'>
                {(10).map((item, index) => {
                  return (
                    <View key={item}
                      className='level_num'
                      style={{
                        marginRight: '1.225rem',
                      }}
                    >
                      {item + 1}
                    </View>
                  )
                })}
              </View> */}
            </View>
          </View>
        </View>

        <View className="gear_adjustment">
          <View className="gear_box">
            <View className="gear flex aitems">
              <View className="pos">额头</View>
              <View className="gear_button flex aitems">
                <View className="button_minus">
                  <Image
                    className="image"
                    src={require("@/img/fr200/minus.png")}
                  ></Image>
                </View>
                <View className="button_value">
                  <View className="number">1</View>档
                </View>
                <View className="button_plus">
                  <Image
                    className="image"
                    src={require("@/img/fr200/add.png")}
                  ></Image>
                </View>
              </View>
            </View>
            <View className="gear flex aitems">
              <View className="pos">左脸颊</View>
              <View className="gear_button flex aitems">
                <View className="button_minus">
                  <Image
                    className="image"
                    src={require("@/img/fr200/minus.png")}
                  ></Image>
                </View>
                <View className="button_value">
                  <View className="number">1</View>档
                </View>
                <View className="button_plus">
                  <Image
                    className="image"
                    src={require("@/img/fr200/add.png")}
                  ></Image>
                </View>
              </View>
            </View>
            <View className="gear flex aitems">
              <View className="pos">右脸颊</View>
              <View className="gear_button flex aitems">
                <View className="button_minus">
                  <Image
                    className="image"
                    src={require("@/img/fr200/minus.png")}
                  ></Image>
                </View>
                <View className="button_value">
                  <View className="number">1</View>档
                </View>
                <View className="button_plus">
                  <Image
                    className="image"
                    src={require("@/img/fr200/add.png")}
                  ></Image>
                </View>
              </View>
            </View>
          </View>
        </View>
      </Block>
    </Block>
  );
}

export default Index;