import classnames from "classnames";
import { Component } from "react";
import Taro from "@tarojs/taro";

import { Block, View, Button, PageMeta } from "@tarojs/components";

import { Popup } from "@antmjs/vantui";

import "./popup.less";

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

/*** props
 * isLarge            是否大尺寸
 * isShow             是否显示
 * isClose            是否显示关闭按钮
 * @closePrivacy           关闭回调
 * ***/

export default class PopupPrivacyTest extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "隐私组件",
      isShowPrivacyPopup: true,
      isShow: false,
      isLarge: false,
      isClose: false,
    };
  }

  componentWillMount() {
    console.log("componentWillMount");
    this.showInit();
  }
  componentDidMount() {
    console.log("componentDidMount");
  }

  async initData() {}

  showInit() {
    const isFirst = Taro.getStorageSync("isWelcome");
    if (isFirst) {
      this.checkShowPrivacyPopup();
    }
  }
  // 检测是否弹出隐私协议
  checkShowPrivacyPopup() {
    Taro.getPrivacySetting({
      success: (res) => {
        // console.log("检测是否弹出隐私协议", res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
        if (res.needAuthorization) {
          this.setState({ isShow: true });
        } else {
          // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
          this.props.initData();
        }
      },
      fail: () => {},
      complete: () => {
        // 授权完成运行页面初始化
      },
    });
  }

  onClose = () => {
    this.props.closePrivacy();
  };
  onPrivacyTap = () => {
    // 跳转用户隐私协议
    go("/pages/privacyPolicy/privacyPolicy");
  };
  onDisagreeTap = () => {
    // 关闭小程序
    Taro.exitMiniProgram({
      success: (res) => {
        console.log("exitMiniProgram", res);
      },
      fail: (err) => {
        console.log("exitMiniProgram err", err);
      },
      complete: (res) => {
        console.log("exitMiniProgram complete", res);
        this.onClose();
      },
    });
  };
  handleAgreePrivacyAuthorization = (event) => {
    // Taro.setStorageSync("isPrivacyPopup", "true");
    this.setState({ isShow: false });
    this.props.closePrivacy(); // 通知父组件关闭
  };

  onClickStop = (e) => {
    e.stopPropagation();
  };

  render() {
    let { isShow, isClose, isLarge } = this.state;
    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          show={isShow}
          closeOnClickOverlay={false}
          round
          overlayStyle="width: 100vw;padding: 0;"
          onClick={this.onClickStop}
        >
          {isClose && (
            <View
              style="color:#fff;"
              className="at-icon at-icon-close common-close"
              onClick={this.onClose}
            ></View>
          )}

          <View
            className={classnames("common-box", {
              large: isLarge,
            })}
          >
            <View className="common-popup-title">用户隐私保护提示</View>
            <View className="common-popup-content-box">
              <View className="common-popup-content">
                感谢您使用花至FLOSSOM小程序，您使用小程序前应当阅读并同意
              </View>
              <View
                className="common-popup-content is-common"
                onClick={this.onPrivacyTap}
              >
                《用户隐私协议》
              </View>
              <View className="common-popup-content is-last">
                当您点击同意并开始使用小程序服务时，即表示您已理解并同意该条款内容，该条款内容将您产生法律约束力。如您拒绝，将无法使用小程序服务
              </View>
            </View>
            <View className="common-popup-btns">
              <Button
                className="common-popup-btn2"
                onClick={this.onDisagreeTap}
              >
                不同意并退出
              </Button>
              <Button
                className="common-popup-btn2"
                openType="agreePrivacyAuthorization"
                onAgreePrivacyAuthorization={
                  this.handleAgreePrivacyAuthorization
                }
              >
                同意并继续
              </Button>
            </View>
          </View>
        </Popup>
      </Block>
    );
  }
}
