ZKCX/src/components/MessageModal/MessageModal.tsx

import React, { useState } from "react";
import { Modal, Button, Tabs } from "antd";
import { CheckCircleOutlined, EyeOutlined } from "@ant-design/icons";
import type { TabsProps } from "antd";
import { MESSAGE_TAB } from "@/constants";
import { useNotificationStore } from "@/store/NotificationStore";
import { Eraser, FileText } from "lucide-react";
import dayjs from "dayjs";

interface MessageModalProps {
  visible: boolean;
  onClose: () => void;
  socket: any;
}

const MessageModal: React.FC<MessageModalProps> = ({
  visible,
  onClose,
  socket,
}) => {
  const [activeKey, setActiveKey] = useState(MESSAGE_TAB.UNREAD);
  const { notifications } = useNotificationStore();
  console.log("notifications", notifications);

  const tabItems: TabsProps["items"] = [
    {
      key: MESSAGE_TAB.ALL,
      label: (
        <span className="flex">
          全部
          <span className="text-xs text-white bg-red-500 rounded-full w-5 h-5 flex justify-center items-center">
            {notifications.length > 9 ? "9+" : notifications.length}
          </span>
        </span>
      ),
    },
    {
      key: MESSAGE_TAB.UNREAD,
      label: (
        <span className="flex">
          未读{" "}
          <span className="text-xs text-white bg-red-500 rounded-full w-5 h-5 flex justify-center items-center">
            {notifications.filter(
              (notification) => notification.status === MESSAGE_TAB.UNREAD
            ).length > 9
              ? "9+"
              : notifications.filter(
                  (notification) => notification.status === MESSAGE_TAB.UNREAD
                ).length}
          </span>
        </span>
      ),
    },
    {
      key: MESSAGE_TAB.HAS_READ,
      label: (
        <span className="flex">
          已读
          <span className="text-xs text-white bg-red-500 rounded-full w-5 h-5 flex justify-center items-center">
            {notifications.filter(
              (notification) => notification.status === MESSAGE_TAB.HAS_READ
            ).length > 9
              ? "9+"
              : notifications.filter(
                  (notification) => notification.status === MESSAGE_TAB.HAS_READ
                ).length}
          </span>
        </span>
      ),
    },
  ];

  return (
    <Modal
      title={
        <div className="flex items-center">
          <span>消息中心 (1)</span>
          <div className="cursor-pointer hover:bg-gray-100 rounded-md px-2 py-1 ml-2 text-xs flex justify-center items-center gap-1">
            <Eraser size={12} />
            清除消息
          </div>
        </div>
      }
      open={visible}
      onCancel={onClose}
      footer={null}
      width={600}
      style={{ top: 10 }}
    >
      <div className="flex flex-col">
        <Tabs
          activeKey={activeKey}
          items={tabItems}
          className="mb-4"
          onChange={(key) => {
            setActiveKey(key);
          }}
        />
        <div className="space-y-4 max-h-[70vh] overflow-auto">
          {notifications
            .filter(
              (notification) =>
                activeKey === MESSAGE_TAB.ALL ||
                notification.status === activeKey
            )
            .map((message, index) => (
              <div
                key={index}
                className="p-4 bg-gray-50 rounded-lg shadow-sm flex flex-col gap-4"
              >
                <div className="flex justify-between items-center">
                  <div className="flex gap-1 items-center">
                    <div className="p-1 bg-blue-500 rounded-full w-6 h-6 text-white flex justify-center items-center">
                      <FileText size={14} />
                    </div>
                    <div className="font-bold">病例时效提醒</div>
                  </div>
                  <div className="text-gray-500 text-xs">
                    {dayjs(message.timestamp).format("YYYY-MM-DD HH:mm")}
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <div className="flex-1">
                    <div className="flex">
                      <h4 className="text-sm font-semibold">{message.title}</h4>
                    </div>
                    <p className="text-gray-700 mt-1 indent-[1.75rem]">
                      {message.message}
                    </p>
                    <p className="text-gray-700 mt-1 indent-[1.75rem]">
                      {message.footer || "祝您工作顺利！"}
                    </p>
                    <div className="mt-2 flex space-x-2 justify-end">
                      <Button size="middle">知道了</Button>
                      <Button type="primary" size="middle">
                        去查看
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </div>
    </Modal>
  );
};

export default MessageModal;