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) {
    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),
      });
    }
  }

  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() {}

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

  render() {
    let { name, statistics, recordList, recordData } = 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>
          {/* </block> */}
        </View>
        <View className="main m-x-30">
          <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 > 100
                        ? 100
                        : recordData.completionPercentage * 100
                    }
                    strokeWidth="12"
                    color="linearGradient(to right, #eecda1, #ffe9c7) !important"
                  />
                  <View className="percent">
                    {" "}
                    {recordData.completionPercentage * 100 > 100
                      ? 100
                      : 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 > 100
                          ? 100
                          : item.completionPercentage * 100
                      }
                      strokeWidth="12"
                      color="linearGradient(to right, #eecda1, #ffe9c7) !important"
                    />
                    <View className="percent">
                      {" "}
                      {item.completionPercentage * 100 > 100
                        ? 100
                        : item.completionPercentage * 100}
                      %
                    </View>
                  </View>
                </View>
              </View>
            </View>
          ))}
        </View>

        <View className="footer flex aitems">
          <View className="btn">前往打卡</View>
          <View className="text flex aitems">
            <View onClick={this.GoIndex}>跳过</View>
            <Image
              src={require("../../img/right.png")}
              mode="aspectFill"
            ></Image>
          </View>
        </View>
      </Block>
    );
  }
}