import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
import { Component, PropsWithChildren, useEffect, useState } from "react";

import "taro-ui/dist/style/components/button.scss"; // 按需引入
import Taro from "@tarojs/taro";
// 引入 Swiper, SwiperItem 组件

/*** redux ***/
import { connect } from "react-redux";
import { setMobile } from "@/store/features/userInfo";
/*** redux end ***/
import Navbar from "@/components/navbar/navbar";
import Echarts from "./Echarts/index";
import "./moisture_test_report.less";
import { go } from "@/utils/traoAPI";

class MoistureTestReport extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "重新登录",
      imgUrl: '',
      reportData: {
        curDate: '',
        shuifenLevel: {
          head: 2,
          leftFace: 3,
          rightFace: 7
        },
        shuifenList: [],
        shuifenGear: {
          head: 0,
          leftFace: 0,
          rightFace: 0
        }
      },
      isClock: false,
      xinde: '',
      imglist: [],
      id: 0,
      show: false,
      modeId: 0
    };
  }


  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  onLoad(option) {
    let data = JSON.parse(option.data)
    let { reportData } = this.state
    reportData.curDate = option.date
    data.GearData.map(item => {
      if (item.name == '额头') {
        reportData.shuifenLevel.head = item.forehead
        let gear = Math.ceil((11 - reportData.shuifenLevel.head) / 2)
        reportData.shuifenGear.head = gear

      } else if (item.name == '左脸颊') {
        reportData.shuifenLevel.leftFace = item.forehead
        let gear = Math.ceil((11 - reportData.shuifenLevel.leftFace) / 2)
        reportData.shuifenGear.leftFace = gear
      } else if (item.name == '右脸颊') {
        reportData.shuifenLevel.rightFace = item.forehead
        let gear = Math.ceil((11 - reportData.shuifenLevel.rightFace) / 2)
        reportData.shuifenGear.rightFace = gear
      }
    })
    this.setState({ reportData, modeId: option.modeId });
  }
  async initData() { }
  toIndex() {
    Taro.reLaunch({ url: "/pages/index/index" });
  }
  toNursing() {
    go(`/moduleIOT/pages/iotCarePlan/FR200?modeId=${this.state.modeId}`)
  }

  render() {
    let { name, imgUrl, reportData, reportData1, isClock, xinde, imglist, id, show, modeId } = this.state

    const getStatusData = (level) => {
      var bgCssData = {
        serious: 'background: #FFE3E3',
        moderate: 'background: #FFEBDC',
        slight: 'background: #F6FCFF',
        normal: 'background: #F8F8F8',
        sufficient: 'background: #F8F8F8'
      }
      // var progressBgData = {
      //   serious: 'background: #FF9393',
      //   moderate: 'background: #FFC58C',
      //   slight: 'background: #E5F3F9',
      //   normal: 'background: #C2E5F3',
      //   sufficient: 'background: #9FDBF3'
      // }
      var progressBgData = {
        serious: '#FF9393',
        moderate: '#FFC58C',
        slight: '#E5F3F9',
        normal: '#C2E5F3',
        sufficient: '#9FDBF3'
      }
      if (level >= 1 && level <= 2) {
        return {
          bg: bgCssData.serious,
          title: '严重缺水',
          gear: 5,
          img: 'serious',
          progressBg: progressBgData.serious
        }
      } else if (level >= 3 && level <= 4) {
        return {
          bg: bgCssData.moderate,
          title: '中度缺水',
          gear: 4,
          img: 'moderate',
          progressBg: progressBgData.moderate
        }
      } else if (level >= 5 && level <= 6) {
        return {
          bg: bgCssData.slight,
          title: '轻微缺水',
          gear: 3,
          img: 'slight',
          progressBg: progressBgData.slight
        }
      } else if (level >= 7 && level <= 8) {
        return {
          bg: bgCssData.normal,
          title: '水分正常',
          gear: 2,
          img: 'normal',
          progressBg: progressBgData.normal
        }
      } else if (level >= 9 && level <= 10) {
        return {
          bg: bgCssData.sufficient,
          title: '水分充足',
          gear: 1,
          img: 'sufficient',
          progressBg: progressBgData.sufficient
        }
      }
    }
    return (

      <Block>

        <Navbar isBack titleSlot='水分测试报告'></Navbar>
        <View className='moisture_test_report'>
          <View className='time'>{reportData.curDate}</View>
          <View className='report_data'>
            <View className='forehead moisture_block flex' style={getStatusData(reportData.shuifenLevel.head)!.bg}>
              <Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.head)!.img}.png`)} mode='aspectFill'></Image>
              <View className='pos_info'>
                <View className='top'>额头</View>
                <View className='bottom'>{getStatusData(reportData.shuifenLevel.head)!.title}</View>
                <View className='bottom'></View>

              </View>
            </View>
            <View className='left_face moisture_block flex' style={getStatusData(reportData.shuifenLevel.leftFace)!.bg}>
              <Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.leftFace)!.img}.png`)} mode='aspectFill'></Image>
              <View className='pos_info'>
                <View className='top'>左脸颊</View>
                <View className='bottom'>{getStatusData(reportData.shuifenLevel.leftFace)!.title}</View>
                <View className='bottom'></View>

              </View>
            </View>
            <View className='right_face moisture_block flex' style={getStatusData(reportData.shuifenLevel.rightFace)!.bg}>
              <Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.rightFace)!.img}.png`)} mode='aspectFill'></Image>
              <View className='pos_info'>
                <View className='top'>右脸颊</View>
                <View className='bottom'>{getStatusData(reportData.shuifenLevel.rightFace)!.title}</View>
                <View className='bottom'></View>
              </View>
            </View>
            <View className='example_box'>
              <Image className='banner_img' src='@/img/fr200/shuifen.png' mode='aspectFill'></Image>
              <View className='line1'></View>
              <View className='line2'></View>
              <View className='line3'></View>
            </View>
            <View className='moisture_level_info'>
              <View className='level_info'>
                <View className='items flex aitems'>
                  <View className='pos_name'>额头</View>
                  <View className='progress'>
                    <View className='progress_width' style={{ width: `${reportData.shuifenLevel.head * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.head)!.progressBg }}></View>
                    {/* style='{width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}}' */}
                  </View>
                  <View className='level'>{reportData.shuifenLevel.head}级</View>
                </View>
                <View className='items flex aitems'>
                  <View className='pos_name'>左脸颊</View>
                  <View className='progress'>
                    <View className='progress_width left_face_progress' style={{ width: `${reportData.shuifenLevel.leftFace * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.leftFace)!.progressBg }}></View>
                  </View>
                  <View className='level'>{reportData.shuifenLevel.leftFace}级</View>
                </View>
                <View className='items flex aitems'>
                  <View className='pos_name'>右脸颊</View>
                  <View className='progress'>
                    <View className='progress_width right_face_progress' style={{ width: `${reportData.shuifenLevel.rightFace * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.rightFace)!.progressBg }}></View>
                  </View>
                  <View className='level'>{reportData.shuifenLevel.rightFace}级</View>
                </View>
              </View>
              <View className='moisture_level'>
                <View className='level_txt flex aitems jcenter'>
                  <View className='circle normal'></View>
                  <View className='txt'>水分等级</View>
                </View>
                <View className='level_list flex'>
                  <View className='items flex aitems'>
                    <View className='circle serious'></View>
                    <View className='txt'>严重缺水：1-2级</View>
                  </View>
                  <View className='items flex aitems'>
                    <View className='circle moderate'></View>
                    <View className='txt'>中度缺水：3-4级</View>
                  </View>
                  <View className='items flex aitems'>
                    <View className='circle slight'></View>
                    <View className='txt'>轻微缺水：5-6级</View>
                  </View>
                  <View className='items flex aitems'>
                    <View className='circle normal'></View>
                    <View className='txt'>水分正常：7-8级</View>
                  </View>
                  <View className='items flex aitems'>
                    <View className='circle sufficient'></View>
                    <View className='txt'>水分充足：9-10级</View>
                  </View>
                </View>
                <View className='pour'>注：各水分等级依据测量得出肌肤含水量划分</View>
              </View>
            </View>
          </View>

          <View className='report_chart'>
            <View className='chart_title common_title'>肌肤整体</View>
            <View className='container'>
              <Echarts></Echarts>
            </View>
          </View>

          <View className='gear_recommend'>
            <View className='gear_header flex aitems sb'>
              <View className='gear_title common_title'>促渗档位推荐</View>
              <View className='gear_btn'>前往护理</View>
            </View>
            <View className='gear_content flex aitems sb'>
              <View className='left_content'>
                <Image className='banner_img' src='@/img/fr200/mian-mo.png' mode='aspectFill'></Image>
                <View className='type'>面膜促渗</View>
              </View>
              <View className='right_content flex aitems'>
                <View className='gear_list flex aitems sa'>
                  <View className='items flex aitems jcenter'>
                    <Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.head)!.gear}.png`)} mode='aspectFill'></Image>
                    <View className='name'>额头</View>
                    <View className='level'>{reportData.shuifenGear.head}档</View>
                  </View>
                  <View className='items flex aitems jcenter'>
                    <Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.leftFace)!.gear}.png`)} mode='aspectFill'></Image>
                    <View className='name'>左脸颊</View>
                    <View className='level'>{reportData.shuifenGear.leftFace}档</View>
                  </View>
                  <View className='items flex aitems jcenter'>
                    <Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.rightFace)!.gear}.png`)} mode='aspectFill'></Image>
                    <View className='name'>右脸颊</View>
                    <View className='level'>{reportData.shuifenGear.rightFace}档</View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>

        <View className='go_clock_in flex sb aitems' >
          <View className='go_clock_btn' onClick={this.toNursing.bind(this)}>继续护理</View>
          <View className='jump_box flex aitems' onClick={this.toIndex}>
            <View className='txt'>主页</View>
            <Image src='@/img/fr200/right.png' mode='aspectFill'></Image>
          </View>
        </View>

      </Block>
    );
  }
}

const mapStateToProps = (state) => ({
  mobile: state.userInfo.mobile,
});
const mapDispatchToProps = (dispatch) => ({
  setMobile(value) {
    dispatch(setMobile(value));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(MoistureTestReport);
