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

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

import { GetAboutUs, GetOtherSetting } from "../../utils/Interface";

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

import { go } from "../../utils/traoAPI";

import "./about.less";

class About extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "更多设置",
      version: "",
    };
  }

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

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {
    // let res = await GetAboutUs();
    // if (res.data.code === 200) {
    //   this.setState({ version: res.data.data.value });
    // }

    // 读取小程序版本
    // const accountInfo = Taro.getAccountInfoSync();
    // let version = accountInfo?.miniProgram?.version
    //   ? "当前版本V" + accountInfo?.miniProgram?.version
    //   : "开发版";

    let version = this.props.otherSetting.sysVersion;
    this.setState({ version: "当前版本V" + version });
  }

  // 获取小程序设置
  GetOtherSetting = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let res = await GetOtherSetting();
    console.log("e", res);
    Taro.hideLoading();
    if (res.data.code === 200) {
      this.props.otherSettingRefresh(res.data.data);
      // this.setState({ otherSetting });
      this.setState({ version: "当前版本V" + res.data.data.sysVersion });
    }
  };

  goUser = () => {
    go("/pages/userPolicy/userPolicy");
  };

  goPrivacy = () => {
    go("/pages/privacyPolicy/privacyPolicy");
  };

  render() {
    let { version } = this.state;
    return (
      <Block>
        <Navbar titleSlot="更多设置" isBack={true} />
        <View className="about-box">
          <View className="cell flex aitems sb" style="margin-top:20rpx;">
            <View className="label">版本</View>
            <View className="value version">{version}</View>
          </View>
          <View className="cell flex aitems sb" onClick={this.goUser}>
            <View className="label">用户协议</View>
            <View className="value">
              <Image
                src={require("../../img/index/right.png")}
                style="width: 20rpx;height:20rpx"
              />
            </View>
          </View>
          <View className="cell flex aitems sb" onClick={this.goPrivacy}>
            <View className="label">隐私协议</View>
            <View className="value">
              <Image
                src={require("../../img/index/right.png")}
                style="width: 20rpx;height:20rpx"
              />
            </View>
          </View>
        </View>
      </Block>
    );
  }
}

const mapStateToProps = (state) => ({
  otherSetting: state.otherSetting,
});
const mapDispatchToProps = (dispatch) => ({
  otherSettingRefresh(data) {
    dispatch(otherSettingRefresh(data));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(About);