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

import { Component, PropsWithChildren, useEffect, useState } from "react";
import {
  Block,
  View,
  Image,
  Video,
  Swiper,
  SwiperItem,
} from "@tarojs/components";

/* 自定义组件 */
import Navbar from "../../components/navbar/navbar";
// import PopupAlert from "../../components/popup/popup-alert";
/* 组件 */

/*** redux ***/
import { connect } from "react-redux";
import { setInstrument } from "../../store/features/instrument";
/*** redux end ***/

import { InstrumentInfo } from "../../utils/Interface";
import { setStorageSync, getStorageSync, go } from "../../utils/traoAPI";

import "./intro.less";

class Intro extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "template模板页",
      current: 0,
      instrument: {},
      introList: [],
      isNursing: false,
    };
  }

  async onLoad() {}
  componentDidMount() {}
  componentWillMount() {
    // let params = Taro.Current?.router?.params;
    // if (params) {
    //   this.getInstrumentInfo(params.id);
    // }

    let strObj = getStorageSync("instrument_item");
    if (strObj) {
      let instrument = JSON.parse(strObj);
      this.getInstrumentInfo(instrument.id);
      this.setState({ instrument });
    }
  }
  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {}

  onChange(event) {
    console.info("onchange", event);
    // const current = event.detail.current;
    // this.setState({ current });
  }

  // 获取设备信息
  async getInstrumentInfo(id) {
    let res = await InstrumentInfo.instructionInfo({
      instrumentId: id,
    });
    if (res.data.code === 200) {
      this.setState({ introList: res.data.data });
    }
  }

  toNursing() {
    // if (this.state.info.iot === 2) {
    //   this.setState({ isNursing: true }, () => {
    //     this.toHomePage();
    //   });
    // } else {
    //   go("/pages/clock_in2/clock_in2?iid=" + this.state.info.id);
    // }
  }

  toHomePage() {
    // const { isNursing, info } = this.state;
    // if (isNursing) {
    //   setStorageSync("introduceId", info.id);
    // }
    const url = "/pages/index/index";
    Taro.switchTab({
      url,
    });
  }

  render() {
    let { current, introList, instrument } = this.state;
    return (
      <Block>
        <Navbar titleSlot="仪器绑定" isBack={true} />
        <View style="position: relative">
          <Swiper
            className="main"
            current={current}
            onChange={this.onChange}
            duration={800}
            indicatorDots={false}
            indicatorColor="#999"
            indicatorActiveColor="#333"
            previousMargin="32rpx"
            nextMargin="32rpx"
          >
            {introList.map((item: any, index: number) => {
              return (
                <SwiperItem key={index}>
                  {item.fileType === "video" ? (
                    <Video className="cover" src={item.file} />
                  ) : (
                    <Image
                      className="cover"
                      src={item.file}
                      mode="aspectFill"
                    ></Image>
                  )}

                  <View className="content">
                    <View className="title">{instrument.name}</View>
                    <View className="text">{item.message}</View>
                  </View>
                </SwiperItem>
              );
            })}
          </Swiper>

          {introList.length && (
            <View className="indicator">
              {introList.map((_item, index) => {
                return (
                  <View
                    key={"indicator_" + index}
                    className={classnames("dot", {
                      "bg-show": current === index,
                    })}
                  />
                );
              })}
            </View>
          )}
        </View>

        <View className="footer flex aitems jcenter">
          <View className="btn" onClick={this.toNursing}>
            马上护理
          </View>
          <View className="btn text" onClick={this.toHomePage}>
            暂不护理
          </View>
        </View>
      </Block>
    );
  }
}

const mapStateToProps = (state) => ({
  instrument: state.instrument,
});
const mapDispatchToProps = (dispatch) => ({
  setInstrument(data) {
    dispatch(setInstrument(data));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(Intro);
