/*
 * Author: 黎永顺
 * name: 工资单发放重构-工资单发放列表
 * Description:
 * Date: 2023/10/12
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { Dropdown, Menu, message, Tag } from "antd";
import { getPayrollList } from "../../../../apis/payroll";
import moment from "moment";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, columns: [], dataSource: [],
      pageInfo: { current: 1, pageSize: 10, total: 0 }
    };
  }

  componentDidMount() {
    this.getPayrollList(this.props);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.isRefresh !== this.props.isRefresh) this.getPayrollList(nextProps);
  }

  getPayrollList = (props) => {
    const { pageInfo } = this.state;
    const { queryParams } = props;
    const { dateRange: salaryYearMonth } = queryParams;
    const params = { salaryYearMonth };
    const payload = { ...pageInfo, ...params };
    this.setState({ loading: true });
    getPayrollList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, pageInfo: { pageNum, pageSize, total, list: dataSource } } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
          columns: _.map(_.filter(columns, it => it.column !== "acctTimes"), o => {
            const { column } = o;
            if (column === "salarySob") {
              return {
                dataIndex: o.column, title: o.text, width: o.width,
                render: (text, record) => {
                  const { acctTimes, salaryAcctType } = record;
                  return <div className="salarySobNameWrapper">
                    <span title={text}>{text}</span>
                    <div className="salarySobNameTagWrapper">
                      {
                        salaryAcctType === 1 &&
                        <Tag color="yellow">{getLabel(388064, "补发")}</Tag>
                      }
                      <Tag color="blue">{`${getLabel(15323, "第")}${acctTimes}${getLabel(18929, "次")}`}</Tag>
                    </div>
                  </div>;
                }
              };
            }
            if (column === "salaryYearMonth" || column === "lastSendTime") {
              return {
                dataIndex: o.column, title: o.text, width: o.width,
                render: (text) => {
                  const time = moment(parseInt(text)).format("YYYY-MM");
                  return <span title={time}>{time}</span>;
                }
              };
            }
            return { dataIndex: o.column, title: o.text, width: o.width };
          })
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleOpts = ({ key }, record) => {
    const { id, templateId } = record;
    switch (key) {
      case "template":
        if (templateId) {
          this.props.onUpdateTemp(templateId);
        } else {
          message.warning(getLabel(543602, "请设置默认模板"));
        }
        break;
      case "log":
        this.props.onFilterLog(key, id);
        break;
      default:
        break;
    }
  };

  render() {
    const { loading, dataSource, columns, pageInfo } = this.state;
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.getPayrollList(this.props));
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.getPayrollList(this.props));
      }
    };
    return (
      <WeaTable
        rowKey="id"
        dataSource={dataSource} loading={loading} pagination={pagination}
        columns={[
          ...columns,
          {
            dataIndex: "operate", title: getLabel(30585, "操作"), width: 170,
            render: (__, record) => {
              const { canSeeDetail, sendNum, sendTotal, haveBackCalc, salaryAcctType, id, ackFeedbackStatus } = record;
              //显示更新模板
              const showGrant = haveBackCalc === 1 && salaryAcctType === 0;
              return <React.Fragment>
                {
                  showOperateBtn &&
                  <a
                    href={`/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant?id=${id}&ackFeedbackStatus=${ackFeedbackStatus}`}
                    style={{ marginRight: 10 }} target="_blank">{getLabel(542702, "发放")}</a>
                }
                {
                  canSeeDetail &&
                  <a href={`/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=${id}`}
                     style={{ marginRight: 10 }} target="_blank"
                  >{getLabel(83110, "查看详情")}</a>
                }
                {
                  sendNum === sendTotal && !showGrant &&
                  <Dropdown
                    overlay={<Menu onClick={e => this.handleOpts(e, record)}>
                      <Menu.Item key="log">{getLabel(545781, "操作日志")}</Menu.Item>
                    </Menu>
                    }
                  >
                    <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
                  </Dropdown>
                }
                {
                  sendNum !== sendTotal && !showGrant &&
                  <Dropdown
                    overlay={<Menu onClick={e => this.handleOpts(e, record)}>
                      <Menu.Item key="template">{getLabel(543603, "更新模板")}</Menu.Item>
                      <Menu.Item key="log">{getLabel(545781, "操作日志")}</Menu.Item>
                    </Menu>
                    }
                  >
                    <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
                  </Dropdown>
                }
              </React.Fragment>;
            }
          }
        ]}
      />
    );
  }
}

export default Index;