mini-programs/src/other_pages/message/index.tsx

import { useState, useEffect } from "react";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import GuideBar from "@/components/GuideBar";
import { withAuth, EmptyState, GeneralNavbar } from "@/components";
import noticeService from "@/services/noticeService";
import { formatRelativeTime } from "@/utils/timeUtils";
import Taro, { useDidShow } from "@tarojs/taro";
import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
import "./index.scss";

// 消息类型定义
interface MessageItem {
  id: string;
  notification_type: string;
  title: string;
  content: string;
  create_time: string;
  is_read: number;
  related_user_avatar?: string;
  related_user_nickname?: string;
  activity_image?: string;
  jump_url?: string;
}

// 消息分类类型
type MessageCategory = "comment" | "follow";

const Message = () => {
  const [activeTab, setActiveTab] = useState<MessageCategory | null>(null);
  const [messageList, setMessageList] = useState<MessageItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [reachedBottom, setReachedBottom] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  // 从 store 获取红点信息
  const reddotInfo = useReddotInfo();
  const fetchReddotInfo = useFetchReddotInfo();

  // 获取消息列表
  const getNoticeList = async () => {
    if (loading) return;
    setLoading(true);
    try {
      const res = await noticeService.getNotificationList({});
      if (res.code === 0) {
        setMessageList(res.data.list || []);
      }
    } catch (e) {
      Taro.showToast({
        title: "获取列表失败，请重试",
        icon: "none",
        duration: 2000,
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getNoticeList();
    fetchReddotInfo();
  }, []);

  // 每次页面显示时刷新红点信息
  useDidShow(() => {
    fetchReddotInfo();
  });

  // 过滤系统消息
  const filteredMessages = messageList;

  // 处理分类标签点击
  const handleTabClick = (tab: MessageCategory) => {
    // 点击评论标签跳转到评论和回复页面
    if (tab === "comment") {
      Taro.navigateTo({
        url: "/other_pages/comment_reply/index",
      });
      return;
    }

    // 点击关注标签跳转到新增关注页面
    if (tab === "follow") {
      Taro.navigateTo({
        url: "/other_pages/new_follow/index",
      });
      return;
    }

    setActiveTab(activeTab === tab ? null : tab);
  };

  // 处理查看详情
  const handleViewDetail = (message: MessageItem) => {

    if (!message.jump_url) {
      console.log("暂无跳转链接");
      return;
    }

    Taro.navigateTo({
      url: message.jump_url,
    }).catch(() => {
      Taro.showToast({
        title: "页面不存在",
        icon: "none",
        duration: 2000,
      });
    });
  };

  // 处理滚动到底部
  const handleScrollToLower = () => {
    if (!reachedBottom && filteredMessages.length > 0) {
      setReachedBottom(true);
      // 2秒后隐藏提示
      setTimeout(() => {
        setReachedBottom(false);
      }, 2000);
    }
  };

  // 处理下拉刷新
  const handleRefresh = async () => {
    setRefreshing(true);
    try {
      const res = await noticeService.getNotificationList({});
      if (res.code === 0) {
        setMessageList(res.data.list || []);
      }
    } catch (e) {
      Taro.showToast({
        title: "刷新失败",
        icon: "none",
        duration: 2000,
      });
    } finally {
      setRefreshing(false);
    }
  };


  return (
    <View className="message-container">
      {/* 顶部导航栏 */}
      <GeneralNavbar title="消息" showBack={false} showAvatar={true} />

      {/* 分类标签 */}
      <View className="category-tabs">
        <View
          className={`tab-item ${activeTab === "comment" ? "active" : ""}`}
          onClick={() => handleTabClick("comment")}
        >
          <View className="tab-icon-wrapper">
            <Image
              className="tab-icon"
              src={require('@/static/message/comment-icon.svg')}
              mode="aspectFit"
            />
            {(reddotInfo?.comment_unread_count || 0) > 0 && (
              <View className="badge">
                {(reddotInfo?.comment_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.comment_unread_count || 0}`}
              </View>
            )}
          </View>
          <Text className="tab-text">评论和回复</Text>
        </View>
        <View
          className={`tab-item ${activeTab === "follow" ? "active" : ""}`}
          onClick={() => handleTabClick("follow")}
        >
          <View className="tab-icon-wrapper">
            <Image
              className="tab-icon"
              src={require('@/static/message/follow-icon.svg')}
              mode="aspectFit"
            />
            {(reddotInfo?.follow_unread_count || 0) > 0 && (
              <View className="badge">
                {(reddotInfo?.follow_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.follow_unread_count || 0}`}
              </View>
            )}
          </View>
          <Text className="tab-text">新增关注</Text>
        </View>
      </View>

      {/* 系统消息卡片列表 */}
      <ScrollView
        scrollY
        className="message-scroll"
        scrollWithAnimation
        enhanced
        showScrollbar={false}
        lowerThreshold={50}
        onScrollToLower={handleScrollToLower}
        refresherEnabled={true}
        refresherTriggered={refreshing}
        onRefresherRefresh={handleRefresh}
      >
        {filteredMessages.length > 0 ? (
          <View className="message-cards">
            {filteredMessages.map((message) => (
              <View className="message-card" key={message.id} onClick={() => handleViewDetail(message)}>
                <View className="card-title-row">
                  <Text className="card-title">{message.title}</Text>
                </View>
                <View className="card-time-row">
                  <Text className="card-time">{formatRelativeTime(message.create_time)}</Text>
                </View>
                <View className="card-content-row">
                  <Text className="card-content">{message.content}</Text>
                </View>
                <View className="card-footer">
                  <View className="footer-divider"></View>
                  <View className="footer-action">
                    <Text className="action-text">查看详情</Text>
                    <View className="action-arrow">

                      <Image className="img" src={require('@/static/message/ar-right.svg')} ></Image>

                    </View>
                  </View>
                </View>
              </View>
            ))}
            {/* 到底了提示 */}
            {filteredMessages.length > 0 && (
              <View className="bottom-tip">
                <Text className="tip-text">到底了</Text>
              </View>
            )}
          </View>
        ) : (
          <EmptyState text="暂无消息" />
        )}
      </ScrollView>

      {/* 底部导航 */}
      <GuideBar currentPage="message" />
    </View>
  );
};

export default withAuth(Message);