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

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

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

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

/** props
 * isShow             是否显示
 * isClose            右上角关闭图标
 * type:              1注册
 * @confirm           关闭回调
 */
export default class PopupCountdown 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();
  };

  render() {
    let { isShow, isClose, countdown } = this.props;
    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          show={isShow}
          closeOnClickOverlay={false}
          round
          overlayStyle="width: 100vw;padding: 0;"
          onClick={this.onClickStop}
        >
          {isClose && (
            <View
              className="at-icon at-icon-close common-close"
              onClick={this.onClose}
            ></View>
          )}
          <View className={classnames("common-box", "countdown-box")} catchMove>
            <View
              className={classnames("common-popup-title", "countdown-title")}
            >
              启动倒计时
            </View>
            <View className="common-popup-content-box">
              <View
                className={classnames(
                  "common-popup-content",
                  "countdown-content"
                )}
              >
                <View className="countdown-popup-loading">
                  <View className="ui-loading__bg">
                    <View className="ui-loading"></View>
                  </View>
                  {countdown >= 0 && (
                    <View className="countdown-popup-loading-time">
                      {countdown}
                    </View>
                  )}
                </View>
              </View>
            </View>
          </View>
        </Popup>
      </Block>
    );
  }
}
