import AutoTable from "@/components/AutoTable";
import PremButton from "@/components/PremButton";
import { doFetch } from "@/utils/doFetch";
import { Box, Container, Stack, Typography } from "@mui/material";
import { useRequest } from "ahooks";
import { Select, Statistic } from "antd";
import { useMemo, useRef, useState } from "react";
import CountUp from "react-countup";
import "./index.less";

const formatter = (value) => <CountUp end={value} separator="," decimals={2} />;

function Record() {
  const actionRef = useRef(),
  formRef = useRef();
  const [params, setparams] = useState({});

  const { runAsync, data, loading } = useRequest(
    async () => {
      let res = await doFetch({
        url: "/studentExperiment/scoreReport",
        params,
      });
      return res?.data?.data;
    },
    {
      debounceWait: 400,
      refreshDeps: [params],
    }
  );

  const columns = useMemo(() => {
    let arr = [];
    if (data?.listDynamicField) {
      arr = data?.listDynamicField?.map((it, i) => {
        return {
          title: `${it?.experimentName}(${it?.weight}%)`,
          dataIndex: it?.key,
          key: it?.key,
          search: false,
        };
      });
    }
    let res = [
      { title: "姓名", dataIndex: "name", key: "studentName" },
      { title: "账号", dataIndex: "userAccount", key: "studentAccount" },
      { title: "班级名称", dataIndex: "className", key: "className" },
      ...arr,
      { title: "实训总分", dataIndex: "score", key: "score", search: false },
      {
        title: "排名",
        dataIndex: "sort",
        key: "sort",
        search: false,
        sorter: {
          compare: (a, b) => a.sort - b.sort,
        },
      },
    ];

    return res;
  }, [data]);

  const options = useRequest(
    async () => {
      let res = await doFetch({
        url: "/busTrain/loginTeacher/selection",
        params: {},
      });
      return res?.data?.dataList;
    },
    {
      debounceWait: 200,
    }
  );


  return (
    <Container maxWidth={false}>
      <Stack direction={"row"}>
        <Typography variant="h5">成绩单</Typography>
        <Select
          options={options.data}
          value={params?.trainId}
          onChange={(val) => {
            setparams((s) => ({
              ...s,
              trainId: val,
            }));
          }}
          style={{
            width: 200,
            marginLeft: 20,
          }}
          placeholder="请选择实训"
        ></Select>
      </Stack>

      <Box
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        sx={{ mb: 2.5, mt: 2 }}
        mt={0}
      >
        <Box display={"flex"} alignItems={"flex-end"} gap={2}>
          <Box sx={{ display: "flex", gap: 4 }}>
            <Statistic
              title="实训平均分"
              value={data?.statistics?.average}
              formatter={formatter}
            />
            <Statistic
              title="实训完成率"
              value={data?.statistics?.finishPer}
              formatter={formatter}
              suffix="%"
            />
            <Statistic
              title="实训通过率"
              value={data?.statistics?.passPer}
              formatter={formatter}
              suffix="%"
            />
          </Box>
        </Box>
        <Stack spacing={2} direction="row">
          <PremButton
            btn={{
              variant: "contained",
              onClick: async (e) => {
                e.stopPropagation();
                let formval = formRef?.current.getFieldsValue();
                const param = {
                  ...formval,
                  ...params,
                };
                await doFetch({
                  url: "/studentExperiment/scoreReportExport",
                  params: param,
                });
              },
            }}
          >
            导出
          </PremButton>
        </Stack>
      </Box>

      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
        <AutoTable
          actionRef={actionRef}
          formRef={formRef}
          scroll={{ x: 1366 }}
          columns={[...columns]}
          dataSource={data?.list ?? []}
          onValuesChange={(changedValues, values) => {
            setparams((s) => ({
              ...values,
              trainId: s.trainId,
            }));
          }}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Record;
