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

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

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,

      punchInInfo: {
        imageList: [],
        content: "",
        instrumentId: "84",
      },
      // 现在选中的数据
      currentInfo: {
        modeVideo: "",
      },
      modeInfo: [],
      isModeLock: false,
    };
  }

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

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {
    this.firstNurseInfo();
    this.modeInfoList();
  }

  firstNurseInfo = async () => {
    let res = await InstrumentInfo.firstNurseInfo({
      instrumentId: "84",
    });
    console.log("firstNurseInfo", res);
  };

  modeInfoList = async () => {
    let res = await InstrumentInfo.modeInfoList({
      instrumentId: "84",
    });
    console.log("modeInfo", res);
    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];
    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.imageList.push(compressTempFilePath);
        this.setState({ punchInInfo });
      },
    });
  };

  handleDeleteImage = async (index) => {
    let { punchInInfo } = this.state;
    punchInInfo.imageList.splice(index, 1);
    this.setState({ punchInInfo });
  };

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

  onTipShow = async () => {};

  handleSubmit = async () => {};

  render() {
    let {
      name,
      duration,
      showVideoPlayBtn,
      scrollleft,
      zkmoshiindex,
      punchInInfo,
      tipshow,
      currentInfo,
      modeInfo,
      isModeLock,
    } = 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}
        ></PopupAlert>
        <View className="infobox1 flex aitems jcenter">
          <View className="img">
            <Video
              src={currentInfo.modeVideo}
              id="myVideo"
              enableProgressGesture={false}
              controls={true}
              autoplay={false}
              loop={false}
              showMuteBtn={true}
              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.onTipShow}>
                  <Image
                    src={require("../../img/clock_in_upload/info.png")}
                    mode="aspectFill"
                  ></Image>
                </View>
              </View>
              <View className="imgbox flex aitems">
                {punchInInfo.imageList.length > 0 &&
                  punchInInfo.imageList.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.imageList.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">
                {!tipshow && (
                  <Textarea
                    placeholder-className="placeholder"
                    maxlength={120}
                    onInput={this.handleTextareaInput}
                    value={punchInInfo.content}
                    placeholder="请记录一下今天打卡的心得吧~"
                  ></Textarea>
                )}

                {tipshow && (
                  <View className="Textarea">
                    {punchInInfo.content
                      ? punchInInfo.content
                      : "请记录一下今天打卡的心得吧~"}
                  </View>
                )}
              </View>
            </View>
          </View>
        </View>

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