import React from "react";
import { Button, Col, Row } from "antd";
import { WeaBrowser, WeaCheckbox, WeaDialog, WeaError, WeaSelect } from "ecCom";
import "../ledger/index.less";

export default class AddTaxAgentModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "EMPLOYEE",
      checkboxValue: "",
      checkAll: "0",
      ids: ""
    };
  }

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

  // 保存
  handleSave = () => {
    const { onTaxAgentSave } = this.props;
    const { checkboxValue, ids, selectedKey } = this.state;
    const payload = {
      employeeStatus: checkboxValue.split(","),
      targetParams: _.map(ids.split(","), (it) => ({
        targetType: selectedKey,
        targetId: it
      }))
    };
    if (_.isEmpty(ids) && _.isEmpty(checkboxValue)) {
      this.refs.weaError.showError();
      this.refs.weaError1.showError();
      return;
    }
    if (_.isEmpty(ids)) {
      this.refs.weaError.showError();
      return;
    }
    if (_.isEmpty(checkboxValue)) {
      this.refs.weaError1.showError();
      return;
    }
    onTaxAgentSave && onTaxAgentSave(payload);
  };

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

  render() {
    const { employeeStatus, targetTypeList, visible, onCancel, loading } = this.props;
    return (
      <WeaDialog
        visible={visible}
        onCancel={() => {
          this.handleReset();
          onCancel();
        }}
        style={{ width: 600 }}
        initLoadCss
        className="associatesWrapper"
        title="关联人员"
        buttons={[
          <Button type="primary" laoding={loading} onClick={this.handleSave}>
            保存
          </Button>,
          <Button type="default" onClick={this.handleReset}>
            重置
          </Button>
        ]}>
        <div style={{ padding: "20px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>对象类型</Col>
            <Col span={16}>
              <div style={{ display: "inline-block", marginRight: 12 }}>
                <WeaSelect
                  style={{ height: "30px" }}
                  options={_.map(targetTypeList, (it) => ({
                    ...it,
                    key: it.id,
                    showname: it.name,
                    selected: false
                  }))}
                  value={this.state.selectedKey}
                  onChange={(value) => {
                    this.setState({ selectedKey: value, ids: "" });
                  }}
                />
              </div>
              <div style={{ display: "inline-block", verticalAlign: "middle", lineHeight: 0 }}>
                {this.state.selectedKey === "EMPLOYEE" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择人员">
                    <WeaBrowser
                      type={17}
                      viewAttr={3}
                      value={this.state.ids}
                      title={"人员选择"}
                      isSingle={false}
                      inputStyle={{ width: 200 }}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "DEPT" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择部门">
                    <WeaBrowser
                      type={57}
                      viewAttr={3}
                      title="部门选择"
                      isSingle={false}
                      inputStyle={{ width: 200 }}
                      value={this.state.ids}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "SUBCOMPANY" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择分部">
                    <WeaBrowser
                      type={164}
                      viewAttr={3}
                      title={"分部选择"}
                      isSingle={false}
                      inputStyle={{ width: 200 }}
                      value={this.state.ids}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids });
                      }}
                    />
                  </WeaError>
                )}
                {this.state.selectedKey === "POSITION" && (
                  <WeaError tipPosition="bottom"
                            style={{ width: "100%" }}
                            ref="weaError"
                            error="请选择岗位">
                    <WeaBrowser
                      type={278}
                      viewAttr={3}
                      title={"岗位选择"}
                      isSingle={false}
                      value={this.state.ids}
                      inputStyle={{ width: 200 }}
                      onChange={(ids, names, datas) => {
                        this.setState({ ids });
                      }}
                    />
                  </WeaError>
                )}
              </div>
            </Col>
          </Row>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={8}>选择员工状态</Col>
            <Col span={16}>
              <WeaError
                tipPosition="bottom"
                style={{ width: "100%" }}
                ref="weaError1"
                error="请选择员工状态">
                <WeaCheckbox value={this.state.checkAll} content="全选" onChange={(checkAll) => {
                  if (checkAll === "1") {
                    const checked = _.map(employeeStatus, it => it.id);
                    this.setState({
                      checkAll: '1',
                      checkboxValue: checked.join(",")
                    });
                  } else {
                    this.setState({
                      checkAll: '0',
                      checkboxValue: ''
                    });
                  }
                }}/>
                <WeaSelect
                  viewAttr={3}
                  detailtype={2}
                  options={_.map(employeeStatus, (it) => ({
                    showname: it.name,
                    key: it.id
                  }))}
                  value={this.state.checkboxValue}
                  onChange={(value) => this.onCheckboxChange(value)}
                />
              </WeaError>
            </Col>
          </Row>
        </div>
      </WeaDialog>
    );
  }
}