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

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

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

import "./intro.less";

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

  async onLoad() {}
  componentDidMount() {}
  componentWillMount() {
    console.log("Taro.Current", Taro.Current);
    let params = Taro.Current?.router?.params;
    if (params) {
      this.getInstrumentInfo(params.id);
    }
  }
  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {}

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

  // 获取设备信息
  async getInstrumentInfo(id) {
    // const { data: res } = await InstrumentInfo({ id });
    let { data: res } = await InstrumentInfo.instructionInfo({
      instrumentId: id,
    });
    console.log("instrumentId", res);
    // if (res.code === 200) {
    //   const { intro_json } = res.data.info;
    //   if (intro_json) {
    //     try {
    //       res.data.info.intro_json = JSON.parse(intro_json);
    //     } catch (e) {
    //       console.log(e);
    //     }
    //   }
    //   this.setState({
    //     info: res.data?.info,
    //     introList: res.data?.info?.intro_json,
    //   });
    // }
  }

  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) {
      // isNursing ? '/pages/index/index?instrument_id=' + info.id
      setStorageSync("introduceId", info.id);
    }
    const url = "/pages/index/index";
    Taro.switchTab({
      url,
    });
  }

  render() {
    let { name, current, introList, info } = this.state;
    return (
      <Block>
        <View style="position: relative">
          <Swiper className="main" current={current} onChange={this.onChange}>
            {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">{info.titile}</View>
                    <View className="text">{item.title}</View>
                  </View>
                </SwiperItem>
              );
            })}
          </Swiper>
          <View className="indicator">
            <View
              className="dot"
              style={{
                transform:
                  "translateX(" + (current * 120) / introList.length + "rpx)",
                width: "calc(100% / " + introList.length + ")",
              }}
            ></View>
          </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>
    );
  }
}