import React from "react";
import { inject, observer } from "mobx-react";
import { Dropdown, Menu, message, Tag } from "antd";
import moment from "moment";
import CustomPaginationTable from "../../components/customPaginationTable";
import "../calculate/index.less";

@inject("payrollStore", "taxAgentStore")
@observer
export default class SalarySendList extends React.Component {
  constructor(props) {
    super(props);
    this.searchParams = { salaryYearMonth: this.props.salaryYearMonth };
    this.pageInfo = { current: 1, pageSize: 10 };
  }

  componentDidMount() {
    const { payrollStore: { getPayrollList } } = this.props;
    getPayrollList(this.searchParams);
  }

  // 发放回调
  handleGrant(record) {
    window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant?id=${record.id}&ackFeedbackStatus=${record.ackFeedbackStatus}`);
  }

  // 查看详情
  handleShowDetail(record) {
    window.open(
      "/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=" +
      record.id
    );
  }

  // 更新模板
  handleUpdateTemplate = (record) => {
    let templateRecord = {};
    templateRecord.id = record.templateId;
    if (!record.templateId) {
      message.warning("请设置默认模板");
      return;
    }
    this.props.onEditTemplate && this.props.onEditTemplate(templateRecord);
  };

  // 获取表头数据
  getColumns = () => {
    const { payrollStore: { salarySendTableStore }, taxAgentStore: { showOperateBtn } } = this.props;
    const { columns } = salarySendTableStore;
    if (!columns) return [];
    let result = columns.filter(item => (item.hide === "false" && item.dataIndex !== "acctTimes"));
    result.map(item => {
      if (item.dataIndex === "salaryYearMonth") {
        item.render = (text, record) => {
          return (
            <span>
              {moment(parseInt(text)).format("YYYY-MM")}
            </span>
          );
        };
      } else if (item.dataIndex === "lastSendTime") {
        item.render = (text, record) => {
          return (
            <span>
              {moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}
            </span>
          );
        };
      } else if (item.dataIndex === "salarySob") {
        item.width = 300;
        item.render = (text, record) => {
          return <div className="salarySobNameWrapper">
            <span>{text}</span>
            <div className="salarySobNameTagWrapper">
              {
                record.salaryAcctType === 1 &&
                <Tag color="yellow">补发</Tag>
              }
              <Tag color="blue">{`第${record.acctTimes}次`}</Tag>
            </div>
          </div>;
        };
      }
    });
    showOperateBtn
      ?
      (result = result.concat([
        {
          title: "操作",
          key: "operate",
          width: 150,
          render: (text, record) => {
            const { sendNum, sendTotal, salaryAcctType, haveBackCalc, canSeeDetail } = record;
            //显示发放
            const showGrant = haveBackCalc === 1 && salaryAcctType === 0;
            return (
              <React.Fragment>
                <a href="javascript:void(0);" onClick={() => this.handleGrant(record)}
                   style={{ marginRight: 10 }}>发放</a>
                {
                  canSeeDetail &&
                  <a href="javascript:void(0);" onClick={() => this.handleShowDetail(record)}
                     style={{ marginRight: 10 }}>查看详情</a>
                }
                {
                  sendNum !== sendTotal && !showGrant &&
                  <Dropdown
                    overlay={
                      <Menu onClick={() => this.handleUpdateTemplate(record)}>
                        <Menu.Item key="delete">更新模板</Menu.Item>
                      </Menu>
                    }>
                    <i className="icon-coms-more more"/>
                  </Dropdown>
                }
              </React.Fragment>
            );
          }
        }
      ]))
      :
      (result = result.concat([
        {
          title: "操作",
          key: "operate",
          render: (text, record) => {
            const { salaryAcctType } = record;
            return (
              <span>
                {
                  salaryAcctType === 0 &&
                  <a href="javascript:void(0);" onClick={() => this.handleShowDetail(record)}>查看详情</a>
                }
              </span>
            );
          }
        }
      ]));
    return result;
  };

  render() {
    const { payrollStore } = this.props;
    const {
      salarySendDataSource,
      pageInfo,
      loading
    } = payrollStore;
    return (
      <div>
        <CustomPaginationTable
          loading={loading}
          columns={this.getColumns()}
          dataSource={salarySendDataSource}
          total={pageInfo.total}
          current={pageInfo.pageNum}
          pageSize={this.pageInfo.pageSize}
          onPageChange={value => {
            this.pageInfo.current = value;
            this.props.handleListDataPageChange(value, this.pageInfo);
          }}
          onShowSizeChange={(current, pageSize) => {
            this.pageInfo = { current, pageSize };
            this.props.handleListShowSizeChange(this.pageInfo);
          }}
        />
      </div>
    );
  }
}