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

const ManagementIndexPage = () => {
  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="考核管理"
      headerSlot={
        <div>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="large"
            className="second-button"
            onClick={() => navigate("/management/index/create")}
          >
            新增定级评估考核
          </Button>

          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="large"
            className="second-button"
            onClick={() => navigate("/management/index/create")}
          >
            新增运行评估考核
          </Button>
        </div>
      }
    >
      <div className={style.filter}>
        <Form layout="inline" className="inline-form">
          <Form.Item label="考核类别">
            <div className="w160">
              <Select />
            </div>
          </Form.Item>
          <Form.Item label="发布状态">
            <div className="w160">
              <Select />
            </div>
          </Form.Item>
          <Form.Item label="自评进度">
            <div className="w160">
              <Select />
            </div>
          </Form.Item>
          <Form.Item label="评价进度">
            <div className="w160">
              <Select />
            </div>
          </Form.Item>
          <Form.Item label="搜索">
            <Input className="w160" placeholder="请输入考核名称" />
          </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: "d",
              align: "center",
              minWidth: 100,
              render: (item: (typeof list)[0]) => {
                return item.d || "/";
              },
            },
            {
              title: "评定状态",
              key: "e",
              align: "center",
              minWidth: 100,
              render: (item: (typeof list)[0]) => {
                return item.e || "/";
              },
            },
            {
              title: "编辑时间",
              dataIndex: "f",
              key: "f",
              align: "center",
              minWidth: 160,
            },
            {
              title: "编辑人",
              dataIndex: "g",
              key: "g",
              align: "center",
              minWidth: 100,
            },
            {
              title: "操作",
              key: "h",
              align: "center",
              fixed: "right",
              render: (item: (typeof list)[0]) => {
                return (
                  <DageTableActions
                    renderBefore={
                      <>
                        <Button
                          type="text"
                          className={style.button}
                          onClick={() => navigate("/management/index/detail")}
                        >
                          查看
                        </Button>
                        <Button
                          type="text"
                          className={style.button}
                          onClick={() =>
                            navigate("/management/index/setting-index")
                          }
                        >
                          设置指标
                        </Button>
                        <Button
                          type="text"
                          className={style.button}
                          onClick={() =>
                            navigate("/management/index/setting-role")
                          }
                        >
                          设置角色
                        </Button>
                      </>
                    }
                  />
                );
              },
            },
          ]}
        />
      </div>
    </PageContainer>
  );
};

export default ManagementIndexPage;
