import BreadTit from "@/components/BreadTit";
import classNames from "classnames";
import { useEffect, useMemo, useRef, useState } from "react";
import styles from "./index.module.scss";
import { Select, Input, DatePicker, Table } from "antd";
import AuthButton from "@/components/AuthButton";
import history from "@/utils/history";
import { useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

const { RangePicker } = DatePicker;

export default function Object1() {
  const dataTit = useMemo(() => {
    return [
      { id: 1, name: "全部", num: 30 },
      { id: 2, name: "代办理", num: 10 },
      { id: 3, name: "待审核", num: 0 },
      { id: 4, name: "审核不通过", num: 15 },
      { id: 5, name: "已完成", num: 5 },
    ];
  }, []);

  // 封装发送请求的函数
  const getList = () => {
    const data = { ...tableSelect, pageNum: pageNumRef.current };
    console.log("------", data);
  };

  // 获取地址栏参数
  const location = useLocation();

  const pageNumRef = useRef(1);

  // 如果有参数 根据参数页码在次发送请求
  useEffect(() => {
    const urlParam = location.state || {};
    if (urlParam.k && urlParam.k !== "1")
      setTableSelect({ ...tableSelect, pageNum: Number(urlParam.k) });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  // 顶部筛选
  const [tableSelect, setTableSelect] = useState({
    state: 1,
    laiyuan: null,
    name: "",
    staTime: "",
    endTime: "",
    pageSize: 10,
    pageNum: 1,
  });

  // 当前页码统一
  useEffect(() => {
    pageNumRef.current = tableSelect.pageNum;
  }, [tableSelect.pageNum]);

  // 防止返回的时候发送了2次请求来对应页码

  const getListRef = useRef(-1);

  useEffect(() => {
    clearTimeout(getListRef.current);
    getListRef.current = window.setTimeout(() => {
      getList();
    }, 100);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableSelect]);

  // 藏品来源下拉框筛选
  const handleChange = (value: any) => {
    setTableSelect({ ...tableSelect, laiyuan: value, pageNum: 1 });
  };

  // 单位或个人输入
  const nameTime = useRef(-1);
  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    clearTimeout(nameTime.current);
    nameTime.current = window.setTimeout(() => {
      setTableSelect({ ...tableSelect, name: e.target.value, pageNum: 1 });
    }, 500);
  };

  // 时间选择器改变
  const timeChange = (date: any, dateString: any) => {
    let staTime = "";
    let endTime = "";
    if (dateString[0] && dateString[1]) {
      staTime = dateString[0] + " 00:00:00";
      endTime = dateString[1] + " 23:59:59";
    }
    setTableSelect({ ...tableSelect, staTime, endTime, pageNum: 1 });
  };

  // 点击新增或者编辑按钮
  const addObject = (id?: any) => {
    if (id) history.push(`/object/1/add?k=${pageNumRef.current}&id=${id}`);
    else history.push(`/object/1/add?k=${pageNumRef.current}`);
  };

  // 关于表格的数据
  const paginationChange = (pageNum: number, pageSize: number) => {
    setTableSelect({ ...tableSelect, pageNum, pageSize });
  };

  const results = {
    list: [
      { name: "666-1", id: 1 },
      { name: "666-2", id: 2 },
      { name: "666-3", id: 3 },
      { name: "666-4", id: 4 },
      { name: "666-5", id: 5 },
      { name: "666-6", id: 6 },
      { name: "666-7", id: 7 },
      { name: "666-8", id: 8 },
      { name: "666-9", id: 9 },
      { name: "666-10", id: 10 },
      { name: "666-11", id: 11 },
      { name: "666-12", id: 12 },
      { name: "666-13", id: 13 },
      { name: "666-14", id: 14 },
      { name: "666-15", id: 15 },
      { name: "666-16", id: 16 },
      { name: "666-17", id: 17 },
      { name: "666-18", id: 18 },
      { name: "666-19", id: 19 },
      { name: "666-20", id: 20 },
      { name: "666-21", id: 21 },
      { name: "666-22", id: 22 },
      { name: "666-23", id: 23 },
    ],
    total: 23,
  };

  const columns = useMemo(() => {
    return [
      {
        title: "标题",
        dataIndex: "name",
      },
      {
        title: "操作",
        render: (item: any) => (
          <>
            <AuthButton type="text" danger>
              查看
            </AuthButton>
            <AuthButton type="text" danger onClick={() => addObject(item.id)}>
              编辑
            </AuthButton>
            <AuthButton type="text" danger>
              删除
            </AuthButton>
          </>
        ),
      },
    ];
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 从仓库中获取藏品来源下拉数据
  const options = useSelector(
    (state: RootState) => state.loginStore.selectAll["文物来源"]
  );

  return (
    <div className={styles.Object1}>
      <div className="breadTit">
        <BreadTit>
          <div className="breadTitRow active">藏品登记</div>
        </BreadTit>
      </div>
      <div className="objectSonMain">
        {/* 顶部筛选 */}
        <div className="objectSonMainTit">
          {dataTit.map((v) => (
            <div
              key={v.id}
              onClick={() =>
                setTableSelect({ ...tableSelect, state: v.id, pageNum: 1 })
              }
              className={classNames(v.id === tableSelect.state ? "active" : "")}
            >
              {v.name}（{v.num}）
            </div>
          ))}
        </div>
        <div className="objectSonMainTable">
          {/* 表格数据筛选 */}
          <div className="tableSelectBox">
            <div className="row">
              <span>藏品来源：</span>
              <Select
                placeholder="请选择"
                allowClear
                style={{ width: 150 }}
                value={tableSelect.laiyuan}
                onChange={handleChange}
                options={options.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </div>
            <div className="row">
              <span>单位或个人：</span>
              <Input
                maxLength={10}
                style={{ width: 150 }}
                placeholder="请输入"
                allowClear
                onChange={(e) => nameChange(e)}
              />
            </div>
            <div className="row">
              <span>创建日期：</span>
              <RangePicker onChange={timeChange} />
            </div>
            <div className="row">
              <AuthButton type="primary" onClick={() => addObject()}>
                新增
              </AuthButton>
            </div>
          </div>

          {/* 表格主体 */}
          <div className="tableMain">
            <Table
              scroll={{ y: 428 }}
              dataSource={results.list}
              columns={columns}
              rowKey="id"
              pagination={{
                position: ["bottomCenter"],
                showSizeChanger: true,
                current: tableSelect.pageNum,
                pageSize: tableSelect.pageSize,
                total: results.total,
                onChange: paginationChange,
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
