/*
  *
  * 查看工资单详情-列表
  * @Author:    黎永顺
  * @Date:      2024/7/15
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaLocaleProvider } from "ecCom";
import { Spin } from "antd";
import { WeaTableNew } from "comsMobx";
import * as API from "../../../../../apis/payroll";
import { getQueryString } from "../../../../../util/url";

const getLabel = WeaLocaleProvider.getLabel;
const WeaTableComx = WeaTableNew.WeaTable;

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

  componentDidMount() {
    window.addEventListener("message", this.handleReceive, false);
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.isQuery !== this.props.isQuery) this.setState({ updateSum: true }, () => this.getPayrollDetailList());
  }

  handleReceive = async ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    if (type === "init") {
      this.getPayrollDetailList();
    } else if (type === "turn") {
      switch (id) {
        case "PAGEINFO":
          const { pageNum: current, size: pageSize } = params;
          this.setState({
            pageInfo: { ...this.state.pageInfo, current, pageSize },
            updateSum: false
          }, () => this.getPayrollDetailList());
          break;
        default:
          break;
      }
    }
  };
  getPayrollDetailList = () => {
    const { pageInfo } = this.state;
    const salarySendId = getQueryString("id");
    const { payrollStore: { detailListConditionForm: form, salaryTableStore } } = this.props;
    const payload = {
      salarySendId, ...pageInfo, ...form.getFormParams(),
      departmentIds: form.getFormParams().departmentIds ? form.getFormParams().departmentIds.split(",") : [],
      subCompanyIds: form.getFormParams().subCompanyIds ? form.getFormParams().subCompanyIds.split(",") : []
    };
    this.setState({ loading: true });
    API.getPayrollDetailList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { dataKey, pageInfo: pageResult, datas: dataSource } = data;
        const { datas } = dataKey;
        const { pageNum: current, pageSize, total } = pageResult;
        salaryTableStore.getDatas(datas);
        this.setState({ payload, dataSource, pageInfo: { ...pageInfo, current, pageSize, total } });
      }
    });
  };
  getColumns = () => {
    const { payrollStore: { salaryTableStore }, showTotalCell } = this.props;
    const { dataSource, pageInfo, selectedRowKeys, payload, updateSum } = this.state;
    const columns = _.filter(toJS(salaryTableStore.columns), (item) => item.display === "true");
    const sumRowlistUrl = showTotalCell ? "/api/bs/hrmsalary/salaryBill/send/sum" : "";
    if (!_.isEmpty(columns)) {
      this.postMessageToChild({
        dataSource, pageInfo, selectedRowKeys, showTotalCell, calcDetail: true,
        tableScrollHeight: pageInfo.total === 0 ? 90 : 156,
        sumRowlistUrl, payload: { ...payload, updateSum },
        columns: _.map(columns, (it, idx) => ({
          ...it, width: it.oldWidth, fixed: (idx === 1 || idx === 0 || idx === 2) ? "left" : "",
          ellipsis: true
        }))
      });
    }
    return [];
  };
  postMessageToChild = (payload) => {
    const i18n = {
      "共": getLabel(18609, "共"), "条": getLabel(18256, "条"),
      "总计": getLabel(523, "总计")
    };
    const childFrameObj = document.getElementById("atdTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, i18n }), "*");
  };
  handleSetCustomCols = () => {
    const { payrollStore: { salaryTableStore } } = this.props;
    this.setState({ updateSum: true }, () => {
      salaryTableStore.setColSetVisible(true);
      salaryTableStore.tableColSet(true);
    });
  };


  render() {
    const { payrollStore: { salaryTableStore } } = this.props;
    const { loading, pageInfo } = this.state;
    const { pageSize, total } = pageInfo;
    const columnNum = total > 10 ? pageSize + 1 : total + 1;
    return (
      <div style={{
        height: `calc((39px * ${columnNum}) + 126.84px)`,
        maxHeight: "678px",
        minHeight: !total ? "270px" : "inherit"
      }}>
        <Spin spinning={loading}>
          <iframe
            style={{ border: 0, width: "100%", height: "100%" }}
            // src="http://localhost:7607/#/calcTable"
            src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/calcTable"
            id="atdTable"
          />
        </Spin>
        <WeaTableComx style={{ display: "none" }} needScroll={true} columns={this.getColumns()}
                      comsWeaTableStore={salaryTableStore}/>
      </div>
    );
  }
}

export default Index;
