import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import {
  Button,
  Cascader,
  Input,
  Popconfirm,
  Select,
  Table,
  Tooltip,
} from "antd";
import { useDispatch, useSelector } from "react-redux";
import { B3FromDataType } from "./data";
import { B1options2, B1options2Obj } from "../B1Plan/data";
import { QuestionCircleOutlined } from "@ant-design/icons";
import {
  B3_APIgetlist,
  B3_APIgetlistAll,
  B3_APIpush,
} from "@/store/action/B3Push";
import { RootState } from "@/store";
import { B3tableType } from "@/types";
import { MessageFu } from "@/utils/message";
import { mapDataAll1 } from "../C1User/AddUser/city";
import ExportJsonExcel from "js-export-excel";
import dayjs from "dayjs";

function B3Push() {
  const dispatch = useDispatch();

  // 筛选和分页
  const [tableSelect, setTableSelect] = useState<B3FromDataType>({
    siteArr: undefined,
    province: "",
    city: "",
    region: "",
    jsonStatus: "",
    pmUser: "",
    pushStatus: "",
    searchKey: "",
    pageSize: 10,
    pageNum: 1,
  });

  const tableSelectRef = useRef({} as B3FromDataType);

  useEffect(() => {
    tableSelectRef.current = { ...tableSelect };
  }, [tableSelect]);

  // 点击搜索的 时间戳
  const [timeKey, setTimeKey] = useState(-1);

  // 发送接口的函数
  const getListFu = useCallback(() => {
    const objTemp: any = {};

    if (tableSelectRef.current.siteArr) {
      const temp = tableSelectRef.current.siteArr;
      objTemp.province = temp[0] || "";
      objTemp.city = temp[1] || "";
      objTemp.region = temp[2] || "";
    }

    const obj = {
      ...tableSelectRef.current,
      ...objTemp,
    };
    dispatch(B3_APIgetlist(obj));
  }, [dispatch]);

  useEffect(() => {
    getListFu();
  }, [getListFu, timeKey]);

  // 输入框的改变
  const txtChangeFu = useCallback(
    (txt: string, key: "pmUser" | "searchKey") => {
      setTableSelect({ ...tableSelect, [key]: txt });
    },
    [tableSelect]
  );

  // 点击搜索
  const clickSearch = useCallback(() => {
    setTableSelect({ ...tableSelect, pageNum: 1 });
    setTimeout(() => {
      setTimeKey(Date.now());
    }, 50);
  }, [tableSelect]);

  // 点击重置
  const [inputKey, setInputKey] = useState(1);
  const resetSelectFu = useCallback(() => {
    // 把2个输入框和时间选择器清空
    setInputKey(Date.now());
    setTableSelect({
      siteArr: undefined,
      province: "",
      city: "",
      region: "",
      jsonStatus: "",
      pmUser: "",
      pushStatus: "",
      searchKey: "",
      pageSize: 10,
      pageNum: 1,
    });
    setTimeout(() => {
      setTimeKey(Date.now());
    }, 50);
  }, []);

  // 从仓库获取列表
  const B3TableList = useSelector(
    (state: RootState) => state.B3Push.B3TableList
  );

  // 页码变化
  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setTableSelect({ ...tableSelect, pageNum, pageSize });
      setTimeout(() => {
        setTimeKey(Date.now());
      }, 50);
    },
    [tableSelect]
  );

  // 关于表格的多选
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const selectedRef = useRef([] as string[]);

  // 点击推送
  const pushsTit = useRef([0, 0, 0]);

  const pushFu = useCallback(
    async (code: string) => {
      if (code.split(",").length <= 0) return;

      const res = await B3_APIpush(code.split(","));

      if (res.code === 0) {
        MessageFu.success("操作成功!");
        // 清空选中
        setSelectedRowKeys([]);
        selectedRef.current = [];
        getListFu();
      }
    },
    [getListFu]
  );

  const columns = useMemo(() => {
    return [
      {
        title: "机房编码",
        render: (item: B3tableType) => item.roomNum || "（空）",
      },
      {
        title: "站址地区",
        render: (item: B3tableType) =>
          !item.province && !item.city && !item.region
            ? "（空）"
            : `${item.province}-${item.city}-${item.region}`,
      },
      {
        title: "项目经理",
        render: (item: B3tableType) => {
          if (item.creatorId === 1) return "管理员";
          else {
            return item.pmName || "（空）";
          }
        },
      },
      {
        title: "场景码",
        render: (item: B3tableType) => item.sceneCode || "（空）",
      },
      {
        title: "场景推送状态",
        render: (item: B3tableType) => (
          <>
            {Reflect.get(B1options2Obj, item.pushStatus) || "（空）"}
            <span style={{ cursor: "pointer" }} hidden={!item.pushDesc}>
              <Tooltip title={item.pushDesc}>
                &nbsp;
                <QuestionCircleOutlined rev={undefined} />
              </Tooltip>
            </span>
          </>
        ),
      },
      {
        title: "场景推送时间",
        render: (item: B3tableType) => item.pushTime || "（空）",
      },
      {
        title: "链接推送状态",
        render: (item: B3tableType) => (
          <>
            {Reflect.get(B1options2Obj, item.pushLinkStatus) || "（空）"}
            <span style={{ cursor: "pointer" }} hidden={!item.pushLinkDesc}>
              <Tooltip title={item.pushLinkDesc}>
                &nbsp;
                <QuestionCircleOutlined rev={undefined} />
              </Tooltip>
            </span>
          </>
        ),
      },
      {
        title: "链接推送时间",
        render: (item: B3tableType) => item.pushLinkTime || "（空）",
      },
      // {
      //   title: "Json类型",
      //   render: (item: B3tableType) =>
      //     item.jsonType === 1 ? "算法" : "人工" || "（空）",
      // },
      {
        title: "Json更新时间",
        render: (item: B3tableType) => item.jsonUpdateTime || "（空）",
      },
      {
        title: "Json推送状态",
        render: (item: B3tableType) => (
          <>
            {Reflect.get(B1options2Obj, item.jsonStatus) || "（空）"}
            <span style={{ cursor: "pointer" }} hidden={!item.jsonDesc}>
              <Tooltip title={item.jsonDesc}>
                &nbsp;
                <QuestionCircleOutlined rev={undefined} />
              </Tooltip>
            </span>
          </>
        ),
      },
      {
        title: "Json推送时间",
        render: (item: B3tableType) => item.jsonPushTime || "（空）",
      },
      {
        title: "操作",
        render: (item: B3tableType) => (
          <Button
            disabled={
              item.pushStatus === 2 &&
              item.pushLinkStatus === 2 &&
              item.jsonStatus === 2
            }
            size="small"
            type="text"
            onClick={() => pushFu(item.sceneCode)}
          >
            推送
          </Button>
        ),
      },
    ];
  }, [pushFu]);

  // 点击导出
  const deriveFu = useCallback(async () => {
    if (B3TableList.total > 30000)
      return MessageFu.warning(
        "只支持导出最多30000条数据。请增加筛选条件，并重新尝试"
      );

    if (B3TableList.list.length === 0)
      return MessageFu.warning("当前搜索条件没有数据!");
    const name = "推送管理" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");

    const objTemp: any = {};

    if (tableSelectRef.current.siteArr) {
      const temp = tableSelectRef.current.siteArr;
      objTemp.province = temp[0] || "";
      objTemp.city = temp[1] || "";
      objTemp.region = temp[2] || "";
    }

    const res = await B3_APIgetlistAll({
      ...tableSelect,
      ...objTemp,
      pageNum: 1,
      pageSize: 99999,
    });
    if (res.code === 0) {
      if (res.data.records.length <= 0)
        return MessageFu.warning("当前搜索条件没有数据!");
      const option = {
        fileName: name,
        datas: [
          {
            sheetData: res.data.records.map((v: B3tableType) => ({
              roomNum: v.roomNum || "（空）",
              myCity:
                !v.province && !v.city && !v.region
                  ? "（空）"
                  : `${v.province}-${v.city}-${v.region}`,
              pmName: v.creatorId === 1 ? "管理员" : v.pmName || "（空）",
              sceneCode: v.sceneCode || "（空）",
              pushStatus: Reflect.get(B1options2Obj, v.pushStatus) || "（空）",
              pushStatusTxt: v.pushDesc || "（空）",
              pushTime: v.pushTime || "（空）",
              pushLinkStatus:
                Reflect.get(B1options2Obj, v.pushLinkStatus) || "（空）",
              pushLinkTime: v.pushLinkTime || "（空）",
              jsonUpdateTime: v.jsonUpdateTime || "（空）",
              jsonStatus: Reflect.get(B1options2Obj, v.jsonStatus) || "（空）",
              jsonStatusTxt: v.jsonDesc || "（空）",
              jsonPushTime: v.jsonPushTime || "（空）",
            })),
            sheetName: name,
            sheetFilter: [
              "roomNum",
              "myCity",
              "pmName",
              "sceneCode",
              "pushStatus",
              "pushStatusTxt",
              "pushTime",
              "pushLinkStatus",
              "pushLinkTime",
              "jsonUpdateTime",
              "jsonStatus",
              "jsonStatusTxt",
              "jsonPushTime",
            ],
            sheetHeader: [
              "机房编码",
              "站址地区",
              "项目经理",
              "场景码",
              "场景推送状态",
              "场景推送状态描述",
              "场景推送时间",
              "链接推送状态",
              "链接推送时间",
              "Json更新时间",
              "Json推送状态",
              "Json推送状态描述",
              "Json推送时间",
            ],
            columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
          },
        ],
      };

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

  return (
    <div className={styles.B3Push}>
      <div className="pageTitle">
        推送管理&emsp;<span>仅显示审核通过的场景</span>
      </div>
      {/*顶部筛选 */}
      <div className="B3top">
        <div className="B3topSon">
          <div className="B3topRow">
            <span>搜索项：</span>
            <Input
              key={inputKey}
              maxLength={24}
              style={{ width: 260 }}
              placeholder="请输入机房编码/场景码，最多24字"
              allowClear
              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
            />
          </div>

          <div className="B3topRow">
            <span>站址地区：</span>
            <Cascader
              changeOnSelect
              value={tableSelect.siteArr}
              style={{ width: 200 }}
              options={mapDataAll1}
              placeholder="全部"
              onChange={(e) =>
                setTableSelect({ ...tableSelect, siteArr: e as string[] })
              }
            />
          </div>

          <div className="B3topRow">
            <span>项目经理：</span>
            <Input
              key={inputKey}
              maxLength={10}
              style={{ width: 200 }}
              placeholder="请输入姓名,最多10字"
              allowClear
              onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
            />
          </div>
        </div>
        <div className="B3topSon B3topSon2">
          <div>
            <div className="B3topRow">
              <span>场景推送状态：</span>
              <Select
                style={{ width: 194 }}
                value={tableSelect.pushStatus}
                onChange={(e) =>
                  setTableSelect({ ...tableSelect, pushStatus: e })
                }
                options={B1options2}
              />
            </div>
            <div className="B3topRow">
              <span>Json推送状态：</span>
              <Select
                style={{ width: 194 }}
                value={tableSelect.jsonStatus}
                onChange={(e) =>
                  setTableSelect({ ...tableSelect, jsonStatus: e })
                }
                options={B1options2}
              />
            </div>
          </div>
          <div>
            <Button onClick={resetSelectFu}>重置</Button>&emsp;
            <Button type="primary" onClick={clickSearch}>
              查询
            </Button>
            &emsp;
            <Popconfirm
              placement="bottomRight"
              title={
                <>
                  请确定是否推送所选文件?
                  <br /> 当前共选中{pushsTit.current[0]}个机房编码 <br />共
                  {pushsTit.current[1]}个场景可推送，{pushsTit.current[2]}
                  个链接可推送，{pushsTit.current[3]}个Json文件可推送
                </>
              }
              okText="推送"
              cancelText="取消"
              onConfirm={() => pushFu(selectedRef.current.join(","))}
              okButtonProps={{ loading: false }}
              disabled={selectedRowKeys.length <= 0}
            >
              <Button type="primary" disabled={selectedRowKeys.length <= 0}>
                批量推送
              </Button>
            </Popconfirm>
            &nbsp;
            <Tooltip title="仅推送审核通过 且 未推送或推送失败的文件">
              <QuestionCircleOutlined
                rev={undefined}
                style={{ cursor: "pointer" }}
              />
            </Tooltip>
            &emsp;
            <Button type="primary" onClick={deriveFu}>
              导出表格
            </Button>
          </div>
        </div>
      </div>

      {/* 表格主体 */}
      <div className="tableMain">
        <Table
          rowSelection={{
            type: "checkbox",
            selectedRowKeys,
            onChange: (keys: React.Key[], arr) => {
              // 用于表格数据的勾选状态在页面显示
              setSelectedRowKeys(keys);

              // 用于发送接口的code数组
              selectedRef.current = arr.map((v) => v.sceneCode);

              // 用于批量推送的文字提示
              pushsTit.current = [
                arr.length,
                arr.filter((v) => v.pushStatus !== 2).length,
                arr.filter((v) => v.pushLinkStatus !== 2).length,
                arr.filter((v) => v.jsonStatus !== 2).length,
              ];
            },
            getCheckboxProps: (item) => {
              return {
                disabled:
                  item.pushStatus === 2 &&
                  item.pushLinkStatus === 2 &&
                  item.jsonStatus === 2,
              };
            },
          }}
          scroll={{ y: 578 }}
          dataSource={B3TableList.list}
          columns={columns}
          rowKey="id"
          pagination={{
            showQuickJumper: true,
            position: ["bottomCenter"],
            showSizeChanger: true,
            current: tableSelect.pageNum,
            pageSize: tableSelect.pageSize,
            total: B3TableList.total,
            onChange: paginationChange(),
          }}
        />
      </div>
      {/*  右下角的列表数量 */}
      <div className="tableNumBox">
        共 <span>{B3TableList.total}</span> 条数据
      </div>
    </div>
  );
}

const MemoB3Push = React.memo(B3Push);

export default MemoB3Push;
