import classNames from "classnames";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Button, Form, Input, Select, Table } from "antd";
import { useNavigate } from "react-router-dom";
import { PageContainer } from "@/components";
import style from "./index.module.scss";
import {
  ASSESSMENT_TYPE_OPTIONS,
  DEPT_STATUS_MAP,
  DEPT_STATUS_OPTIONS,
  PUBLISH_STATUS_MAP,
  PUBLISH_STATUS_OPTIONS,
} from "../../../constants";
import { IManageFormItem, IManageFormListParams } from "@/types";
import { getManageFormListApi } from "@/api";
import { debounce } from "lodash";

const DEFAULT_PARAMS: IManageFormListParams = {
  deptStatus: undefined,
  searchKey: "",
  status: undefined,
  type: undefined,
  pageNum: 1,
  pageSize: 20,
};

const ManagementReportPage = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [params, setParams] = useState<IManageFormListParams>({
    ...DEFAULT_PARAMS,
  });
  const [total, setTotal] = useState(0);
  const [list, setList] = useState<IManageFormItem[]>([]);

  const getList = useCallback(async () => {
    setLoading(true);
    try {
      const data = await getManageFormListApi(params);
      setList(data.data);
      setTotal(data.total);
    } finally {
      setLoading(false);
    }
  }, [params]);

  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setParams({ ...params, pageNum, pageSize });
    },
    [params]
  );

  const debounceSearch = useMemo(
    () =>
      debounce((changedVal: unknown, vals: any) => {
        setParams({ ...params, ...vals });
      }, 500),
    [params]
  );

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

  return (
    <PageContainer title="考核填报">
      <div className={style.filter}>
        <Form
          layout="inline"
          className="inline-form"
          onValuesChange={debounceSearch}
        >
          <Form.Item label="搜索" name="searchKey">
            <Input placeholder="请输入考核名称" className="w160" />
          </Form.Item>
          <Form.Item label="考核类别">
            <div className="w160">
              <Form.Item noStyle name="type">
                <Select
                  allowClear
                  placeholder="请选择"
                  options={ASSESSMENT_TYPE_OPTIONS}
                />
              </Form.Item>
            </div>
          </Form.Item>
          <Form.Item label="发布状态">
            <div className="w160">
              <Form.Item noStyle name="status">
                <Select
                  allowClear
                  placeholder="请选择"
                  options={PUBLISH_STATUS_OPTIONS}
                />
              </Form.Item>
            </div>
          </Form.Item>
          <Form.Item label="自评状态">
            <div className="w160">
              <Form.Item noStyle name="deptStatus">
                <Select
                  allowClear
                  placeholder="请选择"
                  options={DEPT_STATUS_OPTIONS}
                />
              </Form.Item>
            </div>
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={getList}>
              查询
            </Button>
          </Form.Item>
        </Form>
      </div>

      <div className={style.table}>
        <Table
          loading={loading}
          className={classNames("cus-table large")}
          dataSource={list}
          rowKey="id"
          scroll={{ x: "max-content" }}
          columns={[
            {
              title: "名称",
              dataIndex: "name",
              align: "center",
              minWidth: 100,
            },
            {
              title: "类别",
              align: "center",
              minWidth: 100,
              render: (item: IManageFormItem) => {
                return ASSESSMENT_TYPE_OPTIONS.find(
                  (i) => i.value === item.type
                )?.label;
              },
            },
            {
              title: "说明",
              dataIndex: "remark",
              align: "center",
              minWidth: 100,
            },
            {
              title: "考核周期",
              align: "center",
              minWidth: 100,
              render: (item: IManageFormItem) =>
                `${item.dateStart}-${item.dateEnd}`,
            },
            {
              title: "发布状态",
              align: "center",
              minWidth: 100,
              render: (item: IManageFormItem) => {
                return (
                  <p
                    style={{
                      color: PUBLISH_STATUS_MAP[item.publishStatus || 0].color,
                    }}
                  >
                    {PUBLISH_STATUS_MAP[item.publishStatus || 0].label}
                  </p>
                );
              },
            },
            {
              title: "责任部门",
              dataIndex: "deptName",
              align: "center",
            },
            {
              title: "填报状态",
              key: "e",
              align: "center",
              minWidth: 100,
              render: (item: IManageFormItem) => {
                return (
                  <p
                    style={{
                      color: DEPT_STATUS_MAP[item.deptStatus].color,
                    }}
                  >
                    {DEPT_STATUS_MAP[item.deptStatus].label}
                  </p>
                );
              },
            },
            {
              title: "操作",
              align: "center",
              fixed: "right",
              render: (item: IManageFormItem) => {
                return item.accessId ? (
                  <Button
                    type="link"
                    onClick={() =>
                      navigate(
                        `/management/form/detail/${item.id}/${item.accessId}`
                      )
                    }
                  >
                    查看
                  </Button>
                ) : undefined;
              },
            },
          ]}
          pagination={{
            showQuickJumper: true,
            position: ["bottomCenter"],
            showSizeChanger: true,
            current: params.pageNum,
            pageSize: params.pageSize,
            total,
            onChange: paginationChange(),
          }}
        />
      </div>
    </PageContainer>
  );
};

export default ManagementReportPage;
