import { FormPageFooter, PageContainer } from "@/components";
import { Button, Form, InputNumber, Radio, Table, Tag } from "antd";
import { FC, useRef } from "react";
import classNames from "classnames";
import style from "./index.module.scss";
import { DageTableActions } from "@dage/pc-components";

const IndexDetailPage: FC = () => {
  // 判断是否为考核填报进入
  const isReportDetail = useRef(window.location.hash.indexOf("form") > -1);
  // 判断是否为考核评定进入
  const isEvalutionDetail = useRef(
    window.location.hash.indexOf("evaluation") > -1
  );

  return (
    <PageContainer title="考核标题" showBack>
      {isEvalutionDetail.current && (
        <Form>
          <Form.Item label="评定得分">
            <InputNumber
              className="w450"
              min={0}
              max={50}
              precision={1}
              placeholder="请输入0~50的数字，支持小数点后一位"
            />
          </Form.Item>
        </Form>
      )}

      <div className={style.header}>
        <div>
          <Tag>选填</Tag>
          <h3>这是一段资料名称 | zip,jpg,png</h3>
        </div>
        <Button type="primary" ghost>
          下载模板
        </Button>
        {isReportDetail.current && <Button>上传附件</Button>}
      </div>

      <div className={style.table}>
        <Table
          className={classNames("cus-table")}
          rowKey="id"
          dataSource={[
            {
              id: 1,
              name: "hello",
            },
          ]}
          columns={[
            {
              title: "附件名称",
              align: "center",
              dataIndex: "name",
            },
            {
              title: "责任部门",
              align: "center",
              dataIndex: "department",
            },
            {
              title: "上传用户",
              align: "center",
              dataIndex: "user",
            },
            {
              title: "上传时间",
              align: "center",
              dataIndex: "create_time",
            },
            {
              title: "评定结果",
              align: "center",
              render: () =>
                isEvalutionDetail.current ? (
                  <Radio.Group
                    options={[
                      {
                        label: "合格",
                        value: 1,
                      },
                      {
                        label: "不合格",
                        value: 0,
                      },
                    ]}
                  />
                ) : (
                  "合格"
                ),
            },
            {
              title: "评定意见",
              align: "center",
              render: (val) => <p className="empty-text">（空）</p>,
            },
            {
              title: "操作",
              align: "center",
              render: () => (
                <DageTableActions
                  showEdit={false}
                  showDelete={isReportDetail.current}
                  renderBefore={<Button type="link">下载</Button>}
                />
              ),
            },
          ]}
        />
      </div>

      <FormPageFooter />
    </PageContainer>
  );
};

export default IndexDetailPage;
