import React, { useEffect, useState } from 'react';
import { Button, Card, Col, Empty, Modal, Row } from 'antd';
import { getRoomId } from '@/utils/session';
import { getReportList } from './service';

const ReportPrint: React.FC<{}> = () => {
  //存储list
  const [reportPrintList, setReportPrintList] = useState<any>();

  useEffect(() => {
    //初始化遍历
    getReportList(getRoomId()).then((res) => {
      let list = res.data;
      let arr = Object.keys(list);
      let report: any[] = [];
      if (arr.length == 0) {
        let e = <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
        report.push(e);
      } else {
        for (const key in list) {
          let e = (
            <div>
              <Card title={key} style={{ marginBottom: 8 }}>
                <Row>
                  {list[key]?.map((item: any, index: any) => (
                    <Col span={6}>
                      <Button
                        type="text"
                        key={item.id}
                        onClick={() => onClickLink(item.url)}
                        style={{ color: '#b30000', background: 'rgba(0, 0, 0, 0)' }}
                      >
                        {index + 1}、{item.dicName}
                      </Button>
                    </Col>
                  ))}
                </Row>
              </Card>
            </div>
          );
          report.push(e);
        }
      }
      setReportPrintList(report);
    });
  }, []);

  useEffect(() => {
    window.addEventListener('message', receiveMessage, false); // 监听message事件,用于接收从子页面返回的参数
    return () => window.removeEventListener('message', receiveMessage);
  }, []);

  //点击按钮后的弹窗遮罩
  const editLoading = () => {
    Modal.info({
      title: `文档编辑器打开中，请在弹出窗口打印报表`,
      okText: <></>,
      okButtonProps: { hidden: true },
      cancelButtonProps: { hidden: true },
      centered: true,
    });
  };

  //接收子页面返回参数方法
  const receiveMessage = async (event: any) => {
    if (event !== undefined && event?.data) {
      /*文件保存状态*/
      if (event?.data != null && event?.data != undefined) {
        let FileMsg = event?.data;
        if (
          FileMsg?.type == 'FROM_NTKO_CLOSE' &&
          FileMsg?.text == window.ntkoBrowser.thisNTKOGUID
        ) {
          Modal.destroyAll();
        }
      }
    }
  };

  const onClickLink = (url: string) => {
    editLoading();
    window.ntkoBrowser.openWindow('/Weboffice4Path.html?path=' + encodeURIComponent(url))
  };

  return (
    <Card bordered={false}>
      {reportPrintList}
    </Card>
  );
};

export default ReportPrint;