import { Select, message, Modal } from "antd";
import { connect } from "dva/index";
import router from "umi/router";
import { Component } from "react";
import { businessStateEnum } from "@/utils/utils";
import styles from "./index.less";

@connect(({ store }) => ({
  store,
}))
export default class BusinessStateSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateList: Object.keys(businessStateEnum).map((key) => ({
        name: businessStateEnum[key],
        value: Number(key),
      })),
      currentBusinessState: "",
      visible: false,
    };
  }

  handleChange = (value) => {
    const { dispatch } = this.props;
    dispatch({
      type: "store/update_business_state",
      payload: {
        businessState: value,
      },
      callback: (res) => {
        if (res.state === 200) {
          if (res.data) {
            this.setState({ visible: true });
          } else {
            message.success("设置成功");
            this.setState({ currentBusinessState: value });
          }
        } else {
          message.error(res.msg);
        }
      },
    });
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "store/get_business_state",
      callback: (res) => {
        if (res.state === 200) {
          this.setState({ currentBusinessState: res.data });
        } else {
          this.setState({ currentBusinessState: 2 });
          message.error(res.msg);
        }
      },
    });
  }

  confirmModal = () => {
    if (this.props.confirmModal) {
      this.props.confirmModal();
    } else {
      router.push({
        pathname: "/store/decorate_pc",
        query: {
          tab: "2",
        },
      });
    }

    this.setState({ visible: false });
  };

  cancelModel = () => {
    this.setState({ visible: false });
  };

  render() {
    const { stateList, currentBusinessState, visible } = this.state;
    return stateList.length ? (
      <div className={`${styles.state_warp}`}>
        <span className={`${styles.label}`}>经营状态</span>
        <Select
          value={currentBusinessState}
          style={{ width: 150 }}
          onChange={this.handleChange}
        >
          {stateList.map((state) => (
            <Select.Option key={state.name} value={state.value}>
              {state.name}
            </Select.Option>
          ))}
        </Select>
        <Modal
          visible={visible}
          onOk={this.confirmModal}
          onCancel={this.cancelModel}
          okText="去启用"
          cancelText="取消"
          wrapClassName={styles.model_wrap}
          width={526}
          height={324}
        >
          <div className={styles.model_content}>
            <div className={styles.model_icon}>
              <img
                className={styles.model_img}
                src={require("../../assets/warning.png")}
              />
            </div>
            <div className={styles.model_tip}>
              请先在【店铺装修-首页装修】内，装修首页并将“启用状态”更改为“启用”
            </div>
          </div>
        </Modal>
      </div>
    ) : null;
  }
}