import Taro, { setStorageSync } from "@tarojs/taro";
import classnames from "classnames";
import { Component, PropsWithChildren, useEffect, useState } from "react";

import {
  Block,
  View,
  Text,
  Image,
  Input,
  Button,
  ScrollView,
  Picker,
  Textarea,
} from "@tarojs/components";
import { go } from "@/utils/traoAPI";
import { Tab, Tabs, Dialog, Popup } from "@antmjs/vantui";

/** 自定义组件 **/
import Navbar from "@/components/navbar/navbar";
import PopupClock from "@/components/popup/popup-clock";
/** 自定义组件 **/
import { InstrumentInfo } from "@/utils/Interface";
import { date, getdates, previewImage } from "@/utils/util";
import { showModal } from "@/utils/traoAPI.js";

import "./recording.less";

export default class Recording extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "护理历程",
      current: 0,
      ViewAddInstrument: false, //用来记录有没有添加设备
      array: [1, 2, 3, 4, 5],
      recordList: [],
      bindingInstrumentList: [],
      clockShow: false,
      curIndex: null,
      clockStatistics: [],
      statistics: [],
      year: new Date().getFullYear(),
      today: new Date(),
      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 },
      ],
      show: false,
      punchInInfo: {
        clockImageList: [],
        clockContent: "",
      },
      navigationBarHeight: "",
      statusBarHeight: "",
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}
  // 格式化时间
  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 getBindingInstrumentList() {
    let res = await InstrumentInfo.bindingInstrumentList();
    if (res.data.code === 200) {
      this.setState({ bindingInstrumentList: res.data.data });
    }
  }
  // 获取护理历程
  async getRecord(id) {
    let data = {};
    if (id != null) {
      data["instrumentId"] = id;
    }
    let res = await InstrumentInfo.apiNursingLog.getRecord(data);
    console.log(res, "查看你获取护理历程");

    if (res.data.code === 200) {
      res.data.rows.map((item) => {
        item.nursingTime = this.getTime(item.nursingTime);
        let createTime = getdates(item.createTime);

        item.createTime = createTime && createTime.replace(/-/g, ".");
      });
      this.setState({ recordList: res.data.rows });
    }
  }
  // 查询用户当天最新的一条打卡记录
  async getLatestClockRecord() {
    let res = await InstrumentInfo.apiClock.getLatestClockRecord();
    if (res.data.code === 200) {
      if (!res.data.data) {
        // this.setShow(true);
      } else {
        let punchInInfo = {
          clockImageList: res.data.data.clockImg,
          clockContent: res.data.data.clockContent,
        };
        this.setState({ punchInInfo });
      }
    }
  }
  // 添加打卡记录（测试用）
  async addLog() {
    let data = {
      instrumentId: 57,
      instrumentName: "0130验收FR100",
      online: 1,
      modeId: 100,
      modeName: "护理记录测试",
      nursingTime: "00:15:00",
    };

    let res = await InstrumentInfo.apiNursingLog.addLog(data);
    if (res.data.code === 200) {
    }
  }

  /**分页获取用户的打卡记录 page size*/
  async getClockStatistics(year = this.state.year) {
    let res = await InstrumentInfo.apiClock.getClockStatistics({ 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 });
    }
  }
  // 文本框输入文字
  handleTextareaInput = (e) => {
    const punchInInfo = this.state.punchInInfo;
    this.setState({
      punchInInfo: { ...punchInInfo, clockContent: e.detail.value },
    });
  };
  // 打开/关闭弹窗
  setShow(show: boolean) {
    this.setState({ show });
  }
  //  选择仪器
  onChangeProduct(id) {
    this.setState({ curIndex: id });
    this.getRecord(id);
    // this.addLog();
  }
  // 展开收起
  onChangeMore(id, year, month) {
    this.state.clockStatistics.map((item) => {
      if (item.id === id) {
        item.isMore = !item.isMore;
        if (item.isMore && item.detail.length === 0) {
          this.getList(id, year, month);
        }
      }
    });
    this.setState({ clockStatistics: this.state.clockStatistics });
  }

  // 获取当月打卡记录
  async getList(id, year, month) {
    let data = {
      year,
      month,
    };
    let res = await InstrumentInfo.apiClock.getList(data);
    if (res.data.code === 200) {
      console.log(res, 88888, this.state.clockStatistics, id);

      this.state.clockStatistics.map((item) => {
        if (item.id === id) {
          item.detail = res.data.data;
          item.detail.map((obj) => {
            let updateTime = obj.updateTime
              ? getdates(obj.updateTime)
              : getdates(obj.createTime);

            obj.updateTime = updateTime && updateTime.replace(/-/g, ".");
          });
        }
      });
      this.setState({ clockStatistics: this.state.clockStatistics });
    }
  }
  async DayTime() {
    let storedData = Taro.getStorageSync("DayTime");
    const day = new Date();
    if (storedData === undefined || storedData === "") {
      this.setState({
        clockShow: false,
      });
    } else {
      const storedDate = new Date(storedData);
      const currentDate = new Date(day.toISOString());

      const isSameDate =
        storedDate.toDateString() === currentDate.toDateString();
      if (isSameDate) {
        this.setState({
          clockShow: true,
        });
      } else {
        this.setState({
          clockShow: false,
        });
      }
    }
  }
  async onLoad(options) {
    const ViewAddInstrument = options.param;
    this.setState({
      ViewAddInstrument: ViewAddInstrument,
    });

    this.getRecord(null);
    this.getBindingInstrumentList();
    this.getLatestClockRecord();
    this.getClockStatistics();
    this.DayTime();
    this.setStatusBar();
  }

  componentDidShow() {}

  componentDidHide() {}

  async initData() {}
  // 选择年份
  onChangeYear(event) {
    this.setState({ year: event.detail.value });
    this.getClockStatistics(event.detail.value);
  }
  //  点击tab栏
  onTab = async (event) => {
    const { current } = event.currentTarget.dataset;
    this.setState({ current });
    if (current === 1) {
      this.getClockStatistics();
    }
  };
  //  跳转到护理报告
  toReport(id, recordId, item) {
    this.state.bindingInstrumentList.map((instrument) => {
      if (instrument.id == id) {
        setStorageSync("instrument_detail", instrument);
      }
    });
    console.log(item, "查看");

    if ([1, 2, 3, 4, 5].includes(item.jumpType)) {
      this.One(item);
    } else if (item.jumpType === 0) {
      this.two(item);
    } else if (item.jumpType === 6) {
      this.three(item);
    } else {
      this.AllDevice(item);
    }

    // let report =false
    // go("/recording/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report );
  }
  // 打开第一种类型
  One = async (item) => {
    let ids = Number(item.id);
    // 获取echarts数据 这个是获取接口更新echarts页面
    let res2 = await InstrumentInfo.apiNursingLog.getStatiCDE(ids);
    let nursingData = JSON.parse(res2.data.data.nursingData);
    let obj = {
      modeName: res2.data.data.modeName,
      data: nursingData,
    };
    let report = false;

    go(
      "/recoding/pages/face_report_one/face_report_one?id=" +
        item.id +
        "&report=" +
        report +
        "&obj=" +
        JSON.stringify(obj)
    );
  };
  // 打开第二种类型
  two = async (item) => {
    console.log("打开第二种类型", item);
    let report = false;
    go(
      "/recoding/pages/face_report/face_report?id=" +
        item.id +
        "&recordId=" +
        item.instrumentId +
        "&report=" +
        report
    );
  };
  // 打开第三种类型
  three = async (item) => {
    this.moistureTest(item);
  };

  async moistureTest(allData) {
    let data = {
      queryDate: allData.createTime,
      instrumentId: allData.instrumentId,
    };
    let res = await InstrumentInfo.fr200.moistureTest(data);
    let echartsData = res.data.rows;
    for (let i = 0; i < echartsData.length; i++) {
      for (let j = i + 1; j < echartsData.length; j++) {
        if (
          echartsData[i].createTime.split(" ")[0] ==
          echartsData[j].createTime.split(" ")[0]
        ) {
          let result =
            Date.parse(echartsData[i].createTime) -
            Date.parse(echartsData[j].createTime);
          if (result < 0) {
            echartsData.splice(i, 1);
          } else {
            echartsData.splice(j, 1);
          }
        }
      }
    }
    let gears: any = [];
    let eDate: any = [];
    echartsData.map((item) => {
      const result = item.createTime.split(" ")[0].substring(5);
      eDate.push(result);
      item.nursingData = JSON.parse(item.nursingData);
      let level: any = 0;
      item.nursingData?.GearData?.map((gear) => {
        level = level + gear.forehead;
      });
      level = Math.floor(level / 3);
      gears.push(level);
    });
    echartsData = {
      gears, eDate
    }
    setStorageSync('moistureEachtsData', JSON.stringify(echartsData))
    let report =false
    go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${allData.nursingData}&date=${allData.createTime}&modeId=${allData.modeId}&id=${allData.instrumentId}&echartsData=${JSON.stringify(echartsData)}&report=${report }`);

   
  }

  // 打开其他类型
  AllDevice = async (item) => {
    console.log("打开其他类型", item);
    go("/pages/face_report_AllDevice/face_report_AllDevice");
  };
  // 上传图片
  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 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);
      });
    });
  }
  back() {
    Taro.navigateBack({
      delta: 1,
    });
  }

  setStatusBar() {
    Taro.getSystemInfoAsync({
      success: (res) => {
        const statusBarHeight = res.statusBarHeight || 0;
        // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
        const custom = Taro.getMenuButtonBoundingClientRect();
        // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
        const navigationBarHeight =
          custom.height + (custom.top - statusBarHeight) * 2;
        this.setState({
          statusBarHeight,
          navigationBarHeight,
        });
      },
    });
  }

  render() {
    let {
      current,
      array,
      name,
      recordList,
      ViewAddInstrument,
      bindingInstrumentList,
      clockShow,
      curIndex,
      clockStatistics,
      statistics,
      year,
      today,
      monthTime,
      show,
      punchInInfo,
      navigationBarHeight,
      statusBarHeight,
    } = this.state;
    const statusBarHeightRpx = statusBarHeight * 2;
    const navigationBarHeightRpx = navigationBarHeight * 2;
    const height = statusBarHeightRpx + navigationBarHeightRpx;
    return (
      <Block>
        <Navbar isBack titleSlot="护理记录"></Navbar>
        <View
          className="tabs"
          style={{
            top: height + "rpx",
            position: "sticky",
          }}
        >
          <View
            className={classnames("tab", {
              tab_active: current === 0,
            })}
            data-current={0}
            onClick={this.onTab}
          >
            护理历程
          </View>
          <View
            className={classnames("tab", {
              tab_active: current === 1,
            })}
            data-current={1}
            onClick={this.onTab}
          >
            打卡统计
          </View>
        </View>
        {current === 0 && (
          <ScrollView
            className="products_list"
            scroll-x="true"
            style={{
              top: height + 110 + "rpx",
              position: "sticky",
            }}
          >
            <View
              className={classnames("all", {
                products_item_active: !curIndex,
              })}
              onClick={this.onChangeProduct.bind(this, null)}
            >
              全部
            </View>
            {bindingInstrumentList.map((item: any, index: any) => (
              <View
                key={item.id}
                className={classnames("products_item", {
                  products_item_active: curIndex === item.id,
                })}
                onClick={this.onChangeProduct.bind(this, item.id)}
              >
                <Image
                  className="products_cover"
                  src={item.logo}
                  mode="aspectFill"
                ></Image>
                <View className="products_title">{item.name}</View>
              </View>
            ))}
          </ScrollView>
        )}

        {current === 0 && recordList.length === 0 && (
          <View>
            <View className="nodata">
              <Image
                className="nodata_img"
                src={require("@/img/nodata.png")}
              ></Image>
              <View className="nodata_text">暂无数据</View>
            </View>
          </View>
        )}
        {current === 0 && (
          <View style="padding-bottom:200px">
            {/* <View className='instrument_item' >
              <View className='instrument_top flex sb aitems'>
                <View className='time_box flex aitems'>
                  <View className='time'>2024.1.23</View>
                  <View className={classnames("tag", {
                    tag_active: current === 1,
                  })}
                  > 在线</View>
                </View>
                <View  className='report_btn flex'>
                  <View>回看报告</View>
                  <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
                </View>
              </View>
              <View className='instrument_middle flex'>
                <Image className='instrument_cover' src={require("../../img/test/1706667011027.jpg")}></Image>
                <View className='instrument_content'>
                  <View className='instrument_title'>小子弹智能射频仪</View>
                  <View className='instrument_desc_box flex fc sb'>
                    <View className='instrument_desc'>模式：基础场景版</View>
                    <View className='instrument_desc'>护理时间：15分00秒</View>
                  </View>
                </View>
              </View>
            </View> */}

            <View className="instrument_list ">
              {recordList.map((item: any, index: any) => (
                <View className="recording-box" key={item.id}>
                  <View className="box-top">
                    <View className="top-left">
                      <View className="date">{item.createTime}</View>
                      <View
                        className={classnames("tip", {
                          tag_active: item.online === 2,
                        })}
                      >
                        {item.online === 1 ? "在线" : "离线"}
                      </View>
                    </View>
                    {item.instrumentType === 2 && (
                      <View
                        className="top-right"
                        onClick={this.toReport.bind(
                          this,
                          item.instrumentId,
                          item.id,
                          item
                        )}
                      >
                        回看报告
                        <Image
                          className="arrow_icon"
                          src={require("@/img/index/right.png")}
                          mode="aspectFill"
                        ></Image>
                      </View>
                    )}
                  </View>
                  <View className="box-bottom">
                    <Image
                      className="recording_img"
                      src={item.modeImage}
                    ></Image>
                    <View className="bottom-right">
                      <View className="title">{item.instrumentName}</View>
                      <View className="subtitle-box">
                        <View className="subtitle">模式：{item.modeName}</View>
                        <View className="subtitle">
                          {item.instrumentType === 2 && (
                            <Text>护理时间：{item.nursingTime}</Text>
                          )}
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              ))}
            </View>
          </View>
        )}
        {current === 1 && (
          <View style="padding-bottom:200px">
            {/* <View className='nodata'>
              <Image
                className='nodata_img'
                src={require("../../img/nodata.png")}
              ></Image>
              <View className='nodata_text'>暂无数据</View>
            </View> */}
            <View style="height: 30rpx; background: #F8F8F8"></View>
            <View className="clock_in_statistics m-x-30 flex sb">
              <View className="flex sb ab">
                <View className="clock_in_statistics_title">年度打卡统计</View>
                <Picker
                  mode="date"
                  fields="year"
                  onChange={this.onChangeYear.bind(this)}
                  value="{{year}}"
                  end="{{today}}"
                >
                  <View className="clock_in_statistics_date flex aitems">
                    <View>{year}年</View>
                    <Image
                      className="more_icon"
                      src={require("@/img/arrow-down.png")}
                      mode="widthFix"
                    ></Image>
                  </View>
                </Picker>
              </View>
              <View className="chart flex sb">
                {monthTime.map((item) => (
                  <View className="flex fc aitems" key={item.month}>
                    {item.time > 0 && (
                      <View className="buoy">{item.time}天</View>
                    )}
                    <View
                      className="column"
                      style={{ height: `calc(186/31*${item.time}rpx)` }}
                    ></View>
                    <View className="month">{item.month}</View>
                  </View>
                ))}
              </View>
            </View>
            <View style="padding-bottom: env(safe-area-inset-bottom)">
              <View className="month_box m-x-30">
                {clockStatistics.map((item) => (
                  <View className="month_statistics" key={item.id}>
                    <View className="flex aitems sb">
                      <View className="month_item_date">
                        {item.year}年{item.month}月
                      </View>
                      <View
                        className="more_box flex aitems"
                        onClick={this.onChangeMore.bind(
                          this,
                          item.id,
                          item.year,
                          item.month
                        )}
                      >
                        <View className="more_text">
                          {" "}
                          {!item.isMore ? "展开更多" : "收起更多"}
                        </View>
                        <Image
                          style={{
                            transform: item.isMore
                              ? "rotate(180deg)"
                              : "rotate(0deg)",
                          }}
                          className="more_icon"
                          src={require("@/img/arrow-down.png")}
                          mode="widthFix"
                        ></Image>
                      </View>
                    </View>
                    <View style="height: 59rpx"></View>
                    <View className="statistic">
                      <View className="statistic_item">
                        <View className="statistic_num">{item.clockNum}</View>
                        <View className="statistic_desc">本月打卡天数</View>
                      </View>
                      <View className="statistic_item">
                        <View className="statistic_num">
                          {(item.percentage * 100).toFixed(2)}%
                        </View>
                        <View className="statistic_desc">超越花至用户</View>
                      </View>
                      <View className="border"></View>
                    </View>
                    {item.isMore && item.detail && (
                      <View>
                        {item.detail.map((obj) => (
                          <View key={obj.id}>
                            <View style="height: 57rpx"></View>
                            <View className="month_item">
                              <View className="month_item_date">
                                {obj.updateTime}
                              </View>
                              <View className="month_image_box flex sb">
                                {obj.clockImg.map((img) => (
                                  <Image
                                    key={img}
                                    className="month_item_cover"
                                    src={img}
                                  ></Image>
                                ))}
                              </View>
                              <View className="month_item_date">
                                {/* 小紫弹智能射频仪、花至抗老射频仪PRO{" "} */}
                                {obj.instrumentName === null
                                  ? ""
                                  : obj.instrumentName}
                              </View>
                              <View className="month_item_note">
                                {obj.clockContent}
                              </View>
                            </View>
                          </View>
                        ))}
                      </View>
                    )}
                  </View>
                ))}
              </View>
            </View>
          </View>
        )}
        {!clockShow && ViewAddInstrument === "true" && (
          <View className="footer flex aitems">
            <View className="btn" onClick={this.setShow.bind(this, true)}>
              前往打卡
            </View>
            {/* <View className="text" onClick={this.back}>
            跳过 &gt;
          </View> */}
          </View>
        )}

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