import React from "react";
import { Button, Col, Row } from "antd";
import { WeaBrowser, WeaCheckbox, WeaDialog, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import "./index.less";

const employeeStatus = [
  { key: "TRIAL", showname: "试用" },
  { key: "FORMAL", showname: "正式" },
  { key: "TEMPORARY", showname: "临时" },
  { key: "DELAY", showname: "试用延期" },
  { key: "FIRE", showname: "解雇" },
  { key: "DEPARTURE", showname: "离职" },
  { key: "RETIRED", showname: "退休" }
];
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: "",
      checkAll: "0",
      ids: ""
    };
  }

  onRadioChange(radioValue) {
    const checked = _.map(employeeStatus, it => it.key);
    this.setState({ radioValue }, () => {
      const { radioValue } = this.state;
      const bool = _.every(checked, it => radioValue.indexOf(it) !== -1);
      if (bool) {
        this.setState({
          checkAll: "1"
        });
      } else {
        this.setState({
          checkAll: "0"
        });
      }
    });
  }

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

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

  render() {
    return (
      <WeaDialog
        visible={this.props.visible}
        onCancel={() => {
          this.props.onCancel();
        }}
        initLoadCss
        className="associatesWrapper"
        style={{ width: 600 }}
        title="关联人员"
        buttons={[
          <Button
            type="primary"
            onClick={() => {
              this.handleSave();
            }}>
            保存
          </Button>,
          <Button
            type="default"
            onClick={() => {
              this.handleReset();
            }}>
            重置
          </Button>
        ]}>
        <div style={{ padding: "16px 60px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={5}>对象类型:</Col>
            <Col span={16}>
              <div style={{ display: "inline-block", verticalAlign: "top", marginRight: 10 }}>
                <WeaSelect
                  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}
                    viewAttr={3}
                    title={"人员选择"}
                    isSingle={false}
                    inputStyle={{ width: 200 }}
                    value={this.state.ids}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "DEPT" && (
                  <WeaBrowser
                    type={57}
                    viewAttr={3}
                    title={"部门选择"}
                    isSingle={false}
                    value={this.state.ids}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "SUBCOMPANY" && (
                  <WeaBrowser
                    type={164}
                    viewAttr={3}
                    title={"分部选择"}
                    isSingle={false}
                    value={this.state.ids}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
                {this.state.selectedKey == "POSITION" && (
                  <WeaBrowser
                    type={278}
                    viewAttr={3}
                    title={"岗位选择"}
                    isSingle={false}
                    value={this.state.ids}
                    inputStyle={{ width: 200 }}
                    onChange={(ids, names, datas) => {
                      this.setState({ ids });
                    }}
                  />
                )}
              </div>
            </Col>
          </Row>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={5}>选择员工状态:</Col>
            <Col span={16}>
              <WeaCheckbox value={this.state.checkAll} content="全选" onChange={(checkAll) => {
                if (checkAll === "1") {
                  const checked = _.map(employeeStatus, it => it.key);
                  this.setState({
                    checkAll: "1",
                    radioValue: checked.join(",")
                  });
                } else {
                  this.setState({
                    checkAll: "0",
                    radioValue: ""
                  });
                }
              }}/>
              <WeaSelect
                viewAttr={3}
                detailtype={2}
                onChange={(e) => this.onRadioChange(e)}
                value={this.state.radioValue}
                options={employeeStatus}
              />
            </Col>
          </Row>
        </div>
      </WeaDialog>
    );
  }
}