import React from "react";
import { message, Modal } from "antd";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { inject, observer } from "mobx-react";
import { deleteSalaryItem } from "../../apis/archive";
import SalaryArchiveEditAdjLogRecord from "./salaryArchiveEditAdjLogRecord";

const { getLabel } = WeaLocaleProvider;
@inject("salaryFileStore")
@observer
export default class SalaryItemChangeList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      changeSalaryVisible: false,
      adjLogRecordDialog: {
        visible: false, title: "", id: "", salaryArchiveId: ""
      },
      recordId: ""
    };
    this.searchParams = {};
  }

  componentWillMount() {
    const { salaryFileStore: { fetchSingleSalaryItemList } } = this.props;
    this.searchParams = { salaryArchiveId: this.props.id, current: 1 };
    fetchSingleSalaryItemList(this.searchParams);
  }

  handleEdit = (record) => {
    this.setState({
      adjLogRecordDialog: {
        ...this.state.adjLogRecordDialog,
        visible: true, title: getLabel(542686, "调薪"), id: record.id,
        salaryArchiveId: this.props.id
      }
    });
  };
  deleteSalaryItem = (salaryArchiveItemId) => {
    Modal.confirm({
      title: "信息确认",
      content: "是否删除该调整数据",
      onOk: () => {
        const { salaryFileStore: { fetchSingleSalaryItemList } } = this.props;
        deleteSalaryItem({ salaryArchiveItemId }).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.searchParams = { salaryArchiveId: this.props.id, current: 1 };
            fetchSingleSalaryItemList(this.searchParams);
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      },
      onCancel: () => {
      }
    });
  };

  // 获取Columns
  getColumns = () => {
    const { salaryFileStore: { singleSalaryItemList }, selectedKey } = this.props;
    let columns = [];
    if (singleSalaryItemList.columns) {
      columns = _.map([...singleSalaryItemList.columns], o => {
        const { dataIndex } = o;
        if (dataIndex === "adjustItem") {
          return { ...o, width: 100, fixed: "left", render: text => (<span title={text}>{text}</span>) };
        }
        let width = "";
        switch (o) {
          case "adjustBefore":
          case "adjustAfter":
          case "operateTime":
            width = "20%";
            break;
          case "effectiveTime":
            width = "15%";
            break;
          default:
            width = "10%";
            break;
        }
        return { ...o, width, render: text => (<span title={text}>{text}</span>) };
      });
      if (selectedKey === "fixed") {
        columns = [...columns, {
          dataIndex: "operate", fixed: "right", width: 120, title: "操作",
          render: (text, record) => {
            return <div className="optWrapper">
              <a href="javascript:void(0);" className="mr10" onClick={() => this.handleEdit(record)}>编辑</a>
              <a href="javascript:void(0);"
                 onClick={() => this.deleteSalaryItem(record.id)}>{getLabel(535052, "删除")}</a>
            </div>;
          }
        }];
      }
    }
    return columns;
  };

  // 页面跳转
  handlePageChange(value) {
    this.searchParams.current = value;
    const { salaryFileStore: { fetchSingleSalaryItemList } } = this.props;
    fetchSingleSalaryItemList(this.searchParams);
  }

  render() {
    const { salaryFileStore } = this.props, { adjLogRecordDialog } = this.state;
    const { singleSalaryItemList } = salaryFileStore;
    const pageInfo = { current: singleSalaryItemList.pageNum, pageSize: 10, total: singleSalaryItemList.total };
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      onChange: current => this.handlePageChange(current)
    };
    return (
      <div>
        <WeaTable
          columns={this.getColumns()} dataSource={singleSalaryItemList.list ? singleSalaryItemList.list : []}
          pagination={pagination} scroll={{ x: 800 }} className="adjustItem-layout"
        />
        <SalaryArchiveEditAdjLogRecord
          {...adjLogRecordDialog}
          onCancel={() => this.setState({
            adjLogRecordDialog: {
              adjLogRecordDialog, visible: false, title: "", id: "", salaryArchiveId: ""
            }
          })}
        />
      </div>
    );
  }
}