import React from "react";
import { Button, Col, message, Row, Select } from "antd";
import moment from "moment";
import { WeaDatePicker, WeaDialog, WeaError, WeaInput, WeaSelect } from "ecCom";
import SelectItemModal from "../../../components/selectItemsModal";
import SelectItemsWrapper from "../../../components/selectItemsModal/selectItemsWrapper";
import { inject, observer } from "mobx-react";
import { notNull } from "../../../util/validate";

const { Option } = Select;

@inject("attendanceStore")
@observer
export default class RefereAttendFormModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      headerSetVisible: false,
      inited: false,
      request: {
        salarySobId: "",
        salaryYearMonth: moment(new Date()).format("YYYY-MM"),
        employeeIds: [],
        description: ""
      }
    };
  }

  handleHeaderSet() {
    this.setState({ headerSetVisible: true });
    this.props.onHeaderSet();
  }

  componentWillMount() {
    const { attendanceStore: { getLedgerList } } = this.props;
    getLedgerList().then(() => {
      this.setState({
        inited: true
      });
    });
  }

  // 请求参数改变事件
  handleRequestChange(params) {
    const { request } = this.state;
    let result = { ...request, ...params };
    this.setState({ request: result });
  }


  // 同步点击回调
  handleSync() {
    const { attendanceStore: { syncAttendanceRefer, checkOperation } } = this.props;
    if (!this.validate()) {
      return;
    }
    const { salarySobId, salaryYearMonth: salaryYearMonthStr } = this.state.request;
    const payload = {
      salaryYearMonthStr,
      salarySobId
    };
    checkOperation(payload).then(({ status, data, errorMsg }) => {
      if (status && data) {
        syncAttendanceRefer(this.state.request).then(() => {
          this.props.onCancel();
        });
      } else {
        message.warning("已经核算过不可操作");
      }
    });
  }

  // 校验数据
  validate() {
    const { request } = this.state;
    if (!notNull(request.salarySobId) && !notNull(request.salaryYearMonth)) {
      this.refs.weaError.showError();
      this.refs.weaError1.showError();
      return false;
    }
    if (!notNull(request.salarySobId)) {
      this.refs.weaError1.showError();
      return false;
    }
    if (!notNull(request.salaryYearMonth)) {
      this.refs.weaError.showError();
      return false;
    }
    return true;
  }


  render() {
    const { attendanceStore: { importLedgerList } } = this.props;
    return (
      <WeaDialog
        initLoadCss
        className="attendenceImportWrapper"
        style={{ width: 600 }}
        title="引用考勤数据"
        buttons={[
          <Button type="primary" onClick={() => {
            this.handleSync();
          }}>同步</Button>,
          <Button type="default" onClick={() => {
            this.handleHeaderSet();
          }}>表头设置</Button>
        ]}
        visible={this.props.visible}
        onCancel={this.props.onCancel}>
        <Row style={{ marginBottom: "10px" }}>
          <Col span={8}>薪资所属月：</Col>
          <Col span={16}>
            <WeaError
              style={{ width: "100%" }}
              tipPosition="bottom"
              ref="weaError"
              error="请选择薪资所属月">
              <WeaDatePicker
                viewAttr={3}
                format="YYYY-MM"
                style={{ width: "100%" }}
                value={this.state.request.salaryYearMonth}
                onChange={(value) => {
                  if (value === "") this.refs.weaError.showError();
                  this.handleRequestChange({ salaryYearMonth: value });
                }}
              />
            </WeaError>
          </Col>
        </Row>
        <Row style={{ marginBottom: "10px" }}>
          <Col span={8}>薪资账套：</Col>
          <Col span={16}>
            {
              this.state.inited &&
              <WeaError
                style={{ width: "100%" }}
                tipPosition="bottom"
                ref="weaError1"
                error="请选择薪资账套">
                <WeaSelect
                  viewAttr={3}
                  value={this.state.request.salarySobId}
                  style={{ width: "100%" }}
                  options={
                    _.isEmpty(importLedgerList) ? [{ key: "", showname: "" }] :
                      [{ key: "", showname: "" }, ..._.map(importLedgerList, it => ({
                        key: it.id,
                        showname: it.content
                      }))]
                  }
                  onChange={(value) => {
                    if (value === "") this.refs.weaError1.showError();
                    this.handleRequestChange({ salarySobId: value });
                  }}/>
              </WeaError>
            }
          </Col>
        </Row>
        <Row style={{ marginBottom: "10px" }}>
          <Col span={8}>备注</Col>
          <Col span={16}>
            <WeaInput style={{ width: "100%" }} value={this.state.request.description} onChange={(value) => {
              this.handleRequestChange({ description: value });
            }}/>
          </Col>
        </Row>


        <SelectItemModal
          onShowChecked={(value) => {
            this.props.onShowChecked(value);
          }}
          onRestoreDefault={() => {
            this.props.onRestoreDefault();
          }}
          onSetDefault={() => {
            this.props.onSetDefault();
          }}
          onSearch={(value) => {
            this.props.onSearch(value);
          }}
          onSave={(value) => {
            this.props.onSave(value);
          }}
          visible={this.state.headerSetVisible} onCancel={() => this.setState({ headerSetVisible: false })}>
          <SelectItemsWrapper items={this.props.items} title={"考勤模块"} onChange={(value) => {
            this.props.onChange(value);
          }}/>
        </SelectItemModal>
      </WeaDialog>
    );
  }
}