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 { contraction, getImgInfo } from "@/utils/compressImage";
import PopupAlert from "@/components/popup/popup-alert";
import { setStorageSync, getStorageSync, msg } from "@/utils/traoAPI";

import "./index.less";

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,
      modeIndex: null,
      stepIndex: 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 obj = getStorageSync("instrument_detail");
    if (obj) {
      this.setState({ instrumentDetail: obj });
    }
    setTimeout(() => {
      this.firstNurseInfo();
      this.getLatestClockRecord();
      this.modeInfoList(this.state.instrumentDetail.id);
    }, 10);
  }

  // 首次护理弹窗
  firstNurseInfo = async () => {
    let { instrumentDetail } = this.state;
    let res = await InstrumentInfo.firstNurseInfo({
      instrumentId: instrumentDetail.id,
    });
    if (res.data.code === 200) {
      // 仅在有数据的时候执行
      if (res.data.length > 0) {
        let isTipShow = getStorageSync(
          "first_instrument_" + instrumentDetail.id
        );
        if (!isTipShow) {
          // 首次进入页面：自动打开打卡介绍弹窗
          this.setState({ nurseInfo: res.data.data, isTipShow: true });
          // 已打开初次护理
          setStorageSync(
            "first_instrument_" + this.state.instrumentDetail.id,
            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) {
      if (res.data.data) {
        punchInInfo.clockContent = res.data.data.clockContent;
        punchInInfo.clockImageList = res.data.data.clockImg;
      }
    }
    this.setState({ punchInInfo });
  };
  // 获取仪器模式列表
  modeInfoList = async (id) => {
    let res = await InstrumentInfo.modeInfoList({
      instrumentId: id,
    });
    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, instrumentDetail } = 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 params = {
      instrumentId: instrumentDetail.id,
    };
    // 上传护理完成的仪器ID
    let instrumentRes = await InstrumentInfo.apiClock.addClockInstrument(
      params
    );
    console.log(instrumentRes, "添加仪器成功");

    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 = (e) => {
    const punchInInfo = this.state.punchInInfo;
    this.setState({
      punchInInfo: { ...punchInInfo, clockContent: e.detail.value },
    });
  };

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

  onTipShowOpen = async () => {
    if (this.state.nurseInfo.length) {
      this.setState({ isTipShow: true });
    } else {
      msg("暂无数据");
    }
  };
  onTipShowClose = async () => {
    this.setState({ isTipShow: false });
  };

  render() {
    let {
      name,
      duration,
      showVideoPlayBtn,
      scrollleft,
      zkmoshiindex,
      punchInInfo,
      isTipShow,
      currentInfo,
      clockcontent,
      modeInfo,
      nurseInfo,
      isModeLock,
      isSubmit,
      year,
      month,
      day,
      modeIndex,
      stepIndex,
      autoPlay,
      sysInfo,
    } = this.state;
    return (
      <Block>
        <Navbar titleSlot='打卡上传' isBack />
        <Canvas
          style='position: fixed;left:-10000px;'
          id='compressImage'
          canvasId='compressImage'
          type='2d'
        ></Canvas>

        <View catchMove>
          <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>

        <View className='infobox1 flex aitems jcenter'>
          <View className='img'>
            <Video
              src={currentInfo.modeVideo}
              id='myVideo'
              enableProgressGesture={false}
              controls
              // autoplay={false}
              direction={0}
              loop={false}
              showMuteBtn
              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
            scroll-left={scrollleft}
          >
            {modeInfo.map((item, index) => {
              return (
                <View
                  className='info1'
                  onClick={this.bindMoshi.bind(this, index)}
                  key={index}
                >
                  <View
                    className='flex aitems modebox'
                    style={{
                      height: "100%",
                      background:
                        zkmoshiindex == index
                          ? "linear-gradient(90deg, #EFDCC2, #FFF2DF)"
                          : "",
                    }}
                  >
                    <View className='block1'>
                      <View className='block1_1 flex aitems '>
                        <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={require("@/img/fr200/suo.png")}
                              mode='aspectFill'
                            ></Image>
                          </View>
                        )}
                      </View>
                    </View>
                    {item.modeBanner && index == zkmoshiindex && (
                      <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="placeh和给g'holder"
                  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
                  {/* {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>
    );
  }
}
