import React from "react";
import { WeaDatePicker, WeaDialog, WeaError, WeaFormItem, WeaHelpfulTip, WeaSelect } from "ecCom";
import { Button } from "antd";
import { inject, observer } from "mobx-react";
import "./index.less";

@inject("declareStore", "taxAgentStore")
@observer
export default class GenerateModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      taxAgentId: ""
    };
  }

  // 生成申报表
  handleGenerate() {
    const {
      declareStore: { saveDeclare }
    } = this.props;
    const { date, taxAgentId } = this.state;
    if (_.isEmpty(date) && _.isEmpty(taxAgentId)) {
      this.refs.weaError.showError();
      this.refs.weaError1.showError();
      return;
    }

    if (_.isEmpty(date)) {
      this.refs.weaError.showError();
      return;
    }

    if (_.isEmpty(taxAgentId)) {
      this.refs.weaError1.showError();
      return;
    }
    saveDeclare({ salaryMonthStr: date, taxAgentId }).then(() => {
      this.props.onGenerate();
    });
  }

  render() {
    const {
      taxAgentStore: { taxAgentAdminOption },
      declareStore: { loading }
    } = this.props;
    return (
      <WeaDialog
        visible={this.props.visible}
        onCancel={() => this.props.onCancel()}
        initLoadCss
        className="generateWapper"
        title={
          <span>
            <span>申报</span>
            <WeaHelpfulTip
              style={{ marginLeft: 8, position: "relative", top: "-1px" }}
              width={200}
              title="提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报"
              placement="topLeft"
            />
          </span>
        }
        buttons={
          [<Button
            type="primary"
            loading={loading}
            onClick={() => {
              this.handleGenerate();
            }}>
            生成申报表
          </Button>]
        }>
        <div style={{ marginTop: "10px", padding: "20px 20%" }}>
          <WeaFormItem
            label="薪资所属月"
            style={{ marginBottom: 10 }}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}>
            <WeaError
              style={{ width: "100%" }}
              tipPosition="bottom"
              ref="weaError"
              error="请选择薪资所属月">
              <WeaDatePicker
                style={{ width: "100%" }}
                viewAttr={3}
                format="YYYY-MM"
                value={this.state.date}
                onChange={(value) => {
                  if (_.isEmpty(value)) this.refs.weaError.showError();
                  this.setState({ date: value });
                }}
              />
            </WeaError>
          </WeaFormItem>
          <WeaFormItem
            label="个税扣缴义务人"
            style={{ marginBottom: 10 }}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}>
            <WeaError
              style={{ width: "100%" }}
              tipPosition="bottom"
              ref="weaError1"
              error="请选择个税扣缴义务人">
              <WeaSelect
                showSearch // 设置select可搜索
                viewAttr={3}
                options={[{ key: "", showname: "" }, ...taxAgentAdminOption]}
                value={this.state.taxAgentId}
                onChange={(taxAgentId) => {
                  if (_.isEmpty(taxAgentId)) this.refs.weaError1.showError();
                  this.setState({ taxAgentId });
                }}
              />
              <WeaHelpfulTip
                style={{ position: "absolute", bottom: "8px", right: 0 }}
                width={200}
                title="提示：可选择单个个税扣缴义务人进行申报，若不选择，则批量对管理下的所有个税扣缴义务人进行申报；"
                placement="topLeft"
              />
            </WeaError>
          </WeaFormItem>
        </div>
      </WeaDialog>
    );
  }
}