import { Component, PropsWithChildren, useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { Block, View, RichText } from "@tarojs/components";

import Navbar from "../../components/navbar/navbar";

import "./connection_help.less";

import {
  GetBluetoothGuidance,
  GetLocationGuidance,
} from "../../utils/Interface";

export default class ConnectionHelp extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "蓝牙连接帮助",
      nodes: "",
      type: "bluetoot", // bluetoot location
      title: "蓝牙权限开启指引", // 定位授权开启指引
    };
  }

  $instance = Taro.getCurrentInstance();

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

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async getType() {
    let type = this.$instance.router?.params?.type;
    if (type) {
      let title = type === "bluetoot" ? "蓝牙权限开启指引" : "定位授权开启指引";
      this.setState({ type, title });

      setTimeout(() => {
        this.initData();
      }, 0);
    }
  }

  initData = async () => {
    let { type } = this.state;
    if (type === "bluetoot") {
      this.GetBluetoothGuidance();
    } else {
      this.GetLocationGuidance();
    }
  };

  GetBluetoothGuidance = async () => {
    let res = await GetBluetoothGuidance();
    if (res.data.code === 200) {
      let nodes = decodeURIComponent(res.data.data.value || "");
      nodes = nodes.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
      nodes = nodes.replace(
        /\<table/gi,
        '<table style="border-spacing: 0;border-collapse: collapse;border: 1px solid #000" '
      );
      nodes = nodes.replace(
        /\<td/gi,
        '<td style="border: 1px solid #000;text-align:center" '
      );
      this.setState({ nodes: nodes });
    }
  };

  GetLocationGuidance = async () => {
    let res = await GetLocationGuidance();
    if (res.data.code === 200) {
      let nodes = decodeURIComponent(res.data.data.value || "");
      nodes = nodes.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
      nodes = nodes.replace(
        /\<table/gi,
        '<table style="border-spacing: 0;border-collapse: collapse;border: 1px solid #000" '
      );
      nodes = nodes.replace(
        /\<td/gi,
        '<td style="border: 1px solid #000;text-align:center" '
      );
      this.setState({ nodes: nodes });
    }
  };

  render() {
    let { nodes, title } = this.state;
    return (
      <Block>
        <Navbar titleSlot={title} isBack={true} />

        <View className="nodes">
          <RichText nodes={nodes} />
        </View>
      </Block>
    );
  }
}
