import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Component, PropsWithChildren, useEffect, useState } from "react";
import { Progress } from '@antmjs/vantui'

import { Block, View, Text, Image, Input, Button } 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'

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

export default class Index extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "template模板页",
      statistics: {},
      recordList: [],
      recordData: {}
    };
  }

  componentDidMount() { }

  componentWillUnmount() { }

  // 查询用户护理记录的当月统计信息
  async getStatistics(id) {
    let data = {}
    if (id != null) {
      data['instrumentId'] = id
    }
    let res = await InstrumentInfo.apiNursingLog.getStatistics(data)
    if (res.data.code === 200) {
      this.setState({ statistics: res.data.data })
    }
  }

  async getRecord(id, recordId) {
    let data = {}
    if (id != null) {
      data['instrumentId'] = id
    }
    let res = await InstrumentInfo.apiNursingLog.getRecord(data)
    if (res.data.code === 200) {
      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 })
        }
      })
      this.setState({ recordList: res.data.rows.filter(item => item.id != recordId) })

    }
  }

  getRouteId() {
    const searchParams = new URLSearchParams(window.location.search);
    const id = searchParams.get('id');
    const recordId = searchParams.get('recordId');
    this.getStatistics(id)
    this.getRecord(id, recordId)
    console.log(recordId);


  }
  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 + '秒'
    }
  }
  async onLoad() {
    this.getRouteId()
  }

  componentDidShow() { }

  componentDidHide() { }

  async initData() { }

  render() {
    let { name, statistics, recordList, recordData } = this.state;
    return (
      <Block>
        <Navbar isBack titleSlot='护理报告'></Navbar>
        {/* <View className="time m-x-30">{{reportData.curDate}}</View> */}
        {/* <View className="time m-x-30"></View> */}
        <View className='statistic m-x-30 flex aitems'>
          {/* <block wx:if="{{ reportData.instrument_type !== 5 && reportData.instrument_type !== 4 }}"> */}
          <View className='statistic_item'>
            <View className='statistic_title'>
              <text>3</text>
              <text className='num'>天</text>
            </View>
            {/* <View wx:if="{{ reportData.instrument_id == 74 || reportData.instrument_id == 73  }}" className="statistic_desc">
                本月护理天数
            </View> */}
            <View className='statistic_desc'>
              本月护理天数
            </View>
            {/* <View className="statistic_desc">{{options.type == 'led' ? '本月光照天数': '本月促渗天数'}}</View> */}
            <View className='statistic_desc'>本月光照天数</View>

          </View>
          <View className='statistic_item'>
            <View className='statistic_title'>28:00</View>
            {/* <View className="statistic_desc">{{options.type == 'led' ? '本月护理时间': '本月促渗时间'}}</View> */}
            <View className='statistic_desc'>本月护理时间</View>
          </View>
          {/* </block> */}
          {/* <block wx:if="{{ reportData.instrument_type == 4 || reportData.instrument_type == 5 }}"> */}
          <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>
          {/* </block> */}
        </View>
        <View className='main m-x-30'>
          {/* <block wx:if="{{ reportData.instrument_type !== 4 && reportData.instrument_type !== 5 }}"> */}
          <View className='products_item' style='border: none'>
            <View className='products_top flex aitems'>
              <View className='add_time'>{recordData.createTime}</View>
              <View className={classnames("tag", {
                tag_active: recordData.online === 2,
              })}
              >{recordData.online == 1 ? '在线' : '离线'}</View>
            </View>
            <View className='products_middle flex'>
              <Image className='cover' src={recordData.modeImage} mode='aspectFill'></Image>
              <View className='content'>
                <View className='content_top'>
                  <View className='title'>{recordData.instrumentName}</View>
                  <View className='desc_box'>
                    <View className='desc'>模式：{recordData.modeName}</View>
                    <View className='desc'>护理时间：{recordData.nursingTime}</View>
                  </View>
                </View>
                <View className='progress'>
                  完成度：
                  <Progress percentage={recordData.completionPercentage * 100} strokeWidth='12' color='linearGradient(to right, #eecda1, #ffe9c7) !important' />
                  <View className='percent'> {recordData.completionPercentage * 100}%</View>
                </View>
              </View>
            </View>
          </View>
          <View className='main_title' >历史记录</View>
          {recordList.map(item => (
            <View className='products_item' style='border: none' key={item.id}>
              <View className='products_top flex aitems'>
                <View className='add_time'>{item.createTime}</View>
                <View className={classnames("tag", {
                  tag_active: item.online === 2,
                })}
                >{item.online == 1 ? '在线' : '离线'}</View>
              </View>
              <View className='products_middle flex'>
                <Image className='cover' src={item.modeImage} mode='aspectFill'></Image>
                <View className='content'>
                  <View className='content_top'>
                    <View className='title'>{item.instrumentName}</View>
                    <View className='desc_box'>
                      <View className='desc'>模式：{item.modeName}</View>
                      <View className='desc'>护理时间：{item.nursingTime}</View>
                    </View>
                  </View>
                  <View className='progress'>
                    完成度：
                    <Progress percentage={item.completionPercentage * 100} strokeWidth='12' color='linearGradient(to right, #eecda1, #ffe9c7) !important' />
                    <View className='percent'> {item.completionPercentage * 100}%</View>
                  </View>
                </View>
              </View>
            </View>
          ))}

          {/* </block> */}
          {/* <block wx:if="{{ reportData.instrument_type == 4 || reportData.instrument_type == 5 }}"> */}
          {/* <View className='products_item' style='border: none'>
            <View className='products_top flex aitems'>
              <View className='add_time'>2024.01.01</View>
              <View className="{{reportData.online === 2 ? 'tag tag_active' : 'tag'}}">在线</View>
            </View>
            <View className='products_middle flex'>
              <Image className='cover' src={require('../../img/test/1706667011027.jpg')} mode='aspectFill'></Image>
              <View className='content'>
                <View className='content_top'>
                  <View className='title'>光能厂美侧板</View>
                  <View className='desc_box'>
                    <View className='desc'>模式：维护修复</View>
                    <View className='desc'>护理时间：10:00</View>
                  </View>
                </View>
                <View className='progress'>
                  完成度：
                  <Progress percentage='80' strokeWidth='12' pivotText='' color='linearGradient(to right, #eecda1, #ffe9c7) !important' />
                  <View className='percent'> 80%</View>
                </View>
              </View>

            </View>
          </View> */}
          {/* <View className='main_title' >历史记录</View>
          <View className='products_item' >
            <View className='products_top flex aitems'>
              <View className='add_time'>2024.01.01</View>
              <View className="{{item.online === 2 ? 'tag tag_active' : 'tag'}}">在线</View>
            </View>
            <View className='products_middle flex'>
              <Image className='cover' src={require('../../img/test/1706667011027.jpg')} mode='aspectFill'></Image>
              <View className='content'>
                <View className='content_top'>
                  <View className='title'>光能厂美侧板</View>
                  <View className='desc_box'>
                    <View className='desc'>模式：维护修复</View>
                    <View className='desc'>护理时间：10:00</View>
                  </View>
                </View>
                <View className='progress'>
                  完成度：
                  <Progress percentage='80' strokeWidth='12' pivotText='' color='linearGradient(to right, #eecda1, #ffe9c7) !important' />
                  <View className='percent'> 80%</View>
                </View>
              </View>
            </View>
          </View> */}
          {/* </block> */}
        </View>

        <View className='footer flex aitems' >
          <View className='btn'>前往打卡</View>
          <View className='text flex aitems'>
            <View>跳过</View>
            <Image src='../../img/right.png' mode='aspectFill'></Image>
          </View>
        </View>

        {/* <clockInDialog id="clockInDialog" instrumentId="{{reportData.instrument_id}}"  isCustom="{{ true }}" bind:submitFun="confirmSubmit"/> */}

      </Block>
    );
  }
}
