import React from "react";
import { Modal, Button, Row, Col, Radio } from "antd";
import { WeaSelect, WeaBrowser } from "ecCom";
import { inject, observer } from "mobx-react";
import RequiredLabelTip from "../../components/requiredLabelTip";

const objectOptions = [
  {
    key: "EMPLOYEE",
    showname: "人员",
    selected: false,
  },
  {
    key: "SUBCOMPANY",
    showname: "分部",
    selected: false,
  },
  {
    key: "DEPT",
    showname: "部门",
    selected: false,
  },
  {
    key: "POSITION",
    showname: "岗位",
    selected: false,
  },
];

@inject("ledgerStore")
@observer
export default class AddUserModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "EMPLOYEE",
      radioValue: "ALL",
      ids: "",
    };
  }

  onRadioChange(e) {
    this.setState({ radioValue: e.target.value });
  }

  // 保存
  handleSave() {
    const {
      ledgerStore: { saveLedgerPersonRange, salarySobId, includeType },
    } = this.props;
    saveLedgerPersonRange({
      salarySobId: salarySobId,
      includeType: includeType,
      employeeStatus: this.state.radioValue,
      targetParams: this.state.ids
        .split(",")
        .map((id) => ({ targetType: this.state.selectedKey, targetId: id })),
    });
  }

  // 重置
  handleReset() {
    this.setState({
      selectedKey: "EMPLOYEE",
      radioValue: "ALL",
      ids: "",
    });
  }

  render() {
    return (
      <Modal
        visible={this.props.visible}
        onCancel={() => {
          this.props.onCancel();
        }}
        width={600}
        title="关联人员"
        footer={
          <div style={{ display: "inlne-block" }}>
            <Button
              type="primary"
              onClick={() => {
                this.handleSave();
              }}>
              保存
            </Button>
            <Button
              type="default"
              onClick={() => {
                this.handleReset();
              }}>
              重置
            </Button>
          </div>
        }>
        <div style={{ padding: "20px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>
              对象类型
              <RequiredLabelTip />
            </Col>
            <Col span={16}>
              <div style={{ display: "inline-block", verticalAlign: "top" }}>
                <WeaSelect
                  style={{ height: "30px", marginRight: "10px" }}
                  options={objectOptions}
                  value={this.state.selectedKey}
                  onChange={(value) => {
                    this.setState({ selectedKey: value, ids: "" });
                  }}
                />
              </div>
              <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                {this.state.selectedKey == "EMPLOYEE" && (
                  <WeaBrowser
                    type={17}
                    title={"人员选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "DEPT" && (
                  <WeaBrowser
                    type={57}
                    title={"部门选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "SUBCOMPANY" && (
                  <WeaBrowser
                    type={164}
                    title={"分部选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "POSITION" && (
                  <WeaBrowser
                    type={278}
                    title={"岗位选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
              </div>
            </Col>
          </Row>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>
              选择员工状态
              <RequiredLabelTip />
            </Col>
            <Col span={16}>
              <Radio.Group
                onChange={(e) => this.onRadioChange(e)}
                value={this.state.radioValue}>
                <Radio value={"ALL"}>全部</Radio>
                <Radio value={"NORMAL"}>在职</Radio>
                <Radio value={"UNAVAILABLE"}>离职</Radio>
              </Radio.Group>
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}