import React from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { toJS } from "mobx";
import { Dropdown, Menu, Radio, Spin } from "antd";

const getLabel = WeaLocaleProvider.getLabel;
@inject("payrollStore")
@observer
export default class TemplateSettingList extends React.Component {
  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollTemplateList } = payrollStore;
    getPayrollTemplateList();
  }

  // 编辑操作按钮
  onEdit = (record) => {
    this.props.onEdit && this.props.onEdit(record);
  };

  // 复制操作按钮
  onCopy = (record) => {
    this.props.onCopy && this.props.onCopy(record);
  };

  // 删除操作按钮
  onDelete = (record) => {
    this.props.onDelete && this.props.onDelete(record);
  };

  // 操作按钮
  onOperatesClick = (record, operate) => {
    switch (operate) {
      case "0": // 编辑
        this.onEdit(record);
        break;
      case "1": // 复制
        this.onCopy(record);
        break;
      case "2": // 删除
        this.onDelete(record);
        break;
    }
  };

  // 默认使用配置
  recordItemChange = (record) => {
    const { payrollStore } = this.props;
    const { changePayrollDefaultUse, getPayrollTemplateList } = payrollStore;
    changePayrollDefaultUse(record.id).then(() => {
      getPayrollTemplateList();
    });
  };

  // 增加编辑功能，重写columns绑定事件
  getColumns = () => {
    const { showOperateBtn, payrollStore } = this.props;
    const { templateTableColumns: columns } = payrollStore;
    let newColumns = [];
    newColumns = _.filter(toJS(columns), item => item.dataIndex !== "id").map(column => {
      let newColumn = column;
      newColumn.render = (text, record) => {
        //前端元素转义
        let valueSpan =
          record[newColumn.dataIndex + "span"] !== undefined
            ? record[newColumn.dataIndex + "span"]
            : record[newColumn.dataIndex];
        switch (newColumn.dataIndex) {
          case "useType":
            return (
              <Radio
                disabled={!showOperateBtn}
                checked={record.useType === "1"}
                onChange={() => this.recordItemChange(record)}
              />
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    return [
      ...newColumns,
      {
        dataIndex: "operate",
        title: getLabel(30585, "操作"),
        width: 150,
        render: (_, record) => {
          return <React.Fragment>
            <a href="javascript:void(0);" style={{ marginRight: 10 }}
               onClick={() => this.onOperatesClick(record, "0")}>{getLabel(501169, "编辑")}</a>
            <a href="javascript:void(0);" style={{ marginRight: 10 }}
               onClick={() => this.onOperatesClick(record, "1")}>{getLabel(77, "复制")}</a>
            <Dropdown
              overlay={
                <Menu onClick={() => this.onOperatesClick(record, "2")}>
                  <Menu.Item key="delete">{getLabel(535052, "删除")}</Menu.Item>
                </Menu>
              }>
              <i className="icon-coms-more more"/>
            </Dropdown>
          </React.Fragment>;
        }
      }
    ];
  };

  render() {
    const { payrollStore } = this.props;
    const {
      templateTableDataSource,
      loading,
      templateTablePageInfo,
      setTemplateTablePageInfo,
      getPayrollTemplateList,
      templateTableSelectedRowKeys,
      setTemplateTableSelectedRowKeys
    } = payrollStore;
    const pagination = {
      ...templateTablePageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        setTemplateTablePageInfo({ ...templateTablePageInfo, current, pageSize }, () => {
          getPayrollTemplateList();
        });
      },
      onChange: current => {
        setTemplateTablePageInfo({ ...templateTablePageInfo, current }, () => {
          getPayrollTemplateList();
        });
      }
    };
    const rowSelection = {
      selectedRowKeys: toJS(templateTableSelectedRowKeys),
      onChange: selectedRowKeys => setTemplateTableSelectedRowKeys(selectedRowKeys)
    };
    return (
      <div>
        {
          loading
            ? <div style={{ width: "100%", textAlign: "center" }}>
              <Spin/>
            </div>
            : <WeaTable
              rowKey="id"
              rowSelection={rowSelection}
              columns={this.getColumns()}
              dataSource={toJS(templateTableDataSource)}
              pagination={pagination}
            />
        }
      </div>
    );
  }
}