import AutoTable from "@/components/AutoTable";
import DraggableDialog from "@/components/DraggableDialog";
import PointViewer from "@/components/PointViewer";
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 { useRequest } from "ahooks";
import { Divider, Drawer, message, Table, Tag, Tooltip } from "antd";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { useMemo, useRef, useState } from "react";

import "./index.less";

dayjs.extend(duration);
function removeFirstAndLastChar(str) {
  return str.substring(1, str.length - 1);
}
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",
      render: (text, record) => {
        function secondsToMinutesAndSeconds(seconds) {
          var minutes = Math.floor(seconds / 60);
          var remainingSeconds = seconds % 60;

          return minutes + " 分 " + remainingSeconds + " 秒";
        }

        return secondsToMinutesAndSeconds(record?.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 { runAsync, loading } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res) => {
      if (res?.code == "0000") {
        message.success("操作成功");
      }
    },
  });

  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 },
            });

            let result = await doFetch({
              url: "/studentExperiment/queryResultForPc",
              params: {
                id: row.id,
              },
            });

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

  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: 128,
        render: (text, row, _, action) => [
          detail(text, row, _, action),
          rollback(text, row, _, action),
        ],
      },
    ];
    return res;
  }, []);

  const [drawer, setDrawer] = useState({
    open: false,
    onClose: () => {
      setDrawer((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  return (
    <Container maxWidth={false}>
      <DraggableDialog
        handleClose={handleClose}
        dialogprops={dialogprops}
        maxWidth={dialogprops?.maxWidth ?? "sm"}
        footer={false}
      >
        <div>
          <ProDescriptions
            columns={detailcolumns}
            column={2}
            style={{ marginBottom: 12 }}
            dataSource={dialogprops?.defaultFormValue}
          ></ProDescriptions>
          <Divider></Divider>
          <b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
            实验素养
          </b>
          <Table
            size="small"
            pagination={{
              pageSize: 6,
            }}
            columns={[
              {
                title: "操作名称",
                dataIndex: "config",
                key: "config",
                render: (text, row) => {
                  return row?.config?.name;
                },
              },
              {
                title: "是否操作",
                dataIndex: "isComplete",
                key: "isComplete",
                width: 200,
                render: (text, row) => {
                  return row?.isComplete ? (
                    "完成"
                  ) : (
                    <span style={{ color: "red" }}>未完成</span>
                  );
                },
              },
            ]}
            dataSource={
              dialogprops?.tabdata?.recordDataDic
                ? Object.values(dialogprops?.tabdata?.recordDataDic)
                : []
            }
          ></Table>
          <Divider></Divider>
          <div style={{ position: "relative", minHeight: 360 }}>
            <Drawer
              {...drawer}
              width={"100vh"} //fixer
              title={false}
              closable={false}
              destroyOnClose
            >
              <Button
                variant="contained"
                style={{
                  position: "absolute",
                  right: 18,
                  top: 18,
                  zIndex: 9999,
                }}
                color="error"
                onClick={() => {
                  setDrawer((s) => {
                    return {
                      ...s,
                      open: false,
                    };
                  });
                }}
              >
                ESC
              </Button>
              <PointViewer
                position={drawer?.position}
                CurGongjianData={dialogprops?.tabdata?.CurGongjianData}
                CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
                CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
              ></PointViewer>
            </Drawer>
            <b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
              实验报告
            </b>
            <Table
              size="small"
              pagination={{
                pageSize: 6,
              }}
              columns={[
                {
                  title: "名称",
                  dataIndex: "Name",
                  key: "Name",
                },
                {
                  title: "测量值",
                  dataIndex: "actualValue",
                  key: "actualValue",
                  render: (text, row) => {
                    return row?.actualValue?.toFixed(4) ?? "";
                  },
                },
                {
                  title: "名义值",
                  dataIndex: "normal",
                  key: "normal",
                  render: (text, row) => {
                    return row?.normal?.toFixed(4) ?? "";
                  },
                },
                {
                  title: "上公差",
                  dataIndex: "Upper",
                  key: "Upper",
                },
                {
                  title: "下公差",
                  dataIndex: "Down",
                  key: "Down",
                },
              ]}
              rowKey={"id"}
              dataSource={
                dialogprops?.tabdata?.PeculiarityInfosDict
                  ? Object.values(dialogprops?.tabdata?.PeculiarityInfosDict)
                      ?.map((it, i) => {
                        return it?.map((item, index) => {
                          return {
                            ...item,
                            id: i + "," + index,
                          };
                        });
                      })
                      ?.flat()
                  : []
              }
              expandable={{
                expandedRowRender: ({ ElementInfoList, PointList }) => {
                  return (
                    <div style={{ display: "flex", gap: 6 }}>
                      {ElementInfoList?.map((it) => {
                        return (
                          <div
                            style={{
                              padding: 12,
                              backgroundColor: "#f0f0f0",
                              display: "inline-block",
                              borderRadius: 4,
                              marginBottom: 6,
                            }}
                          >
                            <span style={{ paddingRight: 12 }}>{it?.Name}</span>
                            {it?.PointList?.map((its) => (
                              <Tooltip
                                key={its?.id}
                                title={
                                  <div
                                    dangerouslySetInnerHTML={{
                                      __html: removeFirstAndLastChar(
                                        JSON.stringify(its.Position)
                                      ).replace(/,/g, "<br/>"),
                                    }}
                                  ></div>
                                }
                              >
                                <Tag
                                  onClick={() => {
                                    setDrawer((s) => ({
                                      ...s,
                                      position: its.Position,
                                      open: true,
                                    }));
                                  }}
                                  style={{ cursor: "pointer" }}
                                  color="#13c2c2"
                                >
                                  {its.Name}
                                </Tag>
                              </Tooltip>
                            ))}
                          </div>
                        );
                      })}

                      <div
                        style={{
                          padding: 12,
                          backgroundColor: "#f0f0f0",
                          display: "inline-block",
                          borderRadius: 4,
                          marginBottom: 6,
                        }}
                      >
                        <span style={{ paddingRight: 12 }}>点集合</span>
                        {PointList?.map((its) => (
                          <Tooltip
                            key={its?.id}
                            title={
                              <div
                                dangerouslySetInnerHTML={{
                                  __html: removeFirstAndLastChar(
                                    JSON.stringify(its.Position)
                                  ).replace(/,/g, "<br/>"),
                                }}
                              ></div>
                            }
                          >
                            <Tag
                              onClick={() => {
                                setDrawer((s) => ({
                                  ...s,
                                  position: its.Position,
                                  open: true,
                                }));
                              }}
                              style={{ cursor: "pointer" }}
                              color="#13c2c2"
                            >
                              {its.Name}
                            </Tag>
                          </Tooltip>
                        ))}
                      </div>
                    </div>
                  );
                },
              }}
            ></Table>
          </div>
        </div>
      </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;
