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 { InstrumentInfo } from "../../../utils/Interface";

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

export default class Index extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      reportShow: true,
      name: "护理报告",
      statistics: {},
      recordList: [],
      recordData: {},
      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 data = {};
    if (id != null) {
      data["nursingId"] = id;
    }
    let res = await InstrumentInfo.apiNursingLog.getStatisticsFace(data);

    if (res.data.code === 200) {
      this.setState({ statistics: res.data.data });
    }
  }

  async getRecord(id, instrumentId) {
    console.log("id, nursingLogId", id, instrumentId);
    let data = {};
    if (id != null) {
      data["nursingLogId"] = id;
    }
    // 获取当前
    let res1 = await InstrumentInfo.apiNursingLog.getRecordNow(id);
    // 获取历史记录列表
    let res = await InstrumentInfo.apiNursingLog.getRecordNew(data);
    
    res1.data.data.nursingTime = this.getTime(res1.data.data.nursingTime);
    res1.data.data.createTime = getdates(res1.data.data.createTime).replace(/-/g, ".");

      this.setState({ recordData: res1.data.data });
  
    if (res.data.code === 200) {
      if (instrumentId) {
        res.data.rows.map((item) => {
          item.nursingTime = this.getTime(item.nursingTime);
          item.createTime = getdates(item.createTime).replace(/-/g, ".");
        });
      }

      this.setState({
        recordList: res.data.rows.filter((item) => item.id != instrumentId),
      });
    }
  }
  // 文本框输入文字
  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) {
        res.data.data.map((item, index) => {
          item.isMore = false;
          item.detail = [];
          if (index === 0) {
            item.isMore = true;
            this.getList(item.id, item.year, item.month);
          }
          this.state.monthTime.map((monthItem) => {
            if (monthItem.month == item.month) {
              monthItem.time = item.clockNum;
            }
          });
        });
        this.setState({ monthTime: this.state.monthTime });
      } else {
        let 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 },
        ];
        this.setState({ monthTime });
      }
      this.setState({ clockStatistics: res.data.data });
    }
  }
  // 获取当月打卡记录
  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);
    this.getRecord(id, recordId);
    let res1 = await InstrumentInfo.apiClock.getLatestClockRecord();
    punchInInfo.clockContent =res1.data.data.clockContent
    punchInInfo.clockImageList =res1.data.data.clockImg
   
    
    this.setState({ punchInInfo });
    // 获取图片和文本
    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(options) {
    console.log(options, "查看传过来的参数");
 
    let Bool = JSON.parse(options?.report);
    if (!Bool) {
      this.setState({
        reportShow: Bool,
      });
    }

    this.getRouteId();
    this.getClockStatistics();
  }

  componentDidShow() {}

  componentDidHide() {}

  async initData() {}

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

  render() {
    let {
      name,
      statistics,
      recordList,
      recordData,
      show,
      clockStatistics,
      punchInInfo,
      monthTime,
      reportShow,
    } = 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>
        {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>
    );
  }
}
