import Taro from "@tarojs/taro";
import classnames from "classnames";

import { Component, PropsWithChildren, useEffect, useState } from "react";
import {
  Block,
  View,
  Video,
  Text,
  Image,
  Input,
  Button,
  ScrollView,
  Textarea,
  Canvas,
} from "@tarojs/components";

import Navbar from "@/components/navbar/navbar";
import PopupInstrumentUploadTips from "@/components/popup/popup-instrument-upload-tips";

import { InstrumentInfo } from "@/utils/Interface";

import "./index.less";
import { contraction, getImgInfo } from "@/utils/compressImage";
import PopupAlert from "@/components/popup/popup-alert";
import { setStorageSync, getStorageSync, msg } from "@/utils/traoAPI";

export default class InstrumentClickInUpload extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "仪器打卡上传",
      year: new Date().getFullYear(),
      month: String(new Date().getMonth() + 1).padStart(2, "0"),
      day: String(new Date().getDate()).padStart(2, "0"),
      zkmoshiindex: 0,
      moshiindex: null,
      buzhouindex: null,
      autoplay: false,
      scrollleft: 0,
      sysinfo: Taro.getSystemInfoSync(),
      showVideoPlayBtn: true,
      duration: 0,

      videoContext: {}, // 视频播放器
      isTipShow: false,
      clockContent: "", // 默认展示
      instrumentDetail: {},
      punchInInfo: {
        clockImageList: [],
        clockContent: "",
        instrumentId: "84",
        firstClockImg: null,
        secondClockImg: null,
        thirdClockImg: null,
      },
      // 现在选中的数据
      currentInfo: {
        modeVideo: "",
      },
      modeInfo: [],
      nurseInfo: [], // 首次进入介绍弹窗
      isModeLock: false,

      isSubmit: false, // 已提交则禁用提交按钮
    };
  }

  async onLoad() {
    this.initData();
  }
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {
    let videoContext = Taro.createVideoContext("myVideo");
    this.setState({ videoContext });
  }

  componentDidHide() {}

  async initData() {
    let objStr = getStorageSync("instrument_detail");
    if (objStr) {
      let instrumentDetail = JSON.parse(objStr);
      this.setState({ instrumentDetail });
    }

    setTimeout(() => {
      this.firstNurseInfo();
      this.getLatestClockRecord();
      this.modeInfoList();
    }, 10);
  }

  // 打卡介绍
  firstNurseInfo = async () => {
    let { instrumentDetail } = this.state;
    let res = await InstrumentInfo.firstNurseInfo({
      instrumentId: instrumentDetail.id,
    });
    if (res.data.code === 200) {
      let isTipShow = getStorageSync("first_instrument_" + instrumentDetail.id);
      if (!isTipShow) {
        // 首次进入页面：自动打开打卡介绍弹窗
        this.setState({ nurseInfo: res.data.data, isTipShow: true });
      } else {
        this.setState({ nurseInfo: res.data.data });
      }
    }
  };
  // 获取最新一条打卡记录
  getLatestClockRecord = async () => {
    let { punchInInfo } = this.state;
    let res = await InstrumentInfo.apiClock.getLatestClockRecord();
    if (res.data.code === 200) {
      punchInInfo.clockContent = res.data.data.clockContent;
      punchInInfo.clockImageList = res.data.data.clockImg;
    }
    this.setState({ punchInInfo });
  };
  // 获取仪器模式列表
  modeInfoList = async () => {
    let res = await InstrumentInfo.modeInfoList({
      instrumentId: "84",
    });
    if (res.data.code === 200) {
      if (res.data.data.length) {
        this.setState({
          currentInfo: res.data.data[0],
          modeInfo: res.data.data,
        });
      }
    }
  };

  bindMoshi = async (index) => {
    let { currentInfo, modeInfo, punchInInfo } = this.state;
    currentInfo = modeInfo[index];
    if (currentInfo.lock) {
      this.onModeLockOpen(); // 点击了锁定模式
      return;
    }
    this.setState({ zkmoshiindex: index, currentInfo });
  };

  // 选择图片上传
  handleChooseImage = async () => {
    let { punchInInfo } = this.state;
    Taro.chooseMedia({
      count: 1,
      mediaType: ["image"],
      sourceType: ["album", "camera"],
      sizeType: ["compressed"],
      camera: "back",
      success: async (res) => {
        const tempFilePath = res.tempFiles[0].tempFilePath;
        let img = await getImgInfo(tempFilePath);
        let compressImage = await contraction(img, "compressImage");
        // 压缩后文件地址
        let compressTempFilePath = compressImage.tempFilePath;
        punchInInfo.clockImageList.push(compressTempFilePath);

        this.setState({ punchInInfo });
      },
    });
  };

  // 删除打卡图片
  handleDeleteImage = async (index) => {
    let { punchInInfo } = this.state;
    punchInInfo.clockImageList.splice(index, 1);

    this.setState({ punchInInfo });
  };

  // 提交打卡
  handleSubmit = async () => {
    let { punchInInfo } = this.state;
    let obj = punchInInfo;
    if (obj.clockImageList.length === 0) {
      msg("至少上传一张图片");
      return;
    }

    let promiseTasks: any = [];
    let imgList: any[] = [];
    obj.clockImageList.map((imgUrl: string) => {
      let isTmpFile = imgUrl.indexOf("//tmp") > -1;
      let isWXFile = imgUrl.indexOf("wxfile://") > -1;
      if (isTmpFile || isWXFile) {
        let params = {
          clockImg: imgUrl,
        };
        promiseTasks.push(InstrumentInfo.apiClock.clockFileUpload(params));
        imgList.push("null");
      } else {
        imgList.push(imgUrl);
      }
    });

    if (promiseTasks.length) {
      let res = await Promise.all(promiseTasks);
      //具体处理写在如下
      if (res.length) {
        res.map((item) => {
          if (item.code === 200) {
            let index = imgList.findIndex((url) => url === "null");
            if (index > -1) {
              imgList[index] = item.data.url;
            }
          }
        });
      }
    }

    let clockParmas = {
      clockImageList: imgList,
      clockContent: obj.clockContent,
    };
    let res = await InstrumentInfo.apiClock.postInsertClockLog(clockParmas);
    if (res.data.code === 200) {
      msg("打卡成功");
      setTimeout(() => {
        Taro.switchTab({
          url: "/pages/index/index",
        });
      }, 2000);
    }
  };

  onPlayTap = async () => {
    let { videoContext } = this.state;
    videoContext.play();
    this.setState({
      showVideoPlayBtn: false,
    });
  };

  videoBindTimeUpdate = async () => {};

  videoEnded = async () => {};

  videoPause = async () => {};

  videoPlay = async () => {};

  videoLoadedMetaData = async () => {};

  handleTextareaInput = async (e) => {
    let { punchInInfo } = this.state;
    punchInInfo.clockContent = e.detail.value;

    this.setState({ punchInInfo });
  };

  onModeLockOpen = async () => {
    this.setState({ isModeLock: true });
  };
  onModeLockClose = async () => {
    this.setState({ isModeLock: false });
  };

  onTipShowOpen = async () => {
    this.setState({ isTipShow: true });
  };
  onTipShowClose = async () => {
    setStorageSync(
      "first_instrument_" + this.state.instrumentDetail.id,
      "true"
    );
    this.setState({ isTipShow: false });
  };

  render() {
    let {
      name,
      duration,
      showVideoPlayBtn,
      scrollleft,
      zkmoshiindex,
      punchInInfo,
      isTipShow,
      currentInfo,
      modeInfo,
      nurseInfo,
      isModeLock,
      isSubmit,
    } = this.state;
    return (
      <Block>
        <Navbar titleSlot="打卡上传" isBack={true} />
        <Canvas
          style="height: 0"
          id="compressImage"
          canvasId="compressImage"
          type="2d"
        ></Canvas>
        <PopupAlert
          isShow={isModeLock}
          title="提示"
          content="该模式即将上线，敬请期待"
          confirmButtonText="知道了"
          textAlgin="center"
          isClose={false}
          close={this.onModeLockClose}
          confirm={this.onModeLockClose}
        />
        <PopupInstrumentUploadTips
          isShow={isTipShow}
          title="打卡介绍"
          data={nurseInfo}
          close={this.onTipShowClose}
          confirm={this.onTipShowClose}
        />

        <View className="infobox1 flex aitems jcenter">
          <View className="img">
            <Video
              src={currentInfo.modeVideo}
              id="myVideo"
              enableProgressGesture={false}
              controls={true}
              // autoplay={false}
              direction={0}
              loop={false}
              showMuteBtn={true}
              referrerPolicy="origin"
              onTimeUpdate={this.videoBindTimeUpdate}
              onEnded={this.videoEnded}
              onPause={this.videoPause}
              onPlay={this.videoPlay}
              showCenterPlayBtn={false}
              onLoadedMetaData={this.videoLoadedMetaData}
              style="width: 100%; height: 100%;border-radius: 30rpx;"
            />
            {showVideoPlayBtn && (
              <View className="video-cover">
                <Image
                  className="video-cover-icon"
                  src={require("../../img/fr200/play.png")}
                  onClick={this.onPlayTap}
                ></Image>
                {duration && (
                  <View className="video-cover-time">{duration}</View>
                )}
              </View>
            )}
          </View>
        </View>

        <View className="infobox3">
          <ScrollView
            style="white-space: nowrap; height: 100%;"
            scroll-x={true}
            scroll-left={scrollleft}
          >
            {modeInfo.map((item, index) => {
              return (
                <View
                  className="info1"
                  onClick={this.bindMoshi.bind(this, index)}
                  key={index}
                >
                  <View
                    className="flex aitems"
                    style="height: 100%; {{zkmoshiindex == index ? 'background: linear-gradient(90deg, #EFDCC2, #FFF2DF)': ''}}"
                  >
                    <View className="block1">
                      <View
                        className="block1_1 flex aitems "
                        style="min-width: 80rpx"
                      >
                        <View className="tip1">{item.modeName}</View>
                        <View className="tip2">{item.modeDesc}</View>

                        {!item.lock && zkmoshiindex !== index && (
                          <View className="quan1"></View>
                        )}
                        {!item.lock && zkmoshiindex == index && (
                          <View className="quan1 is-select flex aitems jcenter">
                            <View className="quan2"></View>
                          </View>
                        )}

                        {item.lock && (
                          <View className="icon">
                            <Image
                              src="/img/fr200/suo.png"
                              mode="aspectFill"
                            ></Image>
                          </View>
                        )}
                      </View>
                    </View>
                    {item.modeBanner && (
                      <View className="info1_img">
                        <Image src={item.modeBanner} mode="aspectFill" />
                      </View>
                    )}
                  </View>
                </View>
              );
            })}
          </ScrollView>
        </View>

        <View className="infobox2">
          <View className="infobox2_info">
            <View className="info4">
              <View className="upload_header flex aitems sb">
                <View className="upload_title">打卡上传</View>
                <View className="icon" onClick={this.onTipShowOpen}>
                  <Image
                    src={require("../../img/clock_in_upload/info.png")}
                    mode="aspectFill"
                  ></Image>
                </View>
              </View>
              <View className="imgbox flex aitems">
                {punchInInfo.clockImageList.length > 0 &&
                  punchInInfo.clockImageList.map((item, index) => {
                    return (
                      <View className="img" key={"clickin_" + index}>
                        <Image src={item}></Image>
                        <View
                          className="close flex aitems jcenter"
                          data-index="{{index}}"
                          onClick={this.handleDeleteImage}
                        >
                          <Image
                            src={require("../../img/fr200/close_white.png")}
                            mode="widthFix"
                          ></Image>
                        </View>
                      </View>
                    );
                  })}

                {punchInInfo.clockImageList.length < 3 && (
                  <View
                    className="img2 flex aitems jcenter"
                    onClick={this.handleChooseImage}
                  >
                    <Image
                      src={require("../../img/fr200/add-Image.png")}
                      mode="aspectFill"
                    ></Image>
                  </View>
                )}
              </View>
              <View className="content">
                <Textarea
                  placeholder-className="placeholder"
                  maxlength={100}
                  onInput={this.handleTextareaInput}
                  value={punchInInfo.clockContent}
                  placeholder="请记录一下今天打卡的心得吧~"
                ></Textarea>
                {/* {tipshow && (
                  <View className="Textarea">
                    {punchInInfo.clockContent
                      ? punchInInfo.clockContent
                      : "请记录一下今天打卡的心得吧~"}
                  </View>
                )} */}
                <View className="tips-num">
                  {punchInInfo.clockContent.length}/100
                </View>
              </View>
            </View>
          </View>
        </View>

        <View style="height: 150rpx"></View>

        {!isSubmit && (
          <View className="confirm_btn flex aitems" onClick={this.handleSubmit}>
            <View className="btn">提交打卡</View>
          </View>
        )}
        {isSubmit && (
          <View className="confirm_btn flex aitems">
            <View className="btn">提交打卡</View>
          </View>
        )}
      </Block>
    );
  }
}