import styles from "./index.module.scss";
import logiImg from "@/assets/img/logo.png";
import classNames from "classnames";
import { Input, Select } from "antd";
import { SearchOutlined, ExclamationOutlined } from "@ant-design/icons";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  getAgeAction,
  getListAction,
  getSortAction,
} from "@/store/action/home";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { RootState } from "@/store";
import { baseURL } from "@/utils/http";
import { InfiniteScroll } from "antd-mobile";
import ModelM from "@/components/ModelM";
export default function HomeM() {
  const dispatch = useDispatch();

  // 进页面获取后端文物数据
  useEffect(() => {
    dispatch(getSortAction());
    dispatch(getAgeAction());
  }, [dispatch]);

  //输入框的显示和隐藏
  const [inputShow, setInputShow] = useState(false);

  useEffect(() => {
    if (inputShow) {
      const dom: any = document.querySelector(".myInput");
      dom.focus();
    }
  }, [inputShow]);

  const [value, setValue] = useState("");
  const searchKeyUpFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") searchBtnFu();
  };
  const searchBtnFu = () => {
    fromData.current.pageNum = 1;
    getModelList();
    setInputShow(false);
  };

  // 分类的数据和高亮
  const { sortList, modelInfo, ageList } = useSelector(
    (state: RootState) => state.homeStore
  );
  const { list, total } = modelInfo;

  // 分类
  const [sort, setSort] = useState(-1);
  // 分类下拉框改变
  const sortChangeFu = (value: number) => {
    setSort(value);
  };
  useEffect(() => {
    fromData.current.dictTextureId = sort;
    fromData.current.pageNum = 1;
    getModelList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sort]);

  // 年代
  const [ageSerach, setAgeSerach] = useState(-1);
  // 年代下拉框改变
  const ageChangeFu = (value: number) => {
    setAgeSerach(value);
    fromData.current.dictAgeId = value;
    fromData.current.pageNum = 1;
    getModelList();
  };

  // 上拉加载更多数据
  const loadMore = async () => {
    fromData.current.pageNum = fromData.current.pageNum + 1;
    await getModelList(true);
  };

  //  发送请求相关数据
  const fromData = useRef({
    pageNum: 1,
    pageSize: 6,
    searchKey: "",
    dictTextureId: -1,
    dictAgeId: -1,
  });

  // 滚动盒子ref
  const modelBoxRef = useRef<HTMLDivElement>(null);
  // 封装一个发送请求获取列表的函数
  const getModelList = (flag?: boolean) => {
    if (!flag) {
      const sroolDom = modelBoxRef.current;
      sroolDom!.scrollTop = 0;
    }
    dispatch(
      getListAction(
        {
          ...fromData.current,
          dictTextureId:
            fromData.current.dictTextureId === -1
              ? null
              : fromData.current.dictTextureId,
          searchKey: value,
          dictAgeId:
            fromData.current.dictAgeId === -1
              ? null
              : fromData.current.dictAgeId,
        },
        flag
      )
    );
  };

  // 点击每个模型出来的页面
  const [modelId, setModelId] = useState(0);

  return (
    <div className={styles.HomeM}>
      {/* 点击单个模型出来的详情页面 */}
      <div className={classNames("modelTxtBox", modelId ? "activeTxtBox" : "")}>
        <ModelM modelId={modelId} closeModel={() => setModelId(0)} />
      </div>

      <div className="title">
        <img src={logiImg} alt="" />
      </div>
      {/* 筛选和搜索 */}
      <div className="search">
        {/* 搜索框 */}
        <div className="inputBox" hidden={!inputShow}>
          <div className="inputInco" onClick={() => searchBtnFu()}>
            <SearchOutlined />
          </div>
          <Input
            className="myInput"
            maxLength={10}
            placeholder="请输入文物名称"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onKeyUp={(e) => searchKeyUpFu(e)}
          />
        </div>

        <div className="sort">
          <Select
            style={{ width: "100%" }}
            value={sort}
            onChange={sortChangeFu}
            options={sortList}
          />
        </div>
        <div className="age">
          <Select
            style={{ width: "100%" }}
            value={ageSerach}
            onChange={ageChangeFu}
            options={ageList}
          />
        </div>
        <div className="inco" onClick={() => setInputShow(true)}>
          <SearchOutlined />
        </div>

        {/* 展开的全部分类 */}
      </div>

      {/* 主体内容 */}

      <div className="main" ref={modelBoxRef}>
        {list && list.length > 0 ? (
          <>
            <div className="mainBox">
              {list.map((item) => (
                <div
                  className="mainRow"
                  key={item.id}
                  onClick={() => setModelId(item.id)}
                >
                  <LazyLoadImage
                    src={baseURL + item.thumb}
                    width={300}
                    height={260}
                    alt=""
                  />
                  <p>{item.name}</p>
                  {/* 右上角分类 */}
                  {item.dictTextureName ? (
                    <div className="sortName">{item.dictTextureName}</div>
                  ) : null}
                </div>
              ))}
            </div>
            <InfiniteScroll loadMore={loadMore} hasMore={total > list.length} />
          </>
        ) : (
          <div className="noneList">
            <div className="incoBox">
              <ExclamationOutlined />
            </div>
            <p>暂无内容</p>
          </div>
        )}
      </div>
    </div>
  );
}
