<template>
  <div class="page-container">
    <PageTitle title="消息通知" />

    <!-- Tab切换 -->
    <div class="tab-nav">
      <div v-for="tab in tabs" :key="tab.key" :class="['tab-item', { active: activeTab === tab.key }]" @click="activeTab = tab.key">
        <el-icon><component :is="tab.icon" /></el-icon>
        <span>{{ tab.label }}</span>
      </div>
    </div>

    <!-- 消息列表 -->
    <div class="message-list">
      <div v-for="(item, index) in messageList" :key="index" class="message-item">
        <div class="message-content">
          <div :class="['message-icon', item.iconType || 'user']">
            <el-icon v-if="item.iconType === 'package'" :size="20" color="#e60012"><Box /></el-icon>
            <template v-else-if="item.iconType === 'budget'"><span class="budget-text">¥</span></template>
            <el-icon v-else :size="20" color="#fff"><User /></el-icon>
            <span v-if="item.unread" class="unread-dot"></span>
          </div>
          <div class="message-info">
            <div class="message-title">{{ item.title }}</div>
            <div class="message-desc">{{ item.desc }}</div>
          </div>
          <div class="message-right">
            <div class="message-time">{{ item.time }}</div>
            <el-button v-if="item.showAction" type="danger" size="small" @click="handleProcess(item)">去处理</el-button>
          </div>
        </div>
      </div>
      <el-empty v-if="messageList.length === 0" description="暂无消息" />
    </div>

    <!-- 分页 -->
    <TablePagination v-if="messageList.length > 0" v-model:page="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total" @change="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Document, Bell, Warning, User, Box } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PageTitle, TablePagination } from '@/components'

const activeTab = ref('approval')
const tabs = [
  { key: 'approval', label: '审批待办', icon: Document },
  { key: 'arrival', label: '到货提醒', icon: Bell },
  { key: 'budget', label: '预算预警', icon: Warning }
]

const queryParams = reactive({ pageNum: 1, pageSize: 10 })
const total = ref(0)
const messageList = ref<any[]>([])

const loadData = () => {
  if (activeTab.value === 'approval') {
    messageList.value = [
      { time: '2025/01/10 11:42:32', title: '您有一个审批流程待处理', desc: '审批名称：办公用品采购申请', unread: true, showAction: true, iconType: 'user' },
      { time: '2025/01/10 11:42:32', title: '您的办公用品审批申请已通过', desc: '审批名称：办公用品采购申请', unread: true, showAction: false, iconType: 'user' },
      { time: '2025/01/10 11:42:32', title: '您的办公用品审批申请已通过', desc: '审批名称：办公用品采购申请', unread: true, showAction: false, iconType: 'user' }
    ]
    total.value = 3
  } else if (activeTab.value === 'arrival') {
    messageList.value = [
      { time: '2025/01/10 11:42:32', title: '包裹到货提醒', desc: '物流状态：已到达代售点', unread: true, showAction: false, iconType: 'package' },
      { time: '2025/01/10 11:42:32', title: '包裹到货提醒', desc: '物流状态：已到达代售点', unread: false, showAction: false, iconType: 'package' }
    ]
    total.value = 2
  } else {
    messageList.value = [
      { time: '2025/01/10 11:42:32', title: '预算预警', desc: '副标题副副标题', unread: true, showAction: false, iconType: 'budget' },
      { time: '2025/01/10 11:42:32', title: '预算预警', desc: '副标题副副标题', unread: false, showAction: false, iconType: 'budget' }
    ]
    total.value = 2
  }
}

watch(activeTab, () => { queryParams.pageNum = 1; loadData() }, { immediate: true })
const handleQuery = () => { loadData() }
const handleProcess = (_item: any) => { ElMessage.info('跳转到审批处理页面') }
</script>

<style scoped lang="scss">
.tab-nav { display: flex; gap: 30px; border-bottom: 1px solid #eee; margin-bottom: 20px; .tab-item { display: flex; align-items: center; gap: 5px; padding: 10px 0; cursor: pointer; color: #666; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; &:hover, &.active { color: #333; } &.active { border-bottom-color: #e60012; } } }
.message-list { .message-item { padding: 15px 0; border-bottom: 1px solid #f5f5f5; &:last-child { border-bottom: none; } .message-content { display: flex; align-items: center; gap: 15px; .message-icon { position: relative; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; &.user { background: #e60012; } &.package { background: #fff5f5; border: 1px solid #ffe0e0; } &.budget { background: #e60012; .budget-text { color: #fff; font-size: 16px; font-weight: bold; } } .unread-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #e60012; border: 2px solid #fff; } } .message-info { flex: 1; .message-title { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 5px; } .message-desc { font-size: 13px; color: #999; } } .message-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; .message-time { font-size: 12px; color: #999; } } } } }
</style>
