import React from "react";
import { inject, observer } from "mobx-react";
import { Icon, Table, message, Modal } from "antd";
import { WeaInputSearch } from "ecCom";
import { slideStep2Columns, dataSource } from "./columns";
import AddUserModal from "./addUserModal";

@inject("ledgerStore")
@observer
export default class SlideRefereUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      addUserModalVisible: false,
      selectedRowKeys: [],
      searchValue: ""
    };
  }

  handleTabClick(tab) {
    const {
      ledgerStore: {
        setIncludeType,
        getLedgerPersonRangeInclude,
        salarySobId,
        getLedgerPersonRangeExclude
      }
    } = this.props;
    setIncludeType(tab);
    if (tab == 1) {
      getLedgerPersonRangeInclude({ salarySobId: salarySobId });
    } else {
      getLedgerPersonRangeExclude({ salarySobId: salarySobId });
    }
  }

  componentWillMount() {
    const { edit } = this.props;
    const {
      ledgerStore: {
        getLedgerPersonRangeInclude,
        salarySobId,
        getLedgerBasicForm
      }
    } = this.props;
    getLedgerPersonRangeInclude({ salarySobId: salarySobId });
    if (edit) getLedgerBasicForm();
  }

  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  handleTabDelete = () => {
    const { ledgerStore: { deleteLedgerPersonRange } } = this.props;
    if (this.state.selectedRowKeys.length == 0) {
      message.warning("未选择条目");
      return;
    }
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        deleteLedgerPersonRange(this.state.selectedRowKeys);
      },
      onCancel: () => {}
    });
  };

  handleSearch = value => {
    const {
      ledgerStore: {
        includeType,
        salarySobId,
        getLedgerPersonRangeInclude,
        getLedgerPersonRangeExclude
      }
    } = this.props;
    if (includeType == 1) {
      getLedgerPersonRangeInclude({
        salarySobId: salarySobId,
        targetName: value
      });
    } else {
      getLedgerPersonRangeExclude({
        salarySobId: salarySobId,
        targetName: value
      });
    }
  };

  render() {
    const {
      ledgerStore: {
        includeType,
        userTableStore,
        addUserModalVisible,
        setAddUserModalVisible,
        baseInfoRequest
      }
    } = this.props;
    const { canEdit = "true" } = baseInfoRequest;
    let { columns, list } = userTableStore;
    const { selectedRowKeys } = this.state;
    columns = columns || [];
    list = list || [];

    list.map(item => (item.key = item.id));

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };

    return (
      <div className="slideRefereUser">
        <div className="refereUserHeader">
          <div className="headerLeft">
            <span
              className={includeType == 1 ? "selectedCrumbs" : "tabItem"}
              onClick={() => {
                this.handleTabClick(1);
              }}>
              关联人员范围
            </span>{" "}
            {"  "} | {"  "}{" "}
            <span
              className={includeType == 0 ? "selectedCrumbs" : "tabItem"}
              onClick={() => {
                this.handleTabClick(0);
              }}>
              从范围中排除
            </span>
          </div>
          <WeaInputSearch
            className="searchInput"
            value={this.state.searchValue}
            onChange={value => {
              this.setState({ searchValue: value });
            }}
            onSearch={value => {
              this.handleSearch(value);
            }}
          />
          {canEdit === "true" &&
            <div className="headerIcon">
              <Icon
                className="iconItem"
                type="minus-square"
                onClick={() => {
                  this.handleTabDelete();
                }}
              />
              <Icon
                className="iconItem"
                type="plus-square"
                onClick={() => {
                  setAddUserModalVisible(true);
                }}
              />
            </div>}
        </div>
        <div>
          <Table
            rowSelection={rowSelection}
            dataSource={list}
            columns={columns}
            pagination={{
              total: userTableStore.total,
              showTotal: total => `共 ${total} 条`,
              current: userTableStore.pageNum
            }}
          />
        </div>

        {addUserModalVisible &&
          <AddUserModal
            visible={addUserModalVisible}
            onCancel={() => {
              setAddUserModalVisible(false);
            }}
          />}
      </div>
    );
  }
}