<template>
  <view class="app-container pb-20">
    <TopBar title="消息通知" show-back />
    
    <!-- 筛选标签 -->
    <view class="bg-white px-4 py-2">
      <uni-segmented-control 
        :current="currentFilterIndex" 
        :values="filterLabels"
        style-type="text"
        active-color="#4f8ef7"
        @clickItem="onFilterChange"
      />
    </view>

    <!-- 消息列表 -->
    <view class="px-4 mt-2">
      <view v-if="loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="filteredMessages.length === 0">
        <EmptyState message="暂无消息" />
      </view>
      
      <uni-list v-else border>
        <uni-swipe-action
          v-for="msg in filteredMessages"
          :key="msg.id"
          :actions="[{text: '删除', color: '#ff3b30', key: 'delete'}]"
          @click="onSwipeAction(msg.id, $event)"
        >
          <uni-list-item 
            :title="msg.title"
            :note="msg.content.length > 20 ? msg.content.substring(0, 20) + '...' : msg.content"
            :right-text="formatTime(msg.createTime)"
            show-arrow
            @click="goToDetail(msg.id)"
          >
            <template #header>
              <view class="relative mr-3">
                <view class="w-10 h-10 rounded-xl flex items-center justify-center" :class="getTypeBgClass(msg.type)">
                  <text class="uni-icons text-lg" :class="getTypeIconClass(msg.type)"></text>
                </view>
                <view v-if="!msg.read" class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></view>
              </view>
            </template>
          </uni-list-item>
        </uni-swipe-action>
      </uni-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import UniSwipeAction from '../../components/uni-swipe-action/uni-swipe-action.vue'
import UniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'
import { formatDate } from '../../utils'

const loading = ref(false)
const messages = ref<any[]>([])
const currentFilterIndex = ref(0)

const filterTypes = [
  { value: 'all', label: '全部' },
  { value: 'task', label: '任务' },
  { value: 'system', label: '系统' },
  { value: 'urgent', label: '紧急' },
]

const filterLabels = filterTypes.map(t => t.label)

const filteredMessages = computed(() => {
  const filterValue = filterTypes[currentFilterIndex.value].value
  if (filterValue === 'all') return messages.value
  return messages.value.filter(m => m.type === filterValue)
})

function getTypeBgClass(type: string) {
  const map: Record<string, string> = {
    task: 'bg-blue-50',
    system: 'bg-gray-50',
    urgent: 'bg-red-50',
  }
  return map[type] || 'bg-gray-50'
}

function getTypeIconClass(type: string) {
  const map: Record<string, string> = {
    task: 'uniui-flag-filled text-blue-500',
    system: 'uniui-gear-filled text-gray-500',
    urgent: 'uniui-notification-filled text-red-500',
  }
  return map[type] || 'uniui-chatbubble text-gray-400'
}

function onFilterChange(index: number) {
  currentFilterIndex.value = index
}

function formatTime(date: string) {
  return formatDate(date, 'MM-DD HH:mm')
}

function onSwipeAction(msgId: string, action: { key?: string }) {
  if (action.key === 'delete') {
    uni.showModal({
      title: '确认删除',
      content: '确定要删除这条消息吗？',
      success: (res) => {
        if (res.confirm) {
          messages.value = messages.value.filter(m => m.id !== msgId)
          uni.showToast({ title: '已删除', icon: 'success' })
        }
      }
    })
  }
}

function goToDetail(msgId: string) {
  uni.navigateTo({ url: `/subPackages/pages-sales/messageDetail?id=${msgId}` })
}

onMounted(() => {
  // 模拟数据
  messages.value = [
    { id: '1', title: '新任务分配', content: '您有一条新的清掏任务待处理', type: 'task', read: false, createTime: '2026-06-22 14:30' },
    { id: '2', title: '任务即将到期', content: '积丹白鹭小区任务将于明日到期', type: 'urgent', read: false, createTime: '2026-06-22 10:00' },
    { id: '3', title: '系统维护通知', content: '系统将于今晚23:00-01:00进行维护', type: 'system', read: true, createTime: '2026-06-21 09:00' },
    { id: '4', title: '任务审核通过', content: '您发布的任务已通过审核', type: 'task', read: true, createTime: '2026-06-20 16:00' },
  ]
})
</script>
