import classnames from "classnames";
import { Component } from "react";

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

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

import "./popup.less";
import "./popup-status.less";

/** props
 * isLarge            是否大尺寸
 * isShow             是否显示
 * isClose            右上角关闭图标
 * title              弹窗标题
 * content            弹窗内容
 * confirmButtonText  确定按钮
 * textAlgin          文本对齐 left  right  center
 * type:              1注册
 * @confirm           关闭回调
 */
export default class PopupStatus extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "图标状态提示组件",
    };
  }

  async onLoad() {}
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {}

  onClose = () => {
    this.props.close();
  };

  onConfirm = () => {
    this.props.confirm();
  };

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

  onTouchMove = () => {
    return true;
  };

  render() {
    let {
      title,
      content,
      confirmButtonText,
      textAlgin,
      isShow,
      isClose,
      isBtn,
      isLarge,
      myClassName,
      zIndex,
      type,
    } = this.props;
    if (!zIndex) zIndex = 10001;
    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          className={myClassName}
          overlayStyle={`width: 100vw;padding: 0;z-index: ${
            zIndex || 10001
          } !important`}
          show={isShow}
          closeOnClickOverlay={false}
          round
          onClick={this.onClickStop}
        >
          {isClose && (
            <View
              className="at-icon at-icon-close common-close"
              onClick={this.onClose}
            ></View>
          )}
          <View
            className={classnames("common-box", {
              "common-large": isLarge,
            })}
            catchMove
          >
            {title && (
              <View
                className={classnames(
                  "common-popup-title",
                  "opup-status-title",
                  {
                    "margin-samll": isLarge,
                  }
                )}
              >
                {title}
              </View>
            )}
            <View className="common-popup-content-box">
              <ScrollView
                scrollY
                className={classnames("common-popup-content", {
                  "text-left": textAlgin === "left",
                  "text-right": textAlgin === "right",
                  "text-center": textAlgin === "center",
                })}
              >
                <View className="popup-status-box">
                  {type === "success" && (
                    <Image
                      className="popup-status"
                      src={require("../../img/status/success.png")}
                      mode="aspectFit"
                    />
                  )}
                  {type === "error" && (
                    <Image
                      className="popup-status"
                      src={require("../../img/status/error.png")}
                      mode="aspectFit"
                    />
                  )}
                </View>
                {content}
              </ScrollView>
            </View>

            {isBtn && (
              <View className="alert-popup-btns">
                <Button className="alert-popup-btn" onClick={this.onConfirm}>
                  {confirmButtonText}
                </Button>
              </View>
            )}
          </View>
        </Popup>
      </Block>
    );
  }
}
