import AutoTable from "@/components/AutoTable";
import DraggableDialog from "@/components/DraggableDialog";
import PremButton from "@/components/PremButton";
import { doFetch } from "@/utils/doFetch";
import { ProDescriptions } from "@ant-design/pro-components";
import { Box, Container, Stack, Typography } from "@mui/material";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { useMemo, useRef, useState } from "react";
import "./index.less";

dayjs.extend(duration);

function Record() {
  const actionRef = useRef();
  const [dialogprops, setdialogprops] = useState({
    open: false,
  });
  const handleClose = () => {
    setdialogprops((s) => ({
      ...s,
      open: false,
    }));
  };
  const detailcolumns = [
    {
      title: "分数",
      dataIndex: "score",
      key: "score",
      hideInSearch: true,
      span: 2,
    },
    {
      title: "评语",
      dataIndex: "comment",
      key: "comment",
      span: 2,
    },
    { title: "学生姓名", dataIndex: "studentName", key: "studentName" },
    { title: "学生账号", dataIndex: "studentAccount", key: "studentAccount" },
    { title: "课程名称", dataIndex: "courseName", key: "courseName" },
    { title: "实训名称", dataIndex: "trainName", key: "trainName" },
    { title: "实验名称", dataIndex: "experimentName", key: "experimentName" },
    {
      title: "实验时长（分钟）",
      dataIndex: "testTime",
      key: "testTime",
    },
    { title: "权重", dataIndex: "weight", key: "weight", hideInSearch: true },
    { title: "分数", dataIndex: "scoreWeight", key: "scoreWeight" },
    {
      title: "提交时间",
      dataIndex: "finishTime",
      key: "finishTimeRange",
    },
    {
      title: "批阅人",
      dataIndex: "reviewUserName",
      key: "reviewUserName",
    },
    {
      title: "批阅时间",
      dataIndex: "reviewTime",
      key: "reviewTime",
    },
  ];

  const detail = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: "small",
          variant: "text",
          color: "inherit",
          onClick: async () => {
            let res = await doFetch({
              url: "/studentExperiment/detail",
              params: { id: row?.id },
            });

            setdialogprops({
              open: true,
              defaultFormValue: { ...res?.data?.data },
              title: "详情",
              maxWidth: "md",
              footer: false,
            });
          },
        }}
      >
        详情
      </PremButton>
    );
  };

  const columns = useMemo(() => {
    let res = [
      { title: "课程名称", dataIndex: "courseName", key: "courseName" },
      { title: "实训名称", dataIndex: "trainName", key: "trainName" },
      { title: "实验名称", dataIndex: "experimentName", key: "experimentName" },
      {
        title: "分数",
        dataIndex: "scoreWeight",
        key: "scoreWeight",
        hideInSearch: true,
      },
      {
        title: "提交时间",
        dataIndex: "finishTime",
        key: "finishTimeRange",
        valueType: "dateTimeRange",
      },
      {
        title: "批阅时间",
        dataIndex: "reviewTime",
        key: "reviewTimeRange",
        valueType: "dateTimeRange",
      },
      {
        title: "批阅状态",
        dataIndex: "reviewTypeName",
        key: "reviewType",
        valueType: "select",
        options: [
          { label: "待批阅", value: "1" },
          { label: "已批阅", value: "2" },
        ],
      },
      {
        title: "操作",
        valueType: "option",
        width: 78,
        render: (text, row, _, action) => [detail(text, row, _, action)],
      },
    ];
    return res;
  }, []);

  return (
    <Container maxWidth={false}>
      <DraggableDialog
        handleClose={handleClose}
        dialogprops={dialogprops}
        maxWidth={dialogprops?.maxWidth ?? "sm"}
        footer={false}
      >
        <ProDescriptions
          columns={detailcolumns}
          column={2}
          style={{ marginBottom: 12 }}
          dataSource={dialogprops?.defaultFormValue}
        ></ProDescriptions>
      </DraggableDialog>

      <Stack direction={"row"} mb={2}>
        <Typography variant="h5">我的成绩</Typography>
      </Stack>

      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
        <AutoTable
          actionRef={actionRef}
          scroll={{ x: 1366 }}
          columns={[...columns]}
          path={"/studentExperiment/queryPageByLoginStudent"}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Record;