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;