<template>
    <view class="messages-page">
        <view class="flex flex-col">
            <view id="page-header" class="bg-orange-400 p-4 pt-4 pb-4">
                <nut-row type="flex" justify="center" align="center">
                    <nut-col span="4">
                        <view class="text-xl font-bold text-white">消息</view>
                    </nut-col>
                    <nut-col span="20">
                        <!-- Search Bar -->
                        <nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" shape="round"
                            background="transparent" input-background="#ffffff">
                            <template #leftin>
                                <Search2 />
                            </template>
                        </nut-searchbar>
                    </nut-col>
                </nut-row>
            </view>
        </view>


        <nut-sticky>
            <!-- 状态筛选标签 -->
            <view id="status-tabs" class="status-tabs">
                <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="setActiveTab('all')">
                    全部
                </view>
                <view class="tab-item" :class="{ active: activeTab === 'unread' }" @click="setActiveTab('unread')">
                    未读
                </view>
                <view class="tab-item" :class="{ active: activeTab === 'notification' }"
                    @click="setActiveTab('notification')">
                    通知
                </view>
                <view class="tab-item" :class="{ active: activeTab === 'message' }" @click="setActiveTab('message')">
                    留言
                </view>
            </view>
        </nut-sticky>

        <!-- 消息列表内容 -->
        <scroll-view ref="scrollViewRef" class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
            @scroll="scroll" :lower-threshold="100" :enable-flex="false" :scroll-top="scrollTop">
            <view v-for="conversation in filteredConversations" :key="conversation.id"
                class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
                @click="onConversationClick(conversation)">
                <nut-row>
                    <nut-col :span="6" class="avatar-container">
                        <view class="relative">
                            <image v-if="conversation.avatar" :src="conversation.avatar"
                                class="w-12 h-12 rounded-full object-cover" mode="aspectFill" />
                            <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                                <component :is="conversation.icon" />
                            </view>
                        </view>
                    </nut-col>
                    <nut-col :span="20" class="content-container">
                        <view class="flex justify-between items-center mb-1">
                            <text class="font-medium truncate flex-1 mr-2">{{ conversation.name }}</text>
                            <view class="flex items-center flex-shrink-0">
                                <text class="text-xs text-gray-500">{{ conversation.time }}</text>
                                <view v-if="conversation.unread" class="ml-1 w-2 h-2 bg-red-500 rounded-full">
                                </view>
                            </view>
                        </view>
                        <text class="text-sm text-gray-600 truncate block">{{ conversation.lastMessage }}</text>
                    </nut-col>
                </nut-row>
            </view>

            <!-- Loading indicator -->
            <view v-if="loading" class="loading-container">
                <text class="loading-text">加载中...</text>
            </view>

            <!-- 没有更多数据 -->
            <view v-if="!hasMore && filteredConversations.length > 0" class="no-more">
                <text class="no-more-text">没有更多消息了</text>
            </view>
        </scroll-view>

        <!-- 自定义TabBar -->
        <TabBar />

        <!-- 消息详情弹框 -->
        <nut-popup v-model:visible="showMessageDetail" position="right" :style="{ width: '100%', height: '100%' }"
            closeable close-icon-position="top-right" @close="closeMessageDetail">
            <view class="message-detail-container">
                <!-- 详情页头部 -->
                <view class="detail-header">
                    <view class="flex items-center">
                        <image v-if="selectedConversation?.avatar" :src="selectedConversation.avatar"
                            class="w-12 h-12 rounded-full object-cover mr-3" mode="aspectFill" />
                        <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                            <component :is="selectedConversation?.icon" />
                        </view>
                        <view class="flex-1">
                            <text class="text-lg font-medium">{{ selectedConversation?.name }}</text>
                            <text class="text-sm text-gray-500 block">{{ selectedConversation?.time }}</text>
                        </view>
                    </view>
                </view>

                <!-- 消息内容 -->
                <view class="detail-content">
                    <view class="message-content">
                        <text class="text-base">{{ selectedConversation?.lastMessage }}</text>
                    </view>
                </view>

                <!-- 底部关闭按钮 -->
                <view class="detail-footer">
                    <nut-button type="primary" size="large" block @click="closeMessageDetail">
                        关闭
                    </nut-button>
                </view>
            </view>
        </nut-popup>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, markRaw } from 'vue'

import { Search2, Notice, Message } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import { $ } from '@tarojs/extend'

const scrollStyle = ref({
    height: 'calc(100vh - 500rpx)'
})

// 滚动相关变量
const scrollViewRef = ref(null)
const scrollTop = ref(0)

// 搜索值
const searchValue = ref('')
const onBlurSearch = () => {
    console.warn(searchValue.value)
}
// 当前激活的Tab
const activeTab = ref('all')
// 加载状态
const loading = ref(false)
// 页码
const page = ref(1)
// 每页数量
const pageSize = 10
// 是否还有更多数据
const hasMore = ref(true)

// 模拟对话数据
const conversations = ref([])

// 消息详情弹框相关
const showMessageDetail = ref(false)
const selectedConversation = ref(null)

// 模拟消息历史记录
const mockMessages = ref([])

// 初始化数据
const initData = () => {
    const mockData = []

    // 生成更多初始数据确保可以滚动
    for (let i = 1; i <= 15; i++) {
        const types = ['chat', 'notification', 'message']
        const type = types[i % 3]

        mockData.push({
            id: i,
            name: type === 'notification' ? '系统通知' : type === 'message' ? '客服留言' : `用户${i}`,
            avatar: type === 'chat' ? `https://randomuser.me/api/portraits/men/${(i % 50) + 1}.jpg` : '',
            icon: type === 'notification' ? markRaw(Notice) : type === 'message' ? markRaw(Message) : null,
            lastMessage: type === 'notification' ? '您有新的系统通知' : type === 'message' ? '感谢您的反馈' : `这是第${i}条消息内容`,
            time: i <= 5 ? `${i * 5}分钟前` : i <= 10 ? `${i}小时前` : `${i - 10}天前`,
            unread: Math.random() > 0.5,
            type: type
        })
    }

    conversations.value = mockData
}

// 过滤后的对话列表
const filteredConversations = computed(() => {
    let filtered = conversations.value

    // 根据Tab过滤
    if (activeTab.value === 'unread') {
        filtered = filtered.filter(conv => conv.unread)
    } else if (activeTab.value === 'notification') {
        filtered = filtered.filter(conv => conv.type === 'notification')
    } else if (activeTab.value === 'message') {
        filtered = filtered.filter(conv => conv.type === 'message')
    }

    // 根据搜索关键词过滤
    if (searchValue.value) {
        filtered = filtered.filter(conv =>
            conv.name.includes(searchValue.value) ||
            conv.lastMessage.includes(searchValue.value)
        )
    }

    return filtered
})

// Tab点击事件
const setActiveTab = (tabKey) => {
    if (activeTab.value === tabKey) return;

    // 添加淡出效果
    const conversationList = document.querySelector('.conversation-list');
    if (conversationList) {
        conversationList.style.opacity = '0';
        conversationList.style.transform = 'translateY(10rpx)';
    }

    setTimeout(() => {
        activeTab.value = tabKey;
        // 重置搜索条件
        searchValue.value = '';
        // 重置分页状态
        page.value = 1;
        hasMore.value = true;
        // 重置加载状态
        loading.value = false;
        // 重置滚动位置
        scrollTop.value = Math.random(); // 使用随机数触发scroll-view重新渲染
        setTimeout(() => {
            scrollTop.value = 0; // 重置到顶部
        }, 50);
        // 重新初始化数据
        initData();

        // 添加淡入效果
        setTimeout(() => {
            if (conversationList) {
                conversationList.style.opacity = '1';
                conversationList.style.transform = 'translateY(0)';
            }
        }, 50);
    }, 150);
}

// 加载更多数据
const loadMore = async () => {
    if (loading.value || !hasMore.value) {
        return
    }

    loading.value = true

    // 模拟API请求
    setTimeout(() => {
        const newData = generateMockData(page.value + 1)

        if (newData.length > 0) {
            conversations.value.push(...newData)
            page.value++
        } else {
            hasMore.value = false
        }
        loading.value = false
    }, 1000)

    console.warn('loadMore', page.value, hasMore.value, loading.value);
}

// 生成模拟数据
const generateMockData = (pageNum) => {
    if (pageNum > 3) return [] // 模拟只有3页数据

    const mockData = []
    const startId = (pageNum - 1) * pageSize + conversations.value.length + 1

    for (let i = 0; i < pageSize; i++) {
        mockData.push({
            id: startId + i,
            name: `用户${startId + i}`,
            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
            lastMessage: `这是第${startId + i}条消息`,
            time: `${Math.floor(Math.random() * 24)}小时前`,
            unread: Math.random() > 0.5,
            type: 'chat'
        })
    }

    return mockData
}

// 点击对话 - 显示消息详情弹框
const onConversationClick = (conversation) => {
    selectedConversation.value = conversation

    // 显示弹框
    showMessageDetail.value = true

    // 标记为已读
    markAsRead(conversation.id)
}


// 关闭消息详情弹框
const closeMessageDetail = () => {
    showMessageDetail.value = false
    selectedConversation.value = null
    mockMessages.value = []
}

// 标记消息为已读
const markAsRead = (conversationId) => {
    const conversation = conversations.value.find(conv => conv.id === conversationId)
    if (conversation && conversation.unread) {
        conversation.unread = false
    }
}

// 页面加载时初始化数据
onMounted(() => {
    // 设置滚动列表可视高度
    const windowHeight = wx.getWindowInfo().windowHeight;
    setTimeout(async () => {
        const headerHeight = await $('#page-header').height();
        const navHeight = await $('#status-tabs').height();
        scrollStyle.value = {
            height: windowHeight - headerHeight - navHeight - 70 + 'px'
        }
    }, 500);
    initData()
})
</script>

<style lang="less">
.messages-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 100rpx;
    /* 为TabBar留出空间 */

    /* 对话列表样式 */
    .conversation-list {
        height: calc(100vh - 500rpx);
        background: #ffffff;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* 确保scroll-view内容区域正确显示 */
    :deep(.conversation-list) {
        display: block !important;
    }

    .conversation-item {
        padding: 24rpx 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
        transition: background-color 0.2s;
        margin: 20rpx 0;
    }

    .avatar-container {
        display: flex;
        align-items: flex-start;
        width: 88rpx;
        margin-right: 24rpx;
    }

    .content-container {
        padding-left: 8px;
    }

    .conversation-item:active {
        background-color: #f8f9fa;
    }

    .conversation-item:last-child {
        border-bottom: none;
    }

    /* 加载指示器 */
    .loading-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx;
        gap: 16rpx;
    }

    .loading-text {
        font-size: 28rpx;
        color: #9ca3af;
    }

    /* 没有更多数据 */
    .no-more {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx;
    }

    .no-more-text {
        font-size: 28rpx;
        color: #9ca3af;
    }

    /* Tailwind CSS 类的补充样式 */
    .w-12 {
        width: 88rpx;
    }

    .h-12 {
        height: 88rpx;
    }

    .w-2 {
        width: 8rpx;
    }

    .h-2 {
        height: 8rpx;
    }

    // .rounded-full {
    //     border-radius: 50%;
    // }

    .object-cover {
        object-fit: cover;
    }

    .bg-gray-100 {
        background-color: #f3f4f6;
    }

    .bg-red-500 {
        background-color: #ef4444;
    }

    .flex {
        display: flex;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-shrink-0 {
        flex-shrink: 0;
    }

    .min-w-0 {
        min-width: 0;
    }

    .items-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .ml-1 {
        margin-left: 4rpx;
    }

    .ml-3 {
        margin-left: 24rpx;
    }

    .mt-1 {
        margin-top: 4rpx;
    }

    .font-medium {
        font-weight: 500;
    }

    .text-xs {
        font-size: 24rpx;
    }

    .text-sm {
        font-size: 28rpx;
    }

    .text-xl {
        font-size: 40rpx;
    }

    .font-bold {
        font-weight: bold;
    }

    .text-white {
        color: #ffffff;
    }

    .text-gray-500 {
        color: #6b7280;
    }

    .text-gray-600 {
        color: #4b5563;
    }

    .bg-orange-400 {
        background-color: #fb923c;
    }

    .p-4 {
        padding: 32rpx;
    }

    .pt-8 {
        padding-top: 64rpx;
    }

    .mb-1 {
        margin-bottom: 4rpx;
    }

    .mb-3 {
        margin-bottom: 24rpx;
    }

    .mr-2 {
        margin-right: 8rpx;
    }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .block {
        display: block;
    }

    .relative {
        position: relative;
    }

    /* 消息详情弹框样式 */
    .message-detail-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }

    .detail-header {
        padding: 32rpx 24rpx;
        border-bottom: 1rpx solid #f0f0f0;
        background: #ffffff;
        flex-shrink: 0;
    }

    .detail-content {
        flex: 1;
        padding: 24rpx;
        overflow-y: auto;
        background: #f8f9fa;
    }

    .message-content {
        background: #ffffff;
        padding: 24rpx;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .message-history {
        .message-item {
            background: #ffffff;
            padding: 20rpx;
            border-radius: 12rpx;
            margin-bottom: 16rpx;
            box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
        }
    }

    .detail-footer {
        padding: 24rpx;
        background: #ffffff;
        border-top: 1rpx solid #f0f0f0;
        flex-shrink: 0;
    }

    .text-lg {
        font-size: 36rpx;
    }

    .text-base {
        font-size: 32rpx;
        line-height: 1.5;
    }

    .mr-3 {
        margin-right: 24rpx;
    }

    .mt-1 {
        margin-top: 8rpx;
    }

}

/* 状态筛选标签 */
.status-tabs {
    background: white;
    padding: 20rpx 35rpx; /* 增加内边距 */
    border-bottom: 1rpx solid #e5e7eb;
    display: flex;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
}

.tab-item {
    margin-right: 48rpx;
    padding-bottom: 16rpx;
    font-size: 30rpx; /* 增大字体 */
    color: #6b7280;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    transform: translateX(0);

    &.active {
      color: #f97316;
      font-weight: 500;
      transform: translateY(-2rpx);

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4rpx;
        background: linear-gradient(90deg, #f97316, #fb923c);
        border-radius: 2rpx;
        animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }

    &:hover {
      color: #f97316;
      transform: translateY(-1rpx);
    }

    &:last-child {
      margin-right: 0;
    }
}



/* 滑入动画 */
@keyframes slideIn {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* 内容切换动画 */
.conversation-list {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 消息项动画 */
.conversation-item {
    animation: fadeInItem 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

.conversation-item:nth-child(1) { animation-delay: 0.1s; }
.conversation-item:nth-child(2) { animation-delay: 0.15s; }
.conversation-item:nth-child(3) { animation-delay: 0.2s; }
.conversation-item:nth-child(4) { animation-delay: 0.25s; }
.conversation-item:nth-child(5) { animation-delay: 0.3s; }

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(-20rpx);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* NutUI 组件样式覆盖 */
:deep(.nut-searchbar) {
    background: transparent !important;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
    .conversation-item {
        padding: 20rpx 16rpx;
        margin: 16rpx 0;
    }

    .w-12 {
        width: 80rpx;
    }

    .h-12 {
        height: 80rpx;
    }

    .text-sm {
        font-size: 26rpx;
    }
}
</style>