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);
      }
    })
  
    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("/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report );
  }
  // 打开第一种类型
  One = async (item) => {
    
    let report = false;
    let  nursingData=JSON.parse(item.nursingData)
    let obj ={
      modeName:item.modeName,
      data:nursingData
    }
    console.log("打开第一种类型", item,obj);
    go(
      "/recoding/pages/face_report_one/face_report_one?id=" +
        item.id +
        "&report=" +
        report
    );
  };
  // 打开第二种类型
  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) => {
    go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${item.nursingData}&date=${item.createTime}&modeId=${item.modeId}`);
  };
  // 打开其他类型
  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.nursingTime}
                        </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='time'>
                        {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>
    );
  }
}
