<template>
  <div class="message-notification">
    <div class="page-header">
      <h1>消息通知</h1>
      <p>管理和查看系统消息通知</p>
    </div>

    <div class="content">
      <!-- 消息统计 -->
      <div class="overview-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="总消息数"
                :value="messageStats.total"
                :value-style="{ color: '#1890ff' }"
              />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="未读消息"
                :value="messageStats.unread"
                :value-style="{ color: '#ff4d4f' }"
              />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="系统通知"
                :value="messageStats.system"
                :value-style="{ color: '#52c41a' }"
              />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="业务通知"
                :value="messageStats.business"
                :value-style="{ color: '#faad14' }"
              />
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-input-search
              v-model:value="searchText"
              placeholder="搜索消息内容"
              enter-button="搜索"
              @search="handleSearch"
            />
          </a-col>
          <a-col :span="4">
            <a-select
              v-model:value="typeFilter"
              placeholder="消息类型"
              allow-clear
              @change="handleFilter"
            >
              <a-select-option value="system">系统通知</a-select-option>
              <a-select-option value="business">业务通知</a-select-option>
              <a-select-option value="warning">预警通知</a-select-option>
              <a-select-option value="info">信息通知</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-select
              v-model:value="statusFilter"
              placeholder="阅读状态"
              allow-clear
              @change="handleFilter"
            >
              <a-select-option value="unread">未读</a-select-option>
              <a-select-option value="read">已读</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="markAllRead">
              <check-outlined /> 全部标记为已读
            </a-button>
          </a-col>
        </a-row>
      </div>

      <!-- 消息列表 -->
      <a-table
        :columns="columns"
        :data-source="filteredMessages"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <a-tag :color="getTypeColor(record.type)">
              {{ getTypeName(record.type) }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 'read' ? 'green' : 'red'">
              {{ record.status === 'read' ? '已读' : '未读' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="viewMessage(record)">查看</a-button>
              <a-button type="link" size="small" @click="markAsRead(record.id)">标记已读</a-button>
              <a-button type="link" size="small" danger @click="deleteMessage(record.id)">删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 消息详情对话框 -->
    <a-modal
      v-model:open="detailModalVisible"
      title="消息详情"
      width="600px"
      :footer="null"
    >
      <div v-if="selectedMessage" class="message-detail">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="消息标题">
            {{ selectedMessage.title }}
          </a-descriptions-item>
          <a-descriptions-item label="消息类型">
            <a-tag :color="getTypeColor(selectedMessage.type)">
              {{ getTypeName(selectedMessage.type) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="发送时间">
            {{ selectedMessage.sendTime }}
          </a-descriptions-item>
          <a-descriptions-item label="发送人">
            {{ selectedMessage.sender }}
          </a-descriptions-item>
          <a-descriptions-item label="消息内容">
            <div class="message-content">{{ selectedMessage.content }}</div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { CheckOutlined } from '@ant-design/icons-vue'

// 响应式数据
const loading = ref(false)
const searchText = ref('')
const typeFilter = ref(undefined)
const statusFilter = ref(undefined)
const detailModalVisible = ref(false)
const selectedMessage = ref(null)

// 消息统计
const messageStats = ref({
  total: 45,
  unread: 12,
  system: 20,
  business: 25
})

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
})

// 表格列配置
const columns = [
  {
    title: '消息标题',
    dataIndex: 'title',
    key: 'title',
    sorter: true,
  },
  {
    title: '消息类型',
    dataIndex: 'type',
    key: 'type',
    filters: [
      { text: '系统通知', value: 'system' },
      { text: '业务通知', value: 'business' },
      { text: '预警通知', value: 'warning' },
      { text: '信息通知', value: 'info' },
    ],
  },
  {
    title: '发送人',
    dataIndex: 'sender',
    key: 'sender',
  },
  {
    title: '发送时间',
    dataIndex: 'sendTime',
    key: 'sendTime',
    sorter: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    filters: [
      { text: '未读', value: 'unread' },
      { text: '已读', value: 'read' },
    ],
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
  },
]

// 模拟消息数据
const messages = ref([
  {
    id: 1,
    title: '系统维护通知',
    type: 'system',
    sender: '系统管理员',
    sendTime: '2024-01-22 14:30:25',
    status: 'unread',
    content: '系统将于今晚22:00-24:00进行维护，期间可能影响部分功能使用，请提前做好准备。'
  },
  {
    id: 2,
    title: '新用户注册提醒',
    type: 'business',
    sender: '业务系统',
    sendTime: '2024-01-22 13:15:10',
    status: 'read',
    content: '有新的用户注册，请及时审核用户信息。'
  },
  {
    id: 3,
    title: '设备异常预警',
    type: 'warning',
    sender: '监控系统',
    sendTime: '2024-01-22 10:20:30',
    status: 'unread',
    content: 'ATM-001设备出现异常，请及时检查处理。'
  }
])

// 计算属性
const filteredMessages = computed(() => {
  let result = messages.value

  if (searchText.value) {
    result = result.filter(msg =>
      msg.title.toLowerCase().includes(searchText.value.toLowerCase()) ||
      msg.content.toLowerCase().includes(searchText.value.toLowerCase())
    )
  }

  if (typeFilter.value) {
    result = result.filter(msg => msg.type === typeFilter.value)
  }

  if (statusFilter.value) {
    result = result.filter(msg => msg.status === statusFilter.value)
  }

  return result
})

// 方法
const getTypeColor = (type) => {
  const colors = {
    'system': 'blue',
    'business': 'green',
    'warning': 'orange',
    'info': 'purple'
  }
  return colors[type] || 'default'
}

const getTypeName = (type) => {
  const names = {
    'system': '系统通知',
    'business': '业务通知',
    'warning': '预警通知',
    'info': '信息通知'
  }
  return names[type] || type
}

const handleSearch = () => {
  pagination.value.current = 1
}

const handleFilter = () => {
  pagination.value.current = 1
}

const handleTableChange = (pag) => {
  pagination.value = pag
}

const markAllRead = () => {
  messages.value.forEach(msg => {
    msg.status = 'read'
  })
  message.success('所有消息已标记为已读')
}

const viewMessage = (msg) => {
  selectedMessage.value = msg
  detailModalVisible.value = true
  // 查看消息时自动标记为已读
  if (msg.status === 'unread') {
    msg.status = 'read'
  }
}

const markAsRead = (id) => {
  const msg = messages.value.find(m => m.id === id)
  if (msg) {
    msg.status = 'read'
    message.success('消息已标记为已读')
  }
}

const deleteMessage = (id) => {
  const index = messages.value.findIndex(m => m.id === id)
  if (index > -1) {
    messages.value.splice(index, 1)
    message.success('消息已删除')
  }
}

onMounted(() => {
  pagination.value.total = messages.value.length
})
</script>

<style scoped>
.message-notification {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.overview-section {
  margin-bottom: 24px;
}

.search-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
}

.message-detail {
  padding: 16px 0;
}

.message-content {
  white-space: pre-wrap;
  line-height: 1.6;
}
</style>
