import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { Pagination } from "antd";
import { envUrl } from "@/utils/env";
import { A2_APIgetKnowData } from "@/store/action/A2Main";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import ImageLazy from "@/components/ImageLazy";
import Tab5Info from "../Tab5Info";

const list = [
  { id: 1, name: "全部", type: "" },
  { id: 2, name: "历史", type: "历史" },
  { id: 3, name: "军事", type: "军事" },
  { id: 4, name: "人物", type: "人物" },
  // { id: 5, name: "其他", type: "其他" },
];

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

  const [fromData, setFromData] = useState({
    tagType: "",
    pageNum: 1,
    pageSize: 10,
  });

  const getListFu = useCallback(async () => {
    dispatch(A2_APIgetKnowData(fromData));
  }, [dispatch, fromData]);

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

  const tab5List = useSelector((state: RootState) => state.A2Main.tab5List);

  // 打开详情页的id
  const [infoId, setInfoId] = useState(0);

  return (
    <div
      className={styles.Tab5}
      style={{ backgroundImage: `url(${envUrl}/goods/bac.jpg)` }}
    >
      <div className="tab5Top">
        {list.map((v) => (
          <div
            onClick={() =>
              setFromData({ ...fromData, tagType: v.type, pageNum: 1 })
            }
            key={v.id}
            className={classNames(
              "tab5TopRow",
              fromData.tagType === v.type ? "tab5TopRowAc" : ""
            )}
          >
            {v.name}
          </div>
        ))}
      </div>

      <div className="tab5Main">
        {tab5List.list.map((v) => (
          <div
            className="tab5Row"
            key={v.id}
            title={v.name}
            onClick={() => setInfoId(v.id)}
          >
            <div>
              <ImageLazy src={v.thumb} width="100%" height="100%" noLook />
            </div>
            <p>{v.name}</p>
          </div>
        ))}
      </div>

      {/* 分页器 */}
      <div className="tab5Page">
        <Pagination
          showQuickJumper
          current={fromData.pageNum}
          total={tab5List.total}
          pageSize={10}
          hideOnSinglePage={true}
          onChange={(page) => setFromData({ ...fromData, pageNum: page })}
          showSizeChanger={false}
        />
      </div>

      {infoId ? <Tab5Info sId={infoId} closeFu={() => setInfoId(0)} /> : null}
    </div>
  );
}

const MemoTab5 = React.memo(Tab5);

export default MemoTab5;