import AutoTable from "@/components/AutoTable";
import DraggableDialog from "@/components/DraggableDialog";
import ImportExcel from "@/components/ImportExcel";
import InitForm from "@/components/InitForm";
import PremButton from "@/components/PremButton";
import SplitDesc from "@/components/SplitDesc";
import { doFetch } from "@/utils/doFetch";
import { ProDescriptions } from "@ant-design/pro-components";
import { Box, Container, Stack, Typography } from "@mui/material";
import { useRequest } from "ahooks";
import { message, Tabs } from "antd";
import { useMemo, useRef, useState } from "react";
import "./index.less";

function Checkhomework() {
  const actionRef = useRef(),
    actionRefs = useRef();
  const [dialogprops, setdialogprops] = useState({
    open: false,
  });
  const [active, setactive] = useState("2");

  const handleClose = () => {
    setdialogprops((s) => ({
      ...s,
      open: false,
    }));
  };

  const { runAsync, loading } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res, parames) => {
      if (res?.code == "0000") {
        handleClose();
        message.success("操作成功");
        if (active === "1") {
          actionRef?.current?.reload();
        } else {
          actionRefs?.current?.reload();
        }
      }
    },
  });

  const audit = (text, row, _, action) => {
    return row.reviewType == 1 ? (
      <PremButton
        btn={{
          size: "small",
          variant: "text",
          onClick: () => {
            setdialogprops({
              open: true,
              defaultFormValue: { ...row },
              title: "批阅",
            });
          },
        }}
      >
        批阅
      </PremButton>
    ) : (
      <PremButton
        btn={{
          size: "small",
          variant: "text",
          color:"inherit",
          onClick: () => {
            setdialogprops({
              open: true,
              defaultFormValue: { ...row },
              title: "详情",
              maxWidth: "md",
              footer: false,
            });
          },
        }}
      >
        详情
      </PremButton>
    );
  };

  const columns = useMemo(
    () => [
      { 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: "score", key: "score", hideInSearch: true },
      { title: "权重", dataIndex: "weight", key: "weight", hideInSearch: true },
      { 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",
        mode: "radio",
        options: [
          { label: "待批阅", value: "1" },
          { label: "已批阅", value: "2" },
        ],
      },
    ],
    []
  );

  const detailcolumns = [
    { 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: "score", key: "score", hideInSearch: true },
    { title: "权重", dataIndex: "weight", key: "weight", hideInSearch: true },
    { title: "分数", dataIndex: "scoreWeight", key: "scoreWeight" },
    {
      title: "提交时间",
      dataIndex: "finishTime",
      key: "finishTimeRange",
    },
    {
      title: "批阅时间",
      dataIndex: "reviewTime",
      key: "reviewTimeRange",
    },
  ];

  const columes = useMemo(() => {
    return [
      { 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: "score", key: "score", hideInSearch: true },
      { title: "权重", dataIndex: "weight", key: "weight", hideInSearch: true },
      { 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",
        mode: "radio",
        options: [
          { label: "待批阅", value: "1" },
          { label: "已批阅", value: "2" },
        ],
      },
    ];
  }, []);

  const items = [
    {
      key: "2",
      label: `已提交`,
      children: (
        <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
          <AutoTable
            actionRef={actionRefs}
            scroll={{ x: 1366 }}
            columns={[
              ...columes,
              {
                title: "操作",
                valueType: "option",
                width: 88,
                render: (text, row, _, action) => [audit(text, row, _, action)],
              },
            ]}
            path="/studentExperiment/queryPageByLoginTeacher"
            rerendered={false}
            extraparams={{ type: "2" }}
          ></AutoTable>
        </Box>
      ),
    },
    {
      key: "1",
      label: `待提交`,
      children: (
        <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
          <AutoTable
            actionRef={actionRef}
            scroll={{ x: 1366 }}
            columns={[...columns]}
            extraparams={{ type: "1" }}
            path="/studentExperiment/queryPageByLoginTeacher"
            rerendered={false}
          ></AutoTable>
        </Box>
      ),
    },
  ];

  return (
    <Container maxWidth={false}>
      <DraggableDialog
        handleClose={handleClose}
        loading={loading}
        dialogprops={dialogprops}
        maxWidth={dialogprops?.maxWidth ?? "sm"}
        formdom={
          dialogprops?.title === "批阅" && (
            <InitForm
              fields={[
                {
                  title: "批阅信息",
                  dataIndex: "sort",
                  key: "sort",
                  valueType: "split",
                },
                {
                  title: "打分",
                  dataIndex: "score",
                  key: "score",
                  colProps: { span: 24 },
                  valueType: "digit",
                },
              ]}
              defaultFormValue={{ examineResult: "1" }}
              onFinish={(val, extra) => {
                let postdata = {
                  ...val,
                  id: dialogprops?.defaultFormValue?.id,
                };
                runAsync({
                  url: "/studentExperiment/giveScore",
                  params: postdata,
                });
              }}
            ></InitForm>
          )
        }
      >
        {dialogprops?.title === "批阅" ? (
          <ProDescriptions
            columns={detailcolumns}
            column={2}
            style={{ marginBottom: 12 }}
            dataSource={dialogprops?.defaultFormValue}
          ></ProDescriptions>
        ) : dialogprops?.title === "详情" ? (
          <Stack
            direction={"column"}
            alignItems={"center"}
            justifyContent={"center"}
            gap={1}
          >
            <SplitDesc
              columns={[
                detailcolumns,
                {
                  title: "批阅信息",
                  dataIndex: "sort",
                  key: "sort",
                  valueType: "split",
                },
                [
                  {
                    title:"实验时长",
                    dataIndex:"useTime",
                    key:"useTime"
                  },
                  {
                    title: "批阅状态",
                    dataIndex: "reviewTypeName",
                    key: "reviewTypeName",
                  },
                  {
                    title: "批阅时间",
                    dataIndex: "reviewTime",
                    key: "reviewTime",
                  },
                  {
                    title: "批阅人",
                    dataIndex: "reviewUserName",
                    key: "reviewUserName",
                  },
                  {
                    title: "分数",
                    dataIndex: "score",
                    key: "score",
                  },
                ],
              ]}
              dataSource={dialogprops?.defaultFormValue}
            ></SplitDesc>
          </Stack>
        ) : (
          <InitForm
            fields={columns}
            defaultFormValue={dialogprops?.defaultFormValue}
            onFinish={(val, extra) => {
              let postdata = { ...val, type: "3" };
              switch (dialogprops?.title) {
                case "编辑":
                  postdata = {
                    ...val,
                    id: dialogprops?.defaultFormValue?.id,
                  };
                  break;
                default:
                  break;
              }
              runAsync({
                url: "/user/saveOrUpdate",
                params: postdata,
              });
            }}
          ></InitForm>
        )}
      </DraggableDialog>

      <Box
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        sx={{ mb: 1 }}
        mt={0}
      >
        <Typography variant="h5">作业批阅</Typography>
        {active === "1" ? (
          <Stack spacing={2} direction="row">
            <ImportExcel></ImportExcel>
            <PremButton
              btn={{
                variant: "contained",
                onClick: (e) => {
                  e.stopPropagation();
                  setdialogprops({
                    open: true,
                    defaultFormValue: {},
                    title: "新增学生",
                  });
                },
              }}
            >
              新增学生
            </PremButton>
          </Stack>
        ) : (
          <Box height={36} />
        )}
      </Box>

      <Tabs
        activeKey={active}
        onChange={setactive}
        items={items}
        tabPosition="top"
        animated={true}
      />
    </Container>
  );
}

export default Checkhomework;