sxcard.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 CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import GroupIcon from "@mui/icons-material/Group";
import PauseIcon from "@mui/icons-material/Pause";
import { history } from "@umijs/max";
import { Progress } from "antd";
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,
  remove,
  edit,
  copy,
  publish,
  authorized,
  tauthorized,
}) {
  const {
    trainName,
    picUrl,
    createTime,
    typeName,
    type,
    deadline,
    sectionNum,
    experimentNum,
    studentNum,
    totalSubmitExperimentNum,
    totalExperimentNum,
  } = product;
  const [confirm, setconfirm] = useState(false);
  const [shut, setshut] = useState(false);

  const ifs = type === 1 || type === 3;

  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
          className="actionhover"
          sx={{ borderRadius: 2, overflow: "hidden" }}
        >
          <Box className="masker"></Box>
          {ifs && (
            <Box className="edit">
              <Tooltip placement="bottom-start" title="编辑">
                <IconButton
                  onClick={() => {
                    edit(product);
                  }}
                >
                  <EditIcon
                    style={{ fontSize: 20, color: colors.blue[200] }}
                  ></EditIcon>
                </IconButton>
              </Tooltip>

              <Tooltip
                placement="bottom-start"
                title={confirm ? "确认删除" : "删除"}
              >
                {confirm ? (
                  <IconButton
                    disabled={confirm === "1"}
                    onClick={() => {
                      remove(product);
                    }}
                    sx={{ marginLeft: 2 }}
                  >
                    <CheckIcon
                      style={{
                        fontSize: 20,
                        color:
                          confirm === "1"
                            ? colors.grey[500]
                            : colors.green[500],
                      }}
                    ></CheckIcon>
                  </IconButton>
                ) : (
                  <IconButton
                    onClick={() => {
                      setconfirm("1");

                      setTimeout(() => {
                        setconfirm(true);
                      }, 200);

                      setTimeout(() => {
                        setconfirm(false);
                      }, 3000);
                    }}
                  >
                    <DeleteIcon
                      style={{ fontSize: 20, color: colors.red[500] }}
                    ></DeleteIcon>
                  </IconButton>
                )}
              </Tooltip>
            </Box>
          )}

          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
            width={"100%"}
            className="stackani"
            padding={"0px 12px"}
          >
            <Tooltip placement="bottom-start" title={"协作教师"}>
              <IconButton
                onClick={() => {
                  tauthorized(product, ifs);
                }}
              >
                <GroupIcon
                  style={{
                    fontSize: 24,
                    color: "#fff",
                  }}
                ></GroupIcon>
              </IconButton>
            </Tooltip>

            <Tooltip placement="bottom-start" title={"成绩管理"}>
              <IconButton
                onClick={() => {
                  history.push("/work/rebustrain/" + product.id);
                }}
              >
                <IconFont
                  type="icon-chengjidan"
                  style={{
                    fontSize: 20,
                    color: "#fff",
                  }}
                ></IconFont>
              </IconButton>
            </Tooltip>
          </Stack>
        </Box>
      </Box>

      <Stack spacing={1} sx={{ p: 2 }}>
        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          width={"100%"}
          overflow={"hidden"}
          alignItems={"center"}
        >
          <div className="center">
            <Progress
              type="circle"
              size={20}
              percent={parseInt(Math.random() * 100)}
              strokeColor={{
                "0%": "#00c6fb",
                "100%": "#005bea",
              }}
            />
            <Tooltip placement="bottom-start" title={trainName}>
              <Typography
                variant="subtitle2"
                noWrap
                sx={{
                  paddingLeft: 1,
                }}
              >
                {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,
              }}
            >
              截止日期: {deadline}
            </Typography>
          </Stack>
        </Stack>

        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          alignItems={"center"}
          padding={"0 2px"}
        >
          <Stack direction={"row"} spacing={2} alignItems={"center"}>
            <Tooltip placement="bottom-start" title="备课">
              <Stack
                direction={"row"}
                alignItems={"center"}
                onClick={() => {
                  history.push("/work/dobustrain/" + product.id);
                }}
                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>
            </Tooltip>

            <Tooltip placement="bottom-start" title="授权">
              <Stack
                direction={"row"}
                alignItems={"center"}
                sx={{ cursor: "pointer" }}
                onClick={() => {
                  authorized(product, ifs);
                }}
              >
                <IconFont
                  type="icon-shouquanguanli"
                  style={{ fontSize: 16, color: "#999" }}
                ></IconFont>
                <Typography
                  component="a"
                  variant="body2"
                  sx={{
                    color: "text.disabled",
                    paddingLeft: 1.2,
                    fontSize: 12,
                    margin: 0,
                  }}
                >
                  {studentNum}学生
                </Typography>
              </Stack>
            </Tooltip>
          </Stack>

          <Stack direction={"row"} spacing={0}>
            <Tooltip placement="bottom-start" title={ifs ? "发布" : "暂停发布"}>
              <IconButton
                style={{
                  opacity: type !== 5 && type !== 4 ? 1 : 0,
                  pointerEvents: type === 5 || type === 4 ? "none" : "auto",
                }}
                onClick={() => {
                  if (type === 5 || type === 4) return;
                  if (ifs) {
                    publish(product, { type: 2 });
                  } else {
                    publish(product, { type: 3 });
                  }
                }}
              >
                {ifs ? (
                  <IconFont
                    type="icon-fabu"
                    style={{ fontSize: 20, color: colors.blue[600] }}
                  ></IconFont>
                ) : (
                  <PauseIcon
                    style={{ fontSize: 20, color: colors.grey[900] }}
                  ></PauseIcon>
                )}
              </IconButton>
            </Tooltip>

            {type === 3 && (
              <Tooltip
                placement="bottom-start"
                title={shut ? "确认关闭" : "关闭"}
              >
                {shut ? (
                  <IconButton
                    disabled={shut === "1"}
                    onClick={() => {
                      publish(product, { type: 3 });
                    }}
                  >
                    <CheckIcon
                      style={{
                        fontSize: 20,
                        color:
                          shut === "1" ? colors.grey[500] : colors.green[500],
                      }}
                    ></CheckIcon>
                  </IconButton>
                ) : (
                  <IconButton
                    onClick={() => {
                      setshut("1");

                      setTimeout(() => {
                        setshut(true);
                      }, 200);

                      setTimeout(() => {
                        setshut(false);
                      }, 3000);
                    }}
                  >
                    <CloseIcon
                      type="icon-guanbi"
                      style={{ fontSize: 20, color: "#ff4800" }}
                    ></CloseIcon>
                  </IconButton>
                )}
              </Tooltip>
            )}
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
}