import React, { FC, useEffect, useState } from "react";
import { Button, Space, Table, Tooltip, Typography } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { exceptStr, paginationFun } from "@/utils/common";
import { defaultPage, IPage } from "@/common/types";
import styles from "@/pages/atdTable/components/index.less";
import cs from "classnames";

const { Text } = Typography;
const CommonTable: FC = (props) => {
  const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
  const [columns, setColumns] = useState<Array<any>>([]);
  const [dataSource, setDataSource] = useState<Array<any>>([]);
  const [selected, setSelected] = useState<Array<string>>([]);
  const [i18n, setI18n] = useState<Partial<{}>>({});

  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, i18n, selectedRowKeys, selectedKey, azOperate } = data;
      const { current: pageNum, pageSize: size, total } = pageInfo;
      setDataSource(dataSource);
      setI18n(i18n);
      setPageInfo({ pageNum, size, total });
      setSelected(selectedRowKeys);
      setColumns(azOperate ? [
        ...columns,
        {
          title: i18n["操作"],
          dataIndex: "operate",
          fixed: "right",
          width: 120,
          render: (_: any, record: any) => {
            return selectedKey === "list" ? (
              <Space>
                <Button type="link" onClick={() => handleEdit(record)}>{i18n["编辑"]}</Button>
                <Button type="link" onClick={() => handleDelete(record)}>{i18n["删除"]}</Button>
              </Space>
            ) : null;
          }
        }
      ] : columns);
    }
  };
  const handleEdit = (record: any) => {
    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { ...record } } }, "*");
  };
  const handleDelete = (record: any) => {
    window.parent.postMessage({ type: "turn", payload: { id: "DELETE", params: { ...record } } }, "*");
  };
  const sizeChange = (pageobj: IPage) => {
  };
  const onChange = (pageobj: IPage) => {
    setPageInfo({ ...pageInfo, ...pageobj });
    window.parent.postMessage(
      {
        type: "turn",
        payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
      },
      "*"
    );
  };
  const rowSelection = {
    selectedRowKeys: selected,
    columnWidth: 80,
    onChange: (selectedRowKeys: Array<any>) => {
      setSelected(selectedRowKeys);
      window.parent.postMessage(
        {
          type: "turn",
          payload: { id: "ROWSELECT", params: { selectedRowKeys } }
        },
        "*"
      );
    }
  };
  return <Table
    rowKey="id"
    rowSelection={rowSelection}
    className={styles.tableWrapper}
    columns={_.map(columns, it => {
      if (it.dataIndex === "declareStatusDesc") {
        return {
          ...it,
          render: (text: string, record: any) => (<Space>
            <span className={cs({ [styles["danger"]]: record?.declareStatus === "DECLARE_FAIL" })}>{text}</span>
            {
              record?.declareErrorMsg &&
              <Tooltip placement="top" title={record?.declareErrorMsg}>
                <ExclamationCircleFilled style={{ color: "orange", fontSize: 16 }}/>
              </Tooltip>
            }
          </Space>)
        };
      }
      return { ...it };
    })}
    dataSource={dataSource}
    bordered
    size="small"
    scroll={{ x: 1200, y: `calc(100vh - 85px)` }}
    pagination={{
      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
      size: "default"
    }}
  />;
};

export default CommonTable;
