import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Component, PropsWithChildren, useEffect, useState } from "react";
import { Progress , Tab, Tabs, Dialog, Popup } from "@antmjs/vantui";
import { showModal } from "@/utils/traoAPI";

import {
  Block, View, Text, Image, Input, Button, Textarea,
} from "@tarojs/components";
import { date, getdates, previewImage } from "@/utils/util";

/** 自定义组件 **/
import Navbar from "@/components/navbar/navbar";
import PopupAlert from "@/components/popup/popup-alert";
import { InstrumentInfo } from "@/utils/Interface";

// 引入ecahrts图表
// import EchartsForm from '@/moduleIOT/pages/iotCarePlan/components/Echart_face'
import EchartsForm from '../../../moduleIOT/pages/iotCarePlan/components/Echart_face'


/** 自定义组件 **/
import "./face_report_one.less";

export default class Index extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      EchartsData:{},
      reportShow: true,
      name: "template模板页",
      statistics: {},
      recordList: [],
      modeImage: require("@/img/face-report/face.png"),
      recordData: {
        modeName: '基础班脸部',
        filtered:111,
        faceEnergy:222,
        average:2222,
        max:33,
        min:7
      },
      year: new Date().getFullYear(),
      show: false,
      clockStatistics: [],
      punchInInfo: {
        clockImageList: [],
        clockContent: "",
      },
      monthTime: [
        { month: 1, time: 0 },
        { month: 2, time: 0 },
        { month: 3, time: 0 },
        { month: 4, time: 0 },
        { month: 5, time: 0 },
        { month: 6, time: 0 },
        { month: 7, time: 0 },
        { month: 8, time: 0 },
        { month: 9, time: 0 },
        { month: 10, time: 0 },
        { month: 11, time: 0 },
        { month: 12, time: 0 },
      ],
    };
  }

  componentDidMount() { }

  componentWillUnmount() { }

  // 打开/关闭弹窗
  setShow(show: boolean) {
    this.setState({ show });
  }
  // 查询用户护理记录的当月统计信息
  async getStatistics(id) {
   
    let ids = Number(id)
    let data = {};
    if (ids != null) {
      data["nursingId"] = ids;
    }
    let res = await InstrumentInfo.apiNursingLog.getStatisticsFace(data);
    
    if (res.data.code === 200) {
      this.setState({ statistics: res.data.data });
    }
  }

  async getRecord(id, recordId) {
    console.log("id, recordId", id, recordId);
    let data = {};
    if (id != null) {
      data["instrumentId"] = id;
    }
    let res = await InstrumentInfo.apiNursingLog.getRecord(data);
    if (res.data.code === 200) {
      if (recordId) {
        res.data.rows.map((item) => {
          item.nursingTime = this.getTime(item.nursingTime);
          item.createTime = getdates(item.createTime).replace(/-/g, ".");

          if (item.id == recordId) {
            this.setState({ recordData: item });
          }
        });
      } else {
        this.setState({ recordData: res.data.rows[0] });
      }

      this.setState({
        recordList: res.data.rows.filter((item) => item.id != recordId),
      });
    }
  }
  // 文本框输入文字
  handleTextareaInput = (e) => {
    const punchInInfo = this.state.punchInInfo;
    this.setState({ punchInInfo: { ...punchInInfo, clockContent: e.detail.value } });
  };
  async submit() {
    let punchInInfo = this.state.punchInInfo || {};
    if (!punchInInfo.clockImageList.length) {
      Taro.showToast({
        title: "请上传图片",
        icon: "none",
      });
      return;
    }
    if (!punchInInfo.clockContent) {
      Taro.showToast({
        title: "请输入打卡心得",
        icon: "none",
      });
      return;
    }
    InstrumentInfo.apiClock.postInsertClockLog(punchInInfo).then((res) => {
      showModal({
        t2: "您已完成今日打卡",
        btn1show: false,
      }).then(() => {
        let data = new Date
        Taro.setStorageSync('DayTime', data.toISOString())
        this.setState({
          clockShow: true
        })
        this.getClockStatistics();
        this.setShow(false);

      });
    });
  }
  /**分页获取用户的打卡记录 page size*/
  async getClockStatistics(year = this.state.year) {
    let res = await InstrumentInfo.apiClock.getClockStatistics({ year });
    console.log(res, '查看返回', year);

    if (res.data.code === 200) {

      res.data.data.reverse();
      if (res.data.data.length > 0) {
       let clockStatistics = this.state.clockStatistics
       clockStatistics=res.data.data
       
        
        this.setState({ clockStatistics });
      } 
      
    }
  }
  // 获取当月打卡记录
  async getList(id, year, month) {
    let data = {
      year,
      month,
    };
    let res = await InstrumentInfo.apiClock.getList(data);
    if (res.data.code === 200) {
   
      this.state.clockStatistics.map((item) => {
       
        if (item.id === id) {
          item.detail = res.data.data;
          item.detail.map((obj) => {
            obj.updateTime = getdates(obj.updateTime).replace(/-/g, ".");
          });
        }
      });
      this.setState({ clockStatistics: this.state.clockStatistics });
    }
  }
  // 上传图片
  handleChooseImage() {
    Taro.chooseMedia({
      count: 1,
      mediaType: ["image"],
      sourceType: ["album", "camera"],
      success: (res) => {
        const tempFilePaths = res.tempFiles.map((item) => item.tempFilePath);
        tempFilePaths?.forEach((item) => {
          // eslint-disable-next-line @typescript-eslint/no-shadow
          InstrumentInfo.apiClock
            .clockFileUpload({ clockImg: item })
            .then((res) => {
              const currentImage = res.data.url;
              const newImageList =
                this.state.punchInInfo.clockImageList.length >= 3
                  ? this.state.punchInInfo.clockImageList
                  : [...this.state.punchInInfo.clockImageList, currentImage];
              const punchInInfo = this.state.punchInInfo;
              punchInInfo.clockImageList = newImageList;
              this.setState({ punchInInfo });
            });
        });
      },
      fail: (err) => {
        console.info("err", err);
      },
    });
  }
  // 删除打卡图片
  delImg(i) {
    const punchInInfo = this.state.punchInInfo;
    punchInInfo.clockImageList.splice(i, 1);
    this.setState({ punchInInfo });
  }
  async getRouteId() {
    let punchInInfo =this.state.punchInInfo
    const searchParams = new URLSearchParams(window.location.search);
    const id = searchParams.get("id");
    const recordId = searchParams.get("recordId");
    this.getStatistics(id);
    let res1 = await InstrumentInfo.apiClock.getLatestClockRecord();
    punchInInfo.clockContent =res1.data.data.clockContent
    punchInInfo.clockImageList =res1.data.data.clockImg
   
    
    this.setState({ punchInInfo });
    
setTimeout(function() {
 
}, )
   
    
  }
  getTime(time) {
    const hour = time.slice(0, 2);
    const minute = time.slice(3, 5);
    const second = time.slice(6, 8);

    if (hour > 0) {
      return hour + "时" + minute + "分" + second + "秒";
    } else {
      return minute + "分" + second + "秒";
    }
  }
   onLoad(options) {
    
    let Bool = JSON.parse(options?.report)
    if (!Bool) {
      this.setState({
        reportShow: Bool
      })
    }
    this.init(options)
    this.getRouteId();
    this.getClockStatistics()
  }
  init(options){

    let obj =JSON.parse(options.obj)

    let recordData =this.state.recordData
    let modeImage =this.state.modeImage
    
    switch(obj.modeName) {
      case '基础班脸部':
        modeImage =require("@/img/face-report/face.png")
          break;
      case '基础版眼部':
        modeImage =require("@/img/face-report/eye.png")
          break;
          case '法令纹Pro':
        modeImage =require("@/img/face-report/nasolabial_Pro.png")
          break;
          case '下颌线Pro':
        modeImage =require("@/img/face-report/Mandibular_Pro.png")
          break;
          case '抬头纹Pro':
        modeImage =require("@/img/face-report/Head_lift_Pro.png")
          break;
      default:
           
    } 
     recordData ={
      ...obj,
      ...obj.data
    }
    this.setState({recordData,modeImage,EchartsData:{...obj}})
  }
  componentDidShow() { }

  componentDidHide() { }

  async initData() { }

  GoIndex = () => {
    Taro.switchTab({ url: "/pages/index/index" });
  };

  render() {
    let { name, statistics, modeImage, recordData, show, clockStatistics, punchInInfo, monthTime, reportShow,EchartsData } = this.state;
    return (
      <Block>
        <Navbar isBack titleSlot='护理报告'></Navbar>
        <View className='statistic m-x-30 flex aitems'>
          <View className='statistic_item'>
            <View className='statistic_title'>
              <text>{statistics.nursingNum}</text>
              <text className='num'>天</text>
            </View>
            <View className='statistic_desc'>本月护理天数</View>
          </View>
          <View className='statistic_item'>
            <View className='statistic_title'>{statistics.nursingTime}</View>
            <View className='statistic_desc'>本月护理时间</View>
          </View>
        
        </View>
        <View className='main m-x-30'>
          <View className='products_item' style='border: none'>
            <View className='products_middle flex'>
              <View className='left'>
                <Image
                  className='cover'
                  src={modeImage}
                  mode='aspectFill'
                ></Image>
                <View className='face_type'>{recordData.modeName}</View>
              </View>
              <View className='content'>
                <View className='content_top'>

                  <View className='desc_box'>
                    <View className='desc'>能量发数{recordData.modeName === '下颌线Pro'?<View className="itemStyel">[1]</View>:null}&nbsp;&nbsp;：{recordData.filtered}发</View>
                    <View className='desc'>
                      脸部能量{recordData.modeName === '下颌线Pro'?<View className="itemStyel">[2]</View>:null}&nbsp;&nbsp;：≈{recordData.faceEnergy}焦耳
                    </View>
                    <View className='desc'>
                      平均能量等级&nbsp;&nbsp;<View className="itemStyelone">[3]</View>：{recordData.average}
                    </View>
                    <View className='desc'>
                      最大等级&nbsp;&nbsp;<View className="itemStyel">[4]</View>：{recordData.max}级 最小等级&nbsp;&nbsp;<View className="itemStyeltwo">[5]</View>：{recordData.min}级
                    </View>
                  </View>
                </View>

              </View>
            </View>
          </View>
          <View className='main_title'>能量等级图谱-{recordData.modeName}</View>
          <View className='eacharts'>
          <EchartsForm EchartsData={EchartsData}></EchartsForm>
        
          </View>

        </View>
        <View className='bottom-title'>
          <View className='text-title'>[1] 能量发数:指小程序每秒以1发能量呈现,当次使用仪器所呈现的能量总数量。“1发”指仪器1秒内仪器持续输出的平均能量。
          </View>
          <View className='text-title'>[2]能量总值: 指单次使用时长、仪器每秒输出的实际能量综合计算的能量总值</View>
          <View className='text-title'>[3]平均能量等级:指单次使用时长，根据花至精准能量算法根据不同皮肤所输出的平均能量等级。<br /></View>
          <View className='text-title'>[4]最大能量:指根据花至精准能量算法根据不同皮肤所输出的能量最高等级<br /></View>
          <View className='text-title'>
            [5]最小能量:指根据花至精准能量算法根据不同皮肤所输出的能量最低等级。</View>
        </View>

        {reportShow ? (
          <View className='footer flex aitems'>
            <View className='btn' onClick={this.setShow.bind(this, true)}>前往打卡</View>
            <View className='text flex aitems'>
              <View onClick={this.GoIndex}>跳过</View>
              <Image
                src={require("@/img/right.png")}
                mode='aspectFill'
              ></Image>
            </View>
          </View>
        ) : null}
        <Popup show={show} onClose={() => this.setState({ show: false })}>
          <View className='popBox'>
            <Image
              className='close_icon'
              src={require("@/img/close.png")}
              mode='widthFix'
              onClick={this.setShow.bind(this, false)}
            ></Image>
            <View className='popTitle'>今日打卡</View>
            <View className='popSubtitle'>
              本月您已打卡
              <View className='bold'>{clockStatistics[0]?.clockNum}</View>{" "}
              天，超越
              <View className='bold'>
                {(clockStatistics[0]?.percentage * 100).toFixed(1)}%
              </View>
              花至用户
            </View>
            <View className='img_box'>
              {punchInInfo.clockImageList.map((item, index) => (
                <View key={item} className='img'>
                  <Image className='showImg' src={item} mode='widthFix'></Image>
                  <Image
                    className='closeImg'
                    src={require("@/img/close1.png")}
                    mode='widthFix'
                    onClick={this.delImg.bind(this, index)}
                  ></Image>
                </View>
              ))}
              {punchInInfo.clockImageList.length < 3 && (
                <View
                  className='addBox'
                  onClick={this.handleChooseImage.bind(this)}
                >
                  <Image
                    className='showImg'
                    src={require("@/img/clock_in_upload/add-image.png")}
                    mode='widthFix'
                  ></Image>
                </View>
              )}
            </View>
            <View className='info4'>
              <View className='content'>
                <Textarea
                  placeholderStyle='color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;'
                  placeholder='请记录一下今天的护理心得吧'
                  maxlength={120}
                  onInput={this.handleTextareaInput.bind(this)}
                  value={punchInInfo.clockContent}
                ></Textarea>
              </View>
              <View className='tip'>
                {"（" + (punchInInfo.clockContent.length || 0) + "/120）"}
              </View>
            </View>
            <View className='popbtnbox flex aitems jcenter'>
              <View className='btn1' onClick={this.submit.bind(this)}>
                确认提交
              </View>
            </View>
          </View>
        </Popup>
      </Block>
    );
  }
}
