import classNames from "classnames";
import { useState } from "react";
import { Button, Form, Input, Select, Table } from "antd";
import { useNavigate } from "react-router-dom";
import { PageContainer } from "@/components";
import { PUBLISH_STATUS_MAP, PUBLISH_ENUM } from "../../../constants";
import style from "../Form/index.module.scss";

const ManagementEvaluationPage = () => {
  const navigate = useNavigate();
  const [list] = useState([
    {
      id: 1,
      name: "模板名称",
      a: "定级评估",
      description: "模板说明",
      b: "",
      c: PUBLISH_ENUM.PENDING,
      d: "",
      e: "",
      f: "2024-09-24 16:50:30",
      g: "钱韵澄",
    },
  ]);

  return (
    <PageContainer title="考核评定">
      <div className={style.filter}>
        <Form layout="inline" className="inline-form">
          <Form.Item label="搜索">
            <Input placeholder="请输入考核名称" className="w160" />
          </Form.Item>
          <Form.Item label="考核类别">
            <div className="w160">
              <Select />
            </div>
          </Form.Item>
          <Form.Item label="发布状态">
            <div className="w160">
              <Select />
            </div>
          </Form.Item>
          <Form.Item>
            <Button type="primary">查询</Button>
          </Form.Item>
        </Form>
      </div>

      <div className={style.table}>
        <Table
          className={classNames("cus-table large")}
          dataSource={list}
          rowKey="id"
          scroll={{ x: "max-content" }}
          columns={[
            {
              title: "名称",
              dataIndex: "name",
              key: "name",
              align: "center",
              minWidth: 100,
            },
            {
              title: "类别",
              dataIndex: "a",
              key: "a",
              align: "center",
              minWidth: 100,
            },
            {
              title: "说明",
              dataIndex: "description",
              key: "description",
              align: "center",
              minWidth: 100,
            },
            {
              title: "考核周期",
              dataIndex: "b",
              key: "b",
              align: "center",
              minWidth: 100,
            },
            {
              title: "发布状态",
              key: "c",
              align: "center",
              minWidth: 100,
              render: (item: (typeof list)[0]) => {
                return (
                  <p style={{ color: PUBLISH_STATUS_MAP[item.c].color }}>
                    {PUBLISH_STATUS_MAP[item.c].label}
                  </p>
                );
              },
            },
            {
              title: "操作",
              key: "h",
              align: "center",
              fixed: "right",
              render: (item: (typeof list)[0]) => {
                return (
                  <Button
                    type="link"
                    onClick={() => navigate("/management/evaluation/detail")}
                  >
                    查看
                  </Button>
                );
              },
            },
          ]}
        />
      </div>
    </PageContainer>
  );
};

export default ManagementEvaluationPage;
