/*
 * Author: 黎永顺
 * name: 社保福利台账总览-穿透列表
 * Description:
 * Date: 2023/10/17
 */
import React, { FunctionComponent, useEffect, useState } from "react";
import { Table, Typography } from "antd";
import styles from "@/pages/atdTable/components/index.less";
import { exceptStr, paginationFun } from "@/utils/common";
import { IPage } from "@/common/types";
import { ColumnType } from "antd/lib/table";
import type { PaginationData } from "rc-pagination";
import WelfareFixedTotal from "@/pages/welfareLedgerTable/welfareFixedTotal";

interface OwnProps {
}

type Props = OwnProps;
const { Text } = Typography;

const Index: FunctionComponent<Props> = (props) => {
  const [columns, setColumns] = useState<ColumnType<any>[]>([]);
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
  const [sumRowlistUrl, setSumRowlistUrl] = useState<string>("");
  const [payload, setPayload] = useState<string>("");

  useEffect(() => {
    window.parent.postMessage({ type: "init" }, "*");
    window.addEventListener("message", receiveMessageFromIndex, false);
    return () => {
      window.removeEventListener("message", receiveMessageFromIndex, false);
    };
  }, []);
  const receiveMessageFromIndex = (event: any) => {
    const data: any = exceptStr(event.data);
    if (!_.isEmpty(data)) {
      const {
        columns, dataSource, pageInfo, sumRowlistUrl = "", payload = {}
      } = data;
      setSumRowlistUrl(sumRowlistUrl);
      setPayload(payload);
      setPageInfo(pageInfo);
      setDataSource(dataSource);
      setColumns(_.map(columns, it => {
        if (it.dataIndex === "userName" || it.dataIndex === "workcode") {
          return {
            ...it, width: 140, title: (
              <span dangerouslySetInnerHTML={{ __html: it.title }}></span>
            ), fixed: "left", ellipsis: true
          };
        }
        return {
          ...it, width: 140, ellipsis: true, title: (
            <span dangerouslySetInnerHTML={{ __html: it.title }}></span>
          )
        };
      }));
    }
  };
  const sizeChange = (pageobj: IPage) => {
  };
  const onChange = (pageobj: IPage) => {
    setPageInfo(() => {
      window.parent.postMessage(
        {
          type: "turn",
          payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
        },
        "*"
      );
      return { ...pageInfo, ...pageobj };
    });
  };
  return (<Table
    rowKey="id" size="small" className={styles.tableWrapper}
    columns={columns} dataSource={dataSource}
    scroll={{ x: 1200, y: `calc(100vh - 120px)` }}
    pagination={{
      ...paginationFun(pageInfo, sizeChange, onChange),
      size: "default"
    }}
    summary={() => (
      <Table.Summary fixed>
        <Table.Summary.Row>
          <Table.Summary.Cell index={0} align="center"><Text type="danger">总计</Text></Table.Summary.Cell>
          <WelfareFixedTotal columns={columns} dataSourceUrl={sumRowlistUrl} payload={payload}/>
        </Table.Summary.Row>
      </Table.Summary>
    )}
  />);
};

export default Index;
