<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Top } from '@element-plus/icons-vue'
import noticeHeroBanner from '@/assets/notice-hero-banner.jpg'

interface NoticeItem {
  id: number
  title: string
  date: string
  pinned?: boolean
}

const notices: NoticeItem[] = [
  {
    id: 1001,
    title: '关于系统维护升级的公告（2024年6月15日）',
    date: '2024-06-10',
    pinned: true,
  },
  { id: 1002, title: '关于优化预填报流程的通知', date: '2024-06-08' },
  { id: 1003, title: '端午节放假安排通知', date: '2024-06-05' },
  { id: 1004, title: '系统性能优化完成公告', date: '2024-06-03' },
  { id: 1005, title: '数据安全重要提醒', date: '2024-05-30' },
  { id: 1006, title: '关于系统新增功能的使用说明', date: '2024-05-28' },
  { id: 1007, title: '五一劳动节放假安排通知', date: '2024-04-25' },
  { id: 1008, title: '系统升级完成公告', date: '2024-04-15' },
]

const currentPage = ref(1)
const router = useRouter()

function goToNoticeDetail(item: NoticeItem) {
  router.push({
    name: 'noticeDetail',
    query: { id: String(item.id) },
  })
}
</script>

<template>
  <main class="notice-page">
    <section class="notice-hero" aria-label="通知公告">
      <img
        class="notice-hero__image"
        :src="noticeHeroBanner"
        alt=""
        aria-hidden="true"
        decoding="async"
      />

      <div class="notice-hero__copy">
        <h1>通知公告</h1>
        <p>了解平台最新动态和重要通知</p>
      </div>

      <div class="notice-search" role="search">
        <input type="search" placeholder="请输入关键词" aria-label="请输入关键词" />
        <el-icon :size="22"><Search /></el-icon>
      </div>

    </section>

    <section class="notice-panel" aria-label="公告列表">
      <div class="notice-table__head">
        <span>公告标题</span>
        <span>发布时间</span>
      </div>

      <ul class="notice-list">
        <li v-for="item in notices" :key="`${item.title}-${item.date}`" class="notice-row">
          <button class="notice-title" type="button" @click="goToNoticeDetail(item)">
            <span v-if="item.pinned" class="pin-tag">
              <el-icon :size="18"><Top /></el-icon>
              置顶
            </span>
            <span>{{ item.title }}</span>
          </button>
          <time :datetime="item.date">{{ item.date }}</time>
        </li>
      </ul>

      <div class="notice-pagination">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="8"
          :pager-count="5"
          :total="40"
          background
          layout="prev, pager, next, jumper"
        />
      </div>
    </section>
  </main>
</template>

<style scoped>
.notice-page {
  min-height: 100%;
  overflow: visible;
  color: #10182d;
  background:
    linear-gradient(180deg, #f9fbff 0%, #f4f7fc 42%, #f7f9fd 100%);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

.notice-hero {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 32px clamp(28px, 4.6vw, 72px) 24px;
  border-bottom: 1px solid rgba(219, 226, 237, 0.82);
  background: #eef6ff;
  transform: translateZ(0);
}

.notice-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.notice-hero__copy {
  position: relative;
  z-index: 2;
  padding-top: 3px;
}

.notice-hero__copy h1 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0;
  color: #0c172d;
}

.notice-hero__copy p {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #748098;
}

.notice-search {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: clamp(28px, 4.6vw, 72px);
  display: flex;
  align-items: center;
  width: min(288px, calc(100vw - 56px));
  height: 42px;
  padding: 0 15px 0 16px;
  border: 1px solid #d5ddea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 22px rgba(29, 63, 112, 0.05);
}

.notice-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #24314b;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.notice-search input::placeholder {
  color: #9aa6ba;
}

.notice-search .el-icon {
  flex: 0 0 auto;
  color: #65738e;
}

.notice-panel {
  position: relative;
  z-index: 4;
  width: calc(100% - clamp(36px, 3.7vw, 56px));
  margin: -1px auto 32px;
  padding: 32px 42px 20px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 8px 24px rgba(32, 58, 95, 0.05);
}

.notice-table__head,
.notice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  column-gap: 32px;
  align-items: center;
}

.notice-table__head {
  height: 40px;
  padding: 0 23px;
  border-bottom: 1px solid #dfe6f0;
  color: #6e7b94;
  font-size: 15px;
  font-weight: 500;
}

.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-row {
  min-height: 60px;
  padding: 0 23px;
  border-bottom: 1px solid #e8edf5;
}

.notice-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
  padding: 0;
  border: 0;
  color: #0e172b;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
}

.notice-title:hover {
  color: #006fff;
}

.pin-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 7px;
  border-radius: 4px;
  color: #ff2e25;
  background: #ffe8e6;
  font-size: 14px;
  font-weight: 600;
}

.notice-row time {
  color: #71809c;
  font-size: 16px;
  line-height: 1.4;
}

.notice-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding-top: 11px;
}

@media (max-width: 920px) {
  .notice-hero {
    min-height: 150px;
    padding-top: 68px;
  }

  .notice-hero__image {
    object-position: 62% center;
  }

  .notice-panel {
    padding-inline: 20px;
  }

  .notice-table__head,
  .notice-row {
    grid-template-columns: minmax(0, 1fr) 128px;
    column-gap: 18px;
    padding-inline: 10px;
  }

  .notice-title,
  .notice-row time {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .notice-hero {
    min-height: 150px;
    padding: 64px 22px 20px;
  }

  .notice-search {
    left: 22px;
    right: 22px;
    width: auto;
  }

  .notice-hero__image {
    object-position: 66% center;
  }

  .notice-panel {
    width: calc(100% - 24px);
    padding: 20px 14px 18px;
  }

  .notice-table__head {
    display: none;
  }

  .notice-row {
    display: flex;
    min-height: 82px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
  }

  .notice-title {
    gap: 9px;
  }

  .pin-tag {
    height: 28px;
    font-size: 14px;
  }

  .notice-row time {
    font-size: 14px;
  }

  .notice-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }
}

</style>
