import React from "react";
import { inject, observer } from "mobx-react";
import { message, Modal, Table, Button } from "antd";
import { WeaInputSearch } from "ecCom";
import AddUserModal from "./addUserModal";
import "./index.less";

@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();
    // window.setLayoutWindow=window;
  }

  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,
        userTableStore
      }
    } = this.props;
    if (includeType == 1) {
      getLedgerPersonRangeInclude({
        salarySobId: salarySobId,
        targetName: value,
        current: userTableStore.pageNum,
        pageSize: userTableStore.pageSize,
      });
    } else {
      getLedgerPersonRangeExclude({
        salarySobId: salarySobId,
        targetName: value,
        current: userTableStore.pageNum,
        pageSize: userTableStore.pageSize,
      });
    }
  };

  render() {
    const {
      ledgerStore: {
        loading,
        includeType,
        salarySobId,
        userTableStore,setUserTableStore,
        addUserModalVisible,
        setAddUserModalVisible,
        baseInfoRequest,
        getLedgerPersonRangeInclude,
        getLedgerPersonRangeExclude
      }
    } = 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 style={{ margin: "0 4px" }}>|</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'>
              <Button type="primary"
                      size="small"
                      onClick={() => {
                        this.handleTabDelete();
                      }}
              ><span className="icon-coms-form-delete-hot" title="删除"></span></Button>
              <Button type="primary"
                      size="small"
                      style={{ marginRight: 10 }}
                      onClick={() => {
                        setAddUserModalVisible(true);
                      }}
              ><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
            </div>
          }
        </div>
        <div className="slideRefereUserTableWrapper">
          <Table
            loading={loading}
            rowSelection={rowSelection}
            dataSource={list}
            columns={columns}
            pagination={{
              total: userTableStore.total,
              current: userTableStore.pageNum,
              pageSize: userTableStore.pageSize,
              showTotal: total => `共 ${total} 条`,
              showQuickJumper: true,
              showSizeChanger: true,
              pageSizeOptions: ["10", "20", "50", "100"],
              onShowSizeChange: (current, pageSize) => {
                setUserTableStore({...userTableStore, pageNum: current, pageSize})
                if (includeType == 1) {
                  getLedgerPersonRangeInclude({
                    salarySobId: salarySobId,
                    current,
                    pageSize
                  });
                } else {
                  getLedgerPersonRangeExclude({
                    salarySobId: salarySobId,
                    current,
                    pageSize
                  });
                }
              },
              onChange: current => {
                setUserTableStore({ ...userTableStore, pageNum: current })
                if (includeType == 1) {
                  getLedgerPersonRangeInclude({
                    salarySobId: salarySobId,
                    current,
                    pageSize: userTableStore.pageSize
                  });
                } else {
                  getLedgerPersonRangeExclude({
                    salarySobId: salarySobId,
                    current,
                    pageSize: userTableStore.pageSize
                  });
                }
              }
            }}
          />
        </div>

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