import classnames from "classnames";
import { throttle } from "lodash";
import { Component, PropsWithChildren, useEffect, useState } from "react";

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

import Taro from "@tarojs/taro";
// 引入 Swiper, SwiperItem 组件
import {
  Block,
  View,
  Text,
  Image,
  Input,
  // Button,
  Video,
  ScrollView,
  Canvas,
} from "@tarojs/components";

import { InstrumentInfo } from "@/utils/Interface";
import { go, msg, setStorageSync } from "@/utils/traoAPI";

import { getImgInfo, contraction } from "@/utils/compressImage";

/* 自定义组件 */
import Navbar from "@/components/navbar/navbar";
import PopupAlert from "@/components/popup/popup-alert";
import PopupBinding from "@/components/popup/popup-binding";
import NoDataComponent from "@/components/base/nodata";
/* 组件 */

import "./instrument.less";

export default class Instrument extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "instrument",
      isBindingError: false,
      isBindingError203: false,
      isBindingCheckError: false,
      style: "font-size: 28rpx; color: #ccc;",
      succeedShow: false,
      tipShow: false,
      loading: true,
      channelList: [],
      channelInfo: {
        id: "",
        serialImage: "",
        serialCode: "",
      },
      show: true,
      equipmentList: [
        {
          id: 1,
          banner: "",
          titile: "测试",
        },
      ],
      isVideo: false,
      inputType: 1, //1.手写 2.扫码绑定
      bindCode: "",
      bindCodeInfo: null,
      bindPopup: "",
      userinfo: null,
      showLoginPopup: "",
      fromUrl: "",

      // 提示绑定与换绑
      isVisibleBinding: false,
      isRegisterBoolean: false,
      isExchangeBinding: false,

      /** INPUT序列号：拎出来，防止上传图片被清空bug */
    };
  }
  $instance = Taro.getCurrentInstance();
  isOnly: boolean = false;
  currentDevice: any = null;
  id: any = "";

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

  componentWillUnmount() {}

  componentDidShow() {
    // 进入页面判断是否注册，用于扫码登录
    let mobile = Taro.getStorageSync("mobile");
    if (mobile) {
      this.setState({ isRegisterBoolean: true });
    }

    // 用于判断是否只显示一个设备
    let params: any = this.$instance.router?.params;
    if (params?.isOnly && params?.id) {
      if (params?.isOnly === "true") {
        this.isOnly = true;
        this.id = params?.id;
      }
    }
    console.log("params", params);
    console.log("channelInfo", this.state.channelInfo);
  }

  componentDidHide() {}

  async initData() {}

  onSerial = (event) => {
    const { value } = event.detail;
    let { channelInfo } = this.state;
    channelInfo.serialCode = value;
    this.setState({ channelInfo });
  };

  onTipShow = () => {
    this.setState({ tipShow: true });
  };

  onTabTap = (type) => {
    this.setState({
      inputType: type,
    });
  };

  onScanTap = () => {
    /*
    // 本地测试
    const result = decodeURIComponent('https%3A%2F%2Fi.flossom.com%2Fa%3Ffr200test12');
    const bindCode = result.split('?')[1];
    that.setData({
        bindCode
    })
    that.getBindCodeInfo();
    return*/
    Taro.scanCode({
      scanType: ["barCode", "qrCode"],
      success: (res) => {
        const result = decodeURIComponent(res.result);
        if (result.indexOf("?") > -1) {
          const bindCode = result.split("?")[1];
          console.log("bindCode", bindCode);
          const { channelInfo } = this.state;
          channelInfo.serialCode = bindCode;
          this.setState({
            channelInfo,
          });
        }

        setTimeout(() => {
          this.scanCodeBinding();
        }, 100);
      },
      fail(err) {},
      complete(res) {},
    });
  };

  onCustomerTap = () => {
    this.onCancelBind2Tap();
    go("/pages/consultant/consultant");
  };

  onCancelBind2Tap = () => {
    this.setState({
      bindPopup: "",
      bindCode: "",
    });
  };

  async onChangeImg() {
    Taro.chooseMedia({
      count: 1,
      mediaType: ["image"],
      sourceType: ["album", "camera"],
      sizeType: ["compressed"],
      camera: "back",
      success: async (res) => {
        console.log("success", res);
        const tempFilePath = res.tempFiles[0].tempFilePath;
        let img = await getImgInfo(tempFilePath);
        let compressImage = await contraction(img, "compressImage");
        // 压缩后文件地址
        let compressTempFilePath = compressImage.tempFilePath;
        setTimeout(() => {
          let { channelInfo } = this.state;
          channelInfo.serialImage = compressTempFilePath;
          this.setState({ channelInfo });
        });
      },
      fail: async (fail) => {
        console.log("fail", fail);
      },
    });
  }

  onSubmit = () => {
    const { serialImage, serialCode } = this.state.channelInfo;

    if (!serialCode?.trim()) return msg("请填写序列号");
    if (!serialImage) return msg("请上传序列号照片");
    this.manualCodeBinding();
  };

  onSelectChange(item) {
    const { channelInfo } = this.state;
    if (channelInfo.id === item.id) return;
    channelInfo.serialCode = "";
    channelInfo.manualCodeBinding = "";
    channelInfo.scanCodeBinding = "";

    this.setState({
      channelInfo: {
        ...channelInfo,
        ...item,
      },
      isVideo: this.isVideo(item.banner),
    });
  }

  closeDev = () => {
    // go("/pages/user/user");
    let isInstrumentJump = Taro.getStorageSync("isInstrumentJump");
    if (isInstrumentJump === "true") {
      Taro.switchTab({
        url: "/pages/user/user",
      });
    }
  };

  isVideo = (str) => {
    if (str.includes(".mp4")) {
      return true;
    }
    return false;
  };

  // 未绑定列表
  unbindingInstrumentInfoList = async () => {
    let { data } = await InstrumentInfo.unbindingInstrumentInfoList();
    console.log(data, "查看未绑定设备");

    if (data.code === 200) {
      if (data.data.length) {
        if (!this.isOnly) {
          let equipmentList = data.data.filter((item) => item.status === 0);
          if (equipmentList.length === 0) {
            return;
          }

          let item = equipmentList[0];
          item.serialCode = "";
          this.setState({
            equipmentList: equipmentList,
            channelInfo: item,
            isVideo: this.isVideo(item.banner),
          });
        } else {
          let item = data.data.find((item) => String(item.id) === this.id);
          if (item) {
            item.serialCode = "";
            this.setState({
              equipmentList: [item],
              channelInfo: item,
              isVideo: this.isVideo(item.banner),
            });
          }
        }
      }
    }
  };

  /**
   * @name 手写绑定仪器
   * @return code===204 用户选择的仪器与序列号对应的仪器不一致
   */
  manualCodeBinding = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let { channelInfo } = this.state;

    let res = await InstrumentInfo.manualCodeBinding({
      serial: channelInfo.serialCode,
      serialImage: channelInfo.serialImage,
      instrumentId: channelInfo.id,
    });
    Taro.hideLoading();
    // 文件上传接口返回格式，不需要加data
    let code = Number(res.code); // 强制类型转换
    if (code === 200) {
      msg("绑定成功");
      setTimeout(() => {
        setStorageSync("instrument_item", JSON.stringify(channelInfo));
        go("/pages/instrument/intro?id=" + channelInfo.id);
      }, 1000);
    } else if (res.data.code === 202) {
      this.changeBindBox();
    } else if (res.data.code === 203) {
      this.setState({ isBindingError203: true });
    } else if (res.data.code === 204) {
      this.onBindCheckErrorOpen();
    } else if (res.data.code === 205 || res.data.code === 206) {
      this.onBindErrorOpen();
    }
  };
  /**
   * @name 扫码绑定仪器
   * @return code===204 用户选择的仪器与序列号对应的仪器不一致
   */
  scanCodeBinding = async () => {
    // Taro.showLoading({
    //   title: "请求中...",
    //   mask: true,
    // });
    let { channelInfo } = this.state;
    let res = await InstrumentInfo.scanCodeBinding({
      serial: channelInfo.serialCode,
      instrumentId: channelInfo.id,
    });

    // Taro.hideLoading();
    let code = Number(res.data.code);
    console.log("scanCodeBinding code", code);
    setTimeout(() => {
      console.log("scanCodeBinding code", code, code === 204);
      if (code === 200) {
        msg("绑定成功");
        setTimeout(() => {
          setStorageSync("instrument_item", JSON.stringify(channelInfo));
          go("/pages/instrument/intro?id=" + channelInfo.id);
        }, 1000);
      } else if (res.data.code === 202) {
        this.changeBindBox();
      } else if (res.data.code === 203) {
        this.setState({ isBindingError203: true });
      } else if (res.data.code === 204) {
        this.onBindCheckErrorOpen();
      } else if (res.data.code === 205 || res.data.code === 206) {
        this.onBindErrorOpen();
      }
    }, 100);
  };

  // 调用绑定接口
  bindingInstrument = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });

    let { channelInfo } = this.state;
    let res = await InstrumentInfo.binding({
      serial: channelInfo.serialCode,
    });
    Taro.hideLoading();
    setTimeout(() => {
      if (res.data.code === 200) {
        // this.setState({ isVisibleBinding: false });
        msg("绑定成功");
        setStorageSync("instrument_item", JSON.stringify(channelInfo));
        setTimeout(() => {
          go("/pages/instrument/intro?id=" + channelInfo.id);
        }, 1000);
      } else if (res.data.code === 202) {
        this.changeBindBox();
      } else if (res.data.code === 203) {
        this.setState({ isBindingError203: true });
      } else if (res.data.code === 204) {
        this.onBindCheckErrorOpen();
      } else if (res.data.code === 205 || res.data.code === 206) {
        this.onBindErrorOpen();
      }
    }, 100);
  };
  // 换绑仪器
  exchangeBinding = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let { channelInfo } = this.state;
    let { data } = await InstrumentInfo.exchangeBinding({
      serial: channelInfo.serialCode,
    });
    Taro.hideLoading();
    this.closeBinding();
    if (data.code === 200) {
      msg("换绑成功");
    }
  };

  /**绑定错误弹窗*/
  onBindErrorOpen = () => {
    this.setState({ isBindingError: true });
  };
  onBindErrorClose = () => {
    this.setState({ isBindingError: false });
  };
  onBindErrorConfirm = () => {
    this.onBindErrorClose();
    go("/pages/consultant/consultant");
  };

  /**绑定错误：已被别人绑定弹窗*/
  onBindErrorOpen203 = () => {
    this.setState({ isBindingError203: true });
  };
  onBindErrorClose203 = () => {
    this.setState({ isBindingError203: false });
  };
  onBindErrorConfirm203 = () => {
    this.onBindErrorClose203();
    go("/pages/consultant/consultant");
  };
  /**绑定错误：检查序列号弹窗*/
  onBindCheckErrorOpen = () => {
    this.setState({ isBindingCheckError: true });
  };
  onBindCheckErrorClose = () => {
    this.setState({ isBindingCheckError: false });
  };
  /** 换绑弹窗 */
  changeBindBox() {
    this.setState({ isVisibleBinding: true, isExchangeBinding: true });
  }

  customBack = () => {
    Taro.reLaunch({ url: "/pages/index/index" });
  };

  // 打开绑定弹窗
  openBindingVisible = () => {
    this.setState({ isVisibleBinding: true });
  };
  closeBinding = () => {
    this.setState({ isVisibleBinding: false });
  };
  confirmBinding = () => {
    let { isExchangeBinding } = this.state;

    if (!isExchangeBinding) {
      // 绑定仪器
      this.bindingInstrument();
    } else {
      // 换绑仪器
      this.exchangeBinding();
    }
  };

  render() {
    let {
      isBindingError,
      isBindingError203,
      isBindingCheckError,
      show,
      channelInfo,
      inputType,
      style,
      equipmentList,
      isVisibleBinding,
      isRegisterBoolean,
      isExchangeBinding,
    } = this.state;
    return (
      <Block>
        {/* <PopupAlert
          isShow={true}
          isClose={true}
          title="提示"
          content="页面正在开发中"
          confirmButtonText="确定"
          textAlgin="center"
          close={this.closeDev}
          confirm={this.closeDev}
        /> */}
        <Navbar
          titleSlot="仪器绑定"
          isBack
          isCustomBack
          customBack={this.customBack}
        />

        <View catchMove>
          <PopupBinding
            type={channelInfo.bindingStatus}
            isShow={isVisibleBinding}
            isRegisterBoolean={isRegisterBoolean}
            isExchangeBinding={isExchangeBinding}
            data={channelInfo}
            close={this.closeBinding}
            confirm={this.confirmBinding}
          />
          <PopupAlert
            isShow={isBindingError}
            title="提示"
            content="序列号库仍在更新，请联系微信助手"
            confirmButtonText="知道了"
            textAlgin="center"
            close={this.onBindErrorClose}
            confirm={this.onBindErrorConfirm}
          ></PopupAlert>
          <PopupAlert
            isShow={isBindingError203}
            title="提示"
            content="序列码已被别人绑定，请联系微信助手"
            confirmButtonText="知道了"
            textAlgin="center"
            close={this.onBindErrorClose203}
            confirm={this.onBindErrorConfirm203}
          ></PopupAlert>
          <PopupAlert
            isShow={isBindingCheckError}
            title="提示"
            content="您选择的仪器有误，请重新选择确认"
            confirmButtonText="知道了"
            textAlgin="center"
            close={this.onBindCheckErrorClose}
            confirm={this.onBindCheckErrorClose}
          ></PopupAlert>
        </View>
        <Canvas
          style="position: fixed;left:-10000px;max-width: 1024px;max-height: 768px;"
          id="compressImage"
          canvasId="compressImage"
          type="2d"
        ></Canvas>

        <View></View>
        <View className="main">
          <View className="top">
            <View className="top_title">仪器绑定</View>
            <View className="top_tips">
              请参考图片指引，扫描或输入产品序列号
            </View>
            <View className="top_tips">完成花至美容仪绑定</View>
          </View>
          <View className="banner_list">
            {inputType === 1 ? (
              <Video
                className="banner_item"
                autoplay
                loop
                objectFit="cover"
                enablePlayGesture
                showFullscreenBtn={false}
                playBtnPosition="center"
                src={channelInfo.manualCodeBinding}
              />
            ) : (
              <Image
                className="banner_item"
                src={channelInfo.scanCodeBinding}
                mode="aspectFill"
              ></Image>
            )}
          </View>
          <View className="form">
            <View className="form_item is-instrument">
              <View className="label_box">
                <View
                  className="label"
                  style="font-size: 32rpx; margin: 0 0 0rpx 2rpx"
                >
                  需要绑定的仪器
                  <Text style={{ color: "#EB5858", marginLeft: "20rpx" }}>
                    *
                  </Text>
                </View>
              </View>

              <ScrollView
                scrollX={true}
                className="instrument_list"
                style="width: 100%; white-space: nowrap;"
                scrollIntoView={"scroll" + channelInfo.id}
                scrollIntoViewAlignment={"center"}
              >
                {equipmentList.length > 0 &&
                  equipmentList.map((item, index) => {
                    return (
                      <View
                        className={classnames("cover", {
                          active_cover: channelInfo.id === item.id,
                        })}
                        id={"scroll" + item.id}
                        key={index}
                        onClick={this.onSelectChange.bind(this, item)}
                      >
                        <Image
                          className="instrument_img"
                          src={item.banner}
                          mode="aspectFill"
                        ></Image>
                        <View className="desc">{item.name}</View>
                      </View>
                    );
                  })}

                {equipmentList.length === 0 && (
                  <Block>
                    <View>
                      <NoDataComponent />
                    </View>
                  </Block>
                )}
              </ScrollView>
            </View>
            <View className="form_item is-tab">
              <View className="tab_list">
                <View
                  className={classnames("tab_item", {
                    "is-active": inputType === 1,
                  })}
                  onClick={this.onTabTap.bind(this, 1)}
                >
                  <Text>手写输入绑定</Text>
                  <View className="tab_active_line"></View>
                </View>
                {channelInfo.isScanCode === 1 && (
                  <View
                    className={classnames("tab_item", {
                      "is-active": inputType === 2,
                    })}
                    onClick={this.onTabTap.bind(this, 2)}
                  >
                    <Text>扫码绑定</Text>
                    <View className="tab_active_line"></View>
                  </View>
                )}
              </View>
            </View>

            {inputType == 1 && (
              <Block>
                <View className="inputCode_box">
                  <View className="form_item is-inputCode">
                    <View className="label_box">
                      <View className="label">
                        填写序列号
                        <Text style={{ color: "#EB5858", marginLeft: "20rpx" }}>
                          *
                        </Text>
                      </View>
                      <View className="label_text" onClick={this.onTipShow}>
                        <Text className="label-tips">查看序列号位置</Text>
                        <Image
                          className="right_icon"
                          src={require("../../img/index-right.png")}
                          mode="aspectFill"
                        />
                      </View>
                    </View>
                    <View className="ipt_box">
                      <Input
                        maxlength={50}
                        className="ipt"
                        placeholder="例如：FR10*********1"
                        placeholder-style={style}
                        onInput={this.onSerial}
                        value={channelInfo.serialCode}
                      ></Input>
                    </View>
                  </View>
                  <View className="form_item">
                    <View className="label_box">
                      <View className="label">
                        上传序列号照片
                        <Text style={{ color: "#EB5858", marginLeft: "20rpx" }}>
                          *
                        </Text>
                      </View>
                    </View>
                    <View
                      className="photo_box"
                      onClick={this.onChangeImg.bind(this)}
                    >
                      {channelInfo.serialImage && (
                        <Image
                          src={channelInfo.serialImage}
                          mode="aspectFill"
                        ></Image>
                      )}
                      {!channelInfo.serialImage && (
                        <Image
                          className="add"
                          src={require("../../img/welcome/add.png")}
                          mode="aspectFit"
                        ></Image>
                      )}
                    </View>
                  </View>
                </View>
              </Block>
            )}
          </View>
        </View>
        <View className="footer">
          {inputType == 1 && (
            <View
              className="btn"
              onClick={throttle(this.onSubmit.bind(this), 1000)}
            >
              确认绑定
            </View>
          )}

          {inputType == 2 && (
            <View className="btn footer-btn-scan" onClick={this.onScanTap}>
              <Image
                className="footer-btn-scan-img"
                src={require("../../img/icon-scan.png")}
              ></Image>
              扫码绑定
            </View>
          )}
        </View>
      </Block>
    );
  }
}