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 "./userPolicy.less";

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

export default class UserPolicy extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "用户协议",
      nodes: "",
    };
  }

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

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  initData = async () => {
    let res = await getUserAgreement();
    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 } = this.state;
    return (
      <Block>
        <Navbar titleSlot="用户协议" isBack={true} />

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