stucard.jsx

import PropTypes from "prop-types";
// @mui
import {
  Box,
  Card,
  colors,
  IconButton,
  Stack,
  Tooltip,
  Typography,
} from "@mui/material";
import { styled } from "@mui/material/styles";
// utils
// components
import IconFont from "@/components/IconFont";
import Label from "@/components/label";
import difftime from "@/utils/difftime";
import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
import { history } from "@umijs/max";
import dayjs from "dayjs";
import { useState } from "react";

// ----------------------------------------------------------------------

const StyledProductImg = styled("img")({
  top: 0,
  width: "92%",
  height: "92%",
  marginTop: "4%",
  objectFit: "cover",
  position: "absolute",
});

ShopProductCard.propTypes = {
  product: PropTypes.object,
};

export default function ShopProductCard({
  product,
}) {
  const {
    trainName,
    picUrl,
    createTime,
    typeName,
    type,
    deadline,
    sectionNum,
    experimentNum,
    startTime,
  } = product;
  const [confirm, setconfirm] = useState(false);
  const [shut, setshut] = useState(false);


  return (
    <Card sx={{ borderRadius: 3 }} className="hovered" id="jikl">
      <Box sx={{ pt: "66%", position: "relative" }} className="center">
        {typeName && (
          <Label
            variant="filled"
            color={
              (type === 1 && "warning") ||
              (type === 2 && "info") ||
              (type === 3 && "default") ||
              "error"
            }
            sx={{
              zIndex: 9,
              top: 20,
              left: 20,

              position: "absolute",
              textTransform: "uppercase",
            }}
          >
            {typeName}
          </Label>
        )}
        <StyledProductImg
          alt={trainName}
          src={picUrl ?? DEFAULT_404_IMG}
          sx={{ borderRadius: 2 }}
        />
      </Box>

      <Stack spacing={1} sx={{ p: 2 }}>
        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          width={"100%"}
          overflow={"hidden"}
          alignItems={"center"}
        >
          <div className="center">
            <Tooltip placement="bottom-start" title={trainName}>
              <Typography
                variant="subtitle2"
                noWrap
                sx={{
                  paddingLeft: 0,
                }}
              >
                {trainName}
              </Typography>
            </Tooltip>
          </div>

          <Box width={60} textAlign={"right"} flexShrink={0}>
            <Tooltip placement="bottom-start" title={createTime}>
              <Typography
                component="span"
                variant="body2"
                sx={{
                  color: "text.disabled",
                }}
              >
                {difftime(dayjs(), dayjs(createTime))}
              </Typography>
            </Tooltip>
          </Box>
        </Stack>

        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          width={"100%"}
          overflow={"hidden"}
          alignItems={"center"}
        >
          <Stack direction={"row"} alignItems={"center"}>
            <AccessTimeFilledIcon
              sx={{ color: colors.grey[800], fontSize: 20 }}
            />
            <Typography
              component="span"
              variant="body2"
              sx={{
                paddingLeft: 1,
              }}
            >
              {startTime ?? "-"}~{deadline}
            </Typography>
          </Stack>
        </Stack>

        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          alignItems={"center"}
          padding={"0 2px"}
        >
          <Stack direction={"row"} spacing={2} alignItems={"center"}>
            <Stack
              direction={"row"}
              alignItems={"center"}
              sx={{ cursor: "pointer" }}
            >
              <IconFont
                type="icon-beike"
                style={{ fontSize: 16, opacity: 0.6 }}
              ></IconFont>

              <Typography
                component="span"
                variant="body2"
                sx={{
                  color: "text.disabled",
                  paddingLeft: 1.2,
                  fontSize: 12,
                  margin: 0,
                }}
              >
                {sectionNum}课时/{experimentNum}实验
              </Typography>
            </Stack>
          </Stack>

          <Stack
            direction={"row"}
            spacing={0}
            flex={1}
            justifyContent={"flex-end"}
          >
            <Tooltip placement="bottom-start" title={"开始学习"}>
              <IconButton
                onClick={() => {
                  history.push("/work/domybustrain/" + product.id);
                }}
              >
                <IconFont
                  type="icon-w_xuexi"
                  style={{ fontSize: 26, color: colors.blue[600] }}
                ></IconFont>
              </IconButton>
            </Tooltip>

            <Tooltip placement="bottom-start" title={"成绩"}>
              <IconButton
                disabled={shut === "1"}
                sx={{ flexShrink: 0 }}
                onClick={() => {
                  history.push("/work/myrebustrain/" + product.id);
                }}
              >
                <div style={{ width: 26, height: 26 }} className="center">
                  <IconFont
                    type="icon-chengjidan-copy"
                    style={{
                      fontSize: 20,
                      color: "#000",
                    }}
                  ></IconFont>
                </div>
              </IconButton>
            </Tooltip>
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
}