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

type ListType = {
  cameraSn: string;
  link: string;
  region: string;
  roomNum: string;
  sceneCode: string;
  sceneName: string;
  shootTime: string;
  siteName: string;
  siteNum: string;
};

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

function MateNum({ closeFu }: Props) {
  const [txt, setTxt] = useState("");

  const [list, setList] = useState<ListType[]>([]);

  // 点击匹配
  const mateFu = useCallback(async () => {
    const data = txt.split(",");

    const res = await B2_APImateNum(data);
    if (res.code === 0) {
      MessageFu.success("匹配成功!");
      setList(res.data || []);
    }
  }, [txt]);

  // 有效条数
  const numOk = useMemo(() => {
    const arr = list.filter((v) => v.roomNum) || [];
    return arr.length;
  }, [list]);

  // 点击导出
  const deriveFu = useCallback(async () => {
    const name = "场景码匹配" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");

    const option = {
      fileName: name,
      datas: [
        {
          sheetData: list.map((v) => ({
            siteName: v.siteName || "空",
            siteNum: v.siteNum || "空",
            roomNum: v.roomNum || "空",
            region: v.region || "空",
            sceneCode: v.sceneCode || "空",
            cameraSn: v.cameraSn || "空",
            shootTime: v.shootTime || "空",
            sceneName: v.sceneName || "空",
            link: v.link || "空",
          })),
          sheetName: name,
          sheetFilter: [
            "siteName",
            "siteNum",
            "roomNum",
            "region",
            "sceneCode",
            "cameraSn",
            "shootTime",
            "sceneName",
            "link",
          ],
          sheetHeader: [
            "站址名称",
            "站址编码",
            "机房实物编码",
            "区域",
            "场景编码",
            "相机SN吗",
            "采集日期",
            "场景名称",
            "全景链接",
          ],
          columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10],
        },
      ],
    };

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

  return (
    <Modal
      wrapClassName={styles.MateNum}
      open={true}
      title="场景码匹配"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="B2mMain">
        <TextArea
          placeholder="请输入场景编码，并以 , 隔开（' , '需使用英文输入法）"
          value={txt}
          onChange={(e) => setTxt(e.target.value.replace(/\s+/g, ""))}
        />

        <br />
        <br />

        <div className="B2mTit" hidden={list.length <= 0}>
          当前匹配信息总条数：{list.length}&emsp;&emsp;有效条数：
          {numOk}&emsp;&emsp;无效条数：{list.length - numOk}
        </div>
        <div className="B2mBtn">
          <div>
            <Button type="primary" disabled={txt.length <= 0} onClick={mateFu}>
              {list.length > 0 ? "重新" : ""}匹配
            </Button>
            &emsp;
            <Button type="primary" hidden={list.length <= 0} onClick={deriveFu}>
              导出表格
            </Button>
          </div>

          <Button onClick={closeFu}>关闭</Button>
        </div>
      </div>
    </Modal>
  );
}

const MemoMateNum = React.memo(MateNum);

export default MemoMateNum;
