import React from "react";
import { WeaHelpfulTip, WeaDatePicker, WeaInput, WeaSelect } from "ecCom";
import { Modal, Row, Col, Button } from "antd";
import { inject, observer } from "mobx-react";

@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;
    saveDeclare({ salaryMonthStr: date, taxAgentId }).then(() => {
      this.props.onGenerate();
    });
  }

  render() {
    const {
      taxAgentStore: { taxAgentOption },
    } = this.props;
    return (
      <Modal
        visible={this.props.visible}
        onCancel={() => this.props.onCancel()}
        width={800}
        footer={
          <Button
            type="primary"
            onClick={() => {
              this.handleGenerate();
            }}>
            生成申报表
          </Button>
        }>
        <div
          style={{
            height: "47px",
            lineHeight: "47px",
            borderBottom: "1px solid #eee",
          }}>
          <span style={{ fontSize: "14px", marginLeft: "20px" }}>申报</span>
          <WeaHelpfulTip
            style={{ float: "right", marginRight: "40px" }}
            width={200}
            title="提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报"
            placement="topLeft"
          />
        </div>
        <div style={{ marginTop: "10px", padding: "20px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>薪资所属月</Col>
            <Col span={16}>
              <WeaDatePicker
                style={{ width: "200px" }}
                format="yyyy-MM"
                value={this.state.date}
                onChange={(value) => this.setState({ date: value })}
              />
            </Col>
          </Row>
          {/* <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>扣缴义务人</Col>
            <Col span={16}>
              <WeaSelect
                showSearch // 设置select可搜索
                style={{ width: "200px" }}
                options={taxAgentOption}
                value={this.state.taxAgentId}
                onChange={(taxAgentId) => {
                  this.setState({ taxAgentId });
                }}
              />
            </Col>
          </Row> */}
        </div>
      </Modal>
    );
  }
}