import AutoTable from "@/components/AutoTable";
import { Box, Container, Stack, Typography } from "@mui/material";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { useMemo, useRef } from "react";
import "./index.less";

dayjs.extend(duration);

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

  const columns = useMemo(() => {
    let res = [
      { 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: "fromTime",
        key: "fromTimeRange",
        valueType: "dateTimeRange",
      },
      {
        title: "完成学习时间",
        dataIndex: "toTime",
        key: "toTimeRange",
        valueType: "dateTimeRange",
      },
      {
        title: "学习时长",
        dataIndex: "duration",
        key: "duration",
        hideInSearch: true,
        render: (txt, row) => {
          let text = row?.duration ?? 0;
          const duration = dayjs.duration(text, "seconds");
          const H = duration.format("HH");
          const m = duration.format("mm");
          const s = duration.format("ss");
          const resH = H != "00" ? `${H}小时` : "";
          const resm = m != "00" ? `${m}分钟` : "";
          const ress = s != "00" ? `${s}秒` : "-";
          return resH + resm + ress;
        },
      },
    ];
    return res;
  }, []);

  return (
    <Container maxWidth={false}>
      <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={"/studyRecord/teacher/page"}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Record;