import DraggableDialog from "@/components/DraggableDialog";
import InitForm from "@/components/InitForm";
import ShopProductLoadingCard from "@/components/ProductCard/loading";
import ShopProductCard from "@/components/ProductCard/stucard";
import { doFetch } from "@/utils/doFetch";
import PRODUCTS from "@/_mock/products";
import { Box, Container, Grid, Stack, Typography } from "@mui/material";
import { useRequest } from "ahooks";
import { Empty, Input, message,Tabs } from "antd";
import { useMemo, useState } from "react";
import "./index.less";

function Lessons() {
  const [dialogprops, setdialogprops] = useState({
    open: false,
  });
  const [params, setparams] = useState({
    trainName: "",
    status: null,
    typeList: ["1", "2", "3", "4", "5"],
  });

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

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

  const datalist = useRequest(
    async () => {
      let res = await doFetch({ url: "/studentTrain/queryTrainList", params });
      return res?.data?.dataList;
    },
    {
      debounceWait: 400,
      refreshDeps: [params],
    }
  );

  const edit = (row) => {
    setdialogprops({
      open: true,
      defaultFormValue: { ...row },
      title: "编辑",
    });
  };

  const authorized = (row) => {
    doFetch({
      url: "/trainStudent/queryRelationStudent",
      params: { trainId: row?.id },
    }).then((res) => {
      if (res.code === "0000") {
        setdialogprops({
          open: true,
          maxWidth: "xl",
          defaultFormValue: { ...row },
          studentIdList: res?.data?.dataList,
          title: "授权",
        });
      }
    });
  };

  const remove = (row) => {
    runAsync({
      url: "/busTrain/delete",
      params: { id: row.id },
    });
  };

  const publish = (row, params) => {
    const type = row?.type === 1 ? 2 : row?.type === 2 ? 1 : null;
    const extra = params ?? { type };
    runAsync({
      url: "/busTrain/pubOrNotPub",
      params: { id: row.id, ...extra },
    });
  };

  const columns = useMemo(
    () => [
      {
        title: "课程",
        dataIndex: "courseId",
        key: "courseId",
        valueType: "select",
        options: {
          path: "/sysCourse/getLoginTeacherCourseSection",
          params: {},
        },
        colProps: {
          span: 24,
        },
      },
      { title: "实训名称", dataIndex: "trainName", key: "trainName" },
      {
        title: "截止日期",
        dataIndex: "deadline",
        key: "deadline",
        valueType: "date",
      },
      {
        title: "实训封面",
        dataIndex: "pic",
        key: "pic",
        valueType: "uploadImage",
        fieldProps: {
          limit: 1,
        },
        colProps: {
          span: 24,
        },
      },
    ],
    []
  );

  return (
    <Container maxWidth={false}>
      <DraggableDialog
        handleClose={handleClose}
        loading={loading}
        dialogprops={dialogprops}
        maxWidth={dialogprops?.maxWidth ?? "xs"}
      >
        {dialogprops?.title === "编辑" || dialogprops?.title === "新增实训" ? (
          <InitForm
            fields={columns}
            defaultFormValue={dialogprops?.defaultFormValue}
            onValuesChange={async (changedValues, allValues, formRef) => {
              console.log(changedValues);
              if (Object.keys(changedValues)[0] === "courseId") {
                let id = Object.values(changedValues)?.[0] ?? null;
                let res = await doFetch({
                  url: "/sysCourse/detail",
                  params: { id },
                });
                let pic = res?.data?.data?.pic ?? [];
                console.log(pic);
                formRef?.current?.setFieldsValue({
                  pic: [
                    {
                      uid: "1655501390426017792",
                      url: "https://ng-website.oss-cn-hangzhou.aliyuncs.com/2023/05/08/1655501389482299392Bl6w2X.jpg",
                      name: "a1.jpg",
                    },
                  ],
                });
              }
            }}
            onFinish={(val, extra) => {
              let postdata = { ...val },
                url = "/busTrain/saveOrUpdate";
              switch (dialogprops?.title) {
                case "编辑":
                  postdata = {
                    ...val,
                    id: dialogprops?.defaultFormValue?.id,
                  };
                  break;
                default:
                  break;
              }
              runAsync({
                url,
                params: postdata,
              });
            }}
          ></InitForm>
        ) : (
          <InitForm
            defaultFormValue={{
              studentIdList: dialogprops?.studentIdList,
            }}
            fields={[
              {
                rowKey: "id",
                rowName: "name",
                valueType: "FormSelectList",
                dataIndex: "studentIdList",
                colProps: {
                  span: 24,
                },
                columns: [
                  {
                    title: "账号",
                    key: "userAccount",
                    dataIndex: "userAccount",
                    editable: false,
                  },
                  {
                    title: "学生姓名",
                    key: "name",
                    dataIndex: "name",
                    editable: false,
                  },
                  {
                    title: "学校名称",
                    key: "schoolId",
                    dataIndex: "schoolName",
                    valueType: "select",
                    search: false,
                    editable: false,
                  },
                  {
                    title: "院系名称",
                    key: "departmentName",
                    dataIndex: "departmentName",
                    editable: false,
                  },
                  {
                    title: "班级名称",
                    key: "className",
                    dataIndex: "className",
                    editable: false,
                  },
                ],
                path: "/user/getAllStudentByCurrentTeacherSchool",
                params: {
                  type: "3",
                },
              },
            ]}
            onFinish={(val) => {
              const studentIdList = val?.studentIdList?.map((it) => it?.id);
              runAsync({
                url: "/trainStudent/relationTrainStudent",
                params: {
                  studentIdList,
                  trainId: dialogprops?.defaultFormValue?.id,
                },
              });
            }}
          />
        )}
      </DraggableDialog>
      <Box
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        sx={{ mb: 2.5 }}
        mt={0}
      >
        <Typography variant="h5">我的实训</Typography>
        <Stack spacing={2} direction="row">
          <Tabs
            items={[
              {
                key: null,
                label: `全部`,
              },
              {
                key: "1",
                label: `待提交`,
              },
              {
                key: "2",
                label: `已提交`,
              },
              {
                key: "3",
                label: `暂停中`,
              },
              {
                key: "4",
                label: `已结束`,
              },
            ]}
            activeKey={params?.type}
            onChange={(val) => {
              setparams((s) => ({
                ...s,
                type: val,
              }));
            }}
          ></Tabs>

          <Input
            placeholder="请输入课程名称"
            style={{ width: 200, marginLeft: 24  }}
            value={params?.trainName}
            onChange={(e) => {
              setparams((s) => ({
                ...s,
                trainName: e.target.value,
              }));
            }}
          ></Input>
        </Stack>
      </Box>

      <Box mt={2.5}>
        <Grid container spacing={3}>
          {datalist?.loading && !datalist?.data ? (
            PRODUCTS?.map((product, i) => {
              return (
                <Grid
                  key={product.id}
                  item
                  xs={12}
                  sm={6}
                  md={4}
                  lg={3}
                  xl={2.4}
                >
                  <ShopProductLoadingCard product={product} />
                </Grid>
              );
            })
          ) : datalist?.data?.length === 0 ? (
            <Grid xs={12} mt={12}>
              <Empty></Empty>
            </Grid>
          ) : (
            datalist?.data?.map?.((product) => (
              <Grid key={product.id} item xs={12} sm={6} md={4} lg={3} xl={2.4}>
                <ShopProductCard
                  product={product}
                  loading={datalist?.loading}
                  edit={edit}
                  remove={remove}
                  publish={publish}
                  authorized={authorized}
                />
              </Grid>
            ))
          )}
        </Grid>
      </Box>
    </Container>
  );
}

export default Lessons;