<template>
  <ScreenLayout :show-back-btn="true" back-text="返回菜单" back-target="/menu">
    <div class="page-notice">
      <h1 class="page-title">通知公告</h1>

      <!-- 公告列表 -->
      <div v-if="!selectedNotice" class="notice-list">
        <div
          v-for="notice in notices"
          :key="notice.id"
          class="notice-card"
          :class="{ 'notice-high': notice.priority === 'high' }"
          @click="selectNotice(notice)"
        >
          <div class="notice-header">
            <span v-if="notice.priority === 'high'" class="notice-tag">重要</span>
            <span class="notice-type">{{ getTypeName(notice.contentType) }}</span>
          </div>
          <h3 class="notice-title">{{ notice.title }}</h3>
          <div class="notice-meta">
            <span>{{ notice.publisher }}</span>
            <span>{{ notice.publishTime }}</span>
          </div>
          <div class="notice-arrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </div>
        </div>
      </div>

      <!-- 公告详情 -->
      <div v-else class="notice-detail">
        <button class="btn-back-list" @click="selectedNotice = null">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="19" y1="12" x2="5" y2="12" />
            <polyline points="12 19 5 12 12 5" />
          </svg>
          返回列表
        </button>

        <div class="detail-content">
          <h2 class="detail-title">{{ selectedNotice.title }}</h2>
          <div class="detail-meta">
            <span>{{ selectedNotice.publisher }}</span>
            <span>{{ selectedNotice.publishTime }}</span>
          </div>
          <div class="detail-body">
            <p v-for="(line, index) in noticeLines" :key="index">{{ line }}</p>
          </div>
        </div>
      </div>
    </div>
  </ScreenLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useScreenStore } from '@/stores/screen'
import * as api from '@/api/screen'
import ScreenLayout from '@/layouts/ScreenLayout.vue'

const screenStore = useScreenStore()

const notices = ref([])
const selectedNotice = ref(null)

const noticeLines = computed(() => {
  if (!selectedNotice.value) return []
  return selectedNotice.value.content.split('\n')
})

const getTypeName = (type) => {
  const types = {
    'notice': '通知',
    'tips': '提示',
    'announcement': '公告'
  }
  return types[type] || '通知'
}

const selectNotice = (notice) => {
  selectedNotice.value = notice
}

onMounted(async () => {
  try {
    notices.value = await api.getNotices()
  } catch {
    screenStore.showAlert({
      type: 'error',
      message: '获取公告列表失败'
    })
  }
})
</script>

<style scoped>
.page-notice {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 24px;
}

.notice-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notice-card {
  position: relative;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.notice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.notice-high {
  border-left: 4px solid var(--danger);
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.notice-tag {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  background: var(--danger);
  border-radius: var(--radius-sm);
}

.notice-type {
  font-size: 13px;
  color: var(--text-muted);
}

.notice-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  padding-right: 32px;
}

.notice-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--text-light);
}

.notice-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--text-light);
}

.notice-arrow svg {
  width: 100%;
  height: 100%;
}

/* 详情页 */
.notice-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.btn-back-list {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 16px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 16px;
  align-self: flex-start;
}

.btn-back-list:hover {
  color: var(--primary-dark);
}

.btn-back-list svg {
  width: 20px;
  height: 20px;
}

.detail-content {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 32px;
  overflow-y: auto;
}

.detail-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.detail-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--text-muted);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 24px;
}

.detail-body {
  font-size: 20px;
  line-height: 2;
  color: var(--text-secondary);
}

.detail-body p {
  margin: 0;
  white-space: pre-wrap;
}
</style>
