import AutoTable from "@/components/AutoTable";
import PremButton from "@/components/PremButton";
import { Box, Container, Stack, Typography } from "@mui/material";
import { useParams } from "@umijs/max";
import { useMemo, useRef } from "react";
import { useRequest } from "ahooks";
import { doFetch } from "@/utils/doFetch";
import "./index.less";

function Record() {
  const actionRef = useRef();
  const params = useParams();

  const { runAsync, loading } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res) => {
      if (res?.code == "0000") {
        message.success("操作成功");
      }
    },
  });



  const rollback = (text, row, action) => {
    return (
      <PremButton
        pop={{
          disabled: row?.reviewType !== 1,
          title: "是否退回该实训?",
          okText: "确认",
          cancelText: "取消",
          onConfirm: async () => {
            await runAsync({
              url: "/studentExperiment/remake",
              params: { id: row?.id },
            });
          },
        }}
        btn={{
          disabled: row?.reviewType !== 1,
          size: "small",
          color: "error",
        }}
      >
        撤回
      </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: 88,
        render: (text, row, _, action) => [
          rollback(text, row, _, action),
        ],
      },
    ];
    return res;
  }, []);

  return (
    <Container maxWidth={false}>
      <Stack
        direction={"row"}
        justifyContent={"space-between"}
        alignItems={"center"}
        mb={2}
      >
        <Typography variant="h5">成绩单</Typography>
        <PremButton
          btn={{
            variant: "outlined",
            onClick: (e) => {
              e.stopPropagation();
              history.back();
            },
          }}
        >
          返回
        </PremButton>
      </Stack>

      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
        <AutoTable
          actionRef={actionRef}
          scroll={{ x: 1366 }}
          columns={[...columns]}
          path={"/studentTrain/experimentPage"}
          extraparams={{
            id: params?.id,
          }}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Record;