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 "./index.less";

interface Props {
  isRuningTest: boolean; // 是否已开始水分测试
  stepList: any;
  stepIndex: any;
}

function Index({ isRuningTest, stepList, stepIndex }: Props) {
  // const stepIndex = 0;
  const testIndex = 1;

  // const stepList = [
  //   {
  //     value: "Step1",
  //     name: "额头",
  //     finish: false,
  //     schedule:0,
  //     color:["#ee0a24",'#c2e5f3']
  //   },
  //   {
  //     value: "Step2",
  //     name: "左脸颊",
  //     finish: false,
  //     schedule:0,
  //     color:["#ee0a24",'#c2e5f3']
  //   },
  //   {
  //     value: "Step3",
  //     name: "右脸颊",
  //     finish: false,
  //     schedule:0,
  //     color:["#ee0a24",'#c2e5f3']
  //   },
  // ];
  return (
    <Block>
      <View>
        {!isRuningTest && (
          <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>
        )}

        {isRuningTest && (
          <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/finished.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={stepList[stepIndex].schedule}
                  strokeWidth="14"
                  showPivot={false}
                  color={stepList[stepIndex].color}
                ></Progress>
                {stepList[stepIndex].finish ? (
                  <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>
    </Block>
  );
}

export default Index;
