import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button, Modal, Table } from "antd";
import { B2_APIlookReDo } from "@/store/action/B2Scene";
import { MessageFu } from "@/utils/message";
import dayjs from "dayjs";
import ExportJsonExcel from "js-export-excel";

type ListType = {
  id: string;
  city: string;
  province: string;
  region: string;
  roomNum: string;
  sceneCode: string;
};

type Props = {
  closePageFu: () => void;
};

function LookReDo({ closePageFu }: Props) {
  const [list, setList] = useState<ListType[]>([]);

  const geiListFu = useCallback(async () => {
    const res = await B2_APIlookReDo();
    if (res.code === 0) {
      setList(
        res.data.map((v: ListType) => ({
          ...v,
          id: v.city + "" + v.province + v.region + v.roomNum + v.sceneCode,
        }))
      );
    }
  }, []);

  useEffect(() => {
    geiListFu();
  }, [geiListFu]);

  const column = useMemo(() => {
    return [
      {
        title: "机房编码",
        render: (item: ListType) => item.roomNum || "空",
      },
      {
        title: "站址地区",
        render: (item: ListType) =>
          !item.province && !item.city && !item.region
            ? "（空）"
            : `${item.province}-${item.city}-${item.region}`,
      },
      {
        title: "场景码",
        render: (item: ListType) => item.sceneCode || "空",
      },
    ];
  }, []);

  // 点击导出
  const deriveFu = useCallback(async () => {
    if (list.length === 0) return MessageFu.warning("当前搜索条件没有数据!");
    const name = "重复场景" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");

    const option = {
      fileName: name,
      datas: [
        {
          sheetData: list.map((v) => ({
            ...v,
            myCity:
              !v.province && !v.city && !v.region
                ? "（空）"
                : `${v.province}-${v.city}-${v.region}`,
          })),
          sheetName: name,
          sheetFilter: ["roomNum", "myCity", "sceneCode"],
          sheetHeader: ["机房编码", "站址地区", "场景码"],
          columnWidths: [10, 10, 10],
        },
      ],
    };

    const toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  }, [list]);

  return (
    <Modal
      wrapClassName={styles.LookReDo}
      open={true}
      title={
        <div className="B2Mtitle">
          <div>重复场景</div>
          <div>
            <Button
              type="primary"
              disabled={list.length === 0}
              onClick={deriveFu}
            >
              导出表格
            </Button>
          </div>
        </div>
      }
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="B2Mmain">
        <div className="B1MTable">
          <Table
            size="small"
            scroll={{ y: 578 }}
            dataSource={list}
            columns={column}
            rowKey="id"
            pagination={false}
          />
        </div>

        <div className="B2Mbtn">
          <Button onClick={closePageFu}>关闭</Button>
          {/*  右下角的列表数量 */}
          <div className="tableNumBox">
            共 <span>{list.length}</span> 条数据
          </div>
        </div>
      </div>
    </Modal>
  );
}

const MemoLookReDo = React.memo(LookReDo);

export default MemoLookReDo;