import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text } from "@tarojs/components";
import { useState, useEffect } from "react";
// import "./index.less";

interface Props {
  Electricity: any;
  matrixElectricity: any;
  facialMaskConnectStatus: any;
}
function Index({
  Electricity,
  matrixElectricity,
  facialMaskConnectStatus,
}: Props) {
  return (
    <Block>
      <View className="electricity-box">
        {/* <View className="item">
          <View className="label">WE200电量 :</View>
          <View className="value flex aitems">
            {matrixElectricity >= 4 && (
              <Block>
                <View className="v1 battery_icon"></View>
                <View className="v1 battery_icon"></View>
                <View className="v1 battery_icon"></View>
                <View className="v1 battery_icon"></View>
              </Block>
            )}
            {matrixElectricity === 3 && (
              <Block>
                <View className="v1 battery_icon"></View>
                <View className="v1 battery_icon"></View>
                <View className="v1 battery_icon"></View>
                <View className="v2 battery_icon"></View>
              </Block>
            )}
            {matrixElectricity === 2 && (
              <Block>
                <View className="v1 battery_icon"></View>
                <View className="v1 battery_icon"></View>
                <View className="v2 battery_icon"></View>
                <View className="v2 battery_icon"></View>
              </Block>
            )}
            {matrixElectricity === 1 && (
              <Block>
                <View className="v1 battery_icon"></View>
                <View className="v2 battery_icon"></View>
                <View className="v2 battery_icon"></View>
                <View className="v2 battery_icon"></View>
              </Block>
            )}
            {matrixElectricity === 0 && (
              <Block>
                <View className="v3 battery_icon"></View>
                <View className="v2 battery_icon"></View>
                <View className="v2 battery_icon"></View>
                <View className="v2 battery_icon"></View>
              </Block>
            )}
          </View>
        </View> */}
        {facialMaskConnectStatus === 1 && (
          <Block>
            <View className="item">
              <View className="label">面罩电量 :</View>
              <View className="value flex aitems">
                {Electricity >= 4 && (
                  <Block>
                    <View className="v1 battery_icon"></View>
                    <View className="v1 battery_icon"></View>
                    <View className="v1 battery_icon"></View>
                    <View className="v1 battery_icon"></View>
                  </Block>
                )}
                {Electricity === 3 && (
                  <Block>
                    <View className="v1 battery_icon"></View>
                    <View className="v1 battery_icon"></View>
                    <View className="v1 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                  </Block>
                )}
                {Electricity === 2 && (
                  <Block>
                    <View className="v1 battery_icon"></View>
                    <View className="v1 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                  </Block>
                )}
                {Electricity === 1 && (
                  <Block>
                    <View className="v1 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                  </Block>
                )}
                {Electricity === 0 && (
                  <Block>
                    <View className="v3 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                    <View className="v2 battery_icon"></View>
                  </Block>
                )}
              </View>
            </View>
          </Block>
        )}
      </View>
    </Block>
  );
}

export default Index;
