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, useModel } from "@umijs/max";
import { Progress } from "antd";
import dayjs from "dayjs";
import { useEffect, 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,
startTime,
totalSubmitExperimentNum,
totalExperimentNum,
unReadMsgCount,
id,
} = product;
const [confirm, setconfirm] = useState(false);
const [shut, setshut] = useState(false);
const {
initialState: { menuNum },
setInitialState,
} = useModel("@@initialState");
const [Numcount, setNumcount] = useState({});
const ifs = type === 1 || type === 3;
let { TEACH_TRAIN_MANAGE_LIST } = menuNum ?? {};
useEffect(() => {
if (!TEACH_TRAIN_MANAGE_LIST) {
return;
}
setNumcount((s) => ({
...s,
[TEACH_TRAIN_MANAGE_LIST.id]: TEACH_TRAIN_MANAGE_LIST?.unReadMsgCount,
}));
}, [TEACH_TRAIN_MANAGE_LIST]);
let num = Numcount?.[id] ?? unReadMsgCount;
return (
<Card sx={{ borderRadius: 3 }} className="hovered" id="jikl">
<div
style={{
width: 24,
height: 24,
backgroundColor: "#ff4800",
position: "absolute",
right: 6,
top: 6,
zIndex: 999,
borderRadius: 30,
color: "#fff",
fontSize: 12,
display: !num ? "none" : "flex",
}}
className="center"
>
{num > 100 ? "99+" : num}
</div>
<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 || type == 4) && (
<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={
(totalSubmitExperimentNum * 100) / (totalExperimentNum ?? 1)
}
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,
}}
>
{startTime ?? "-"}~{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: 5 });
}}
>
<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>
);
}