<template>
  <div class="home-container">
    <el-carousel height="520px" indicator-position="outside" arrow="hover" :autoplay="true">
      <el-carousel-item v-for="item in carouselList" :key="item.id">
        <div class="hero" :style="{ backgroundImage: 'url(' + (getFilePrefix + item.imageUrl) + ')' }">
          <div class="hero-overlay">
            <div class="hero-title">{{ item.title }}</div>
            <div class="hero-actions">
              <el-button v-if="item.link" type="warning" size="large" @click="openLink(item.link)">查看详情</el-button>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="info-bar combined">
      <div class="time-row">
        <div class="time-group">
          <div class="time-label">开馆时间</div>
          <div class="time-big">{{ formatTime(museumIntro?.openTime) }}</div>
        </div>
        <div class="time-dash">—</div>
        <div class="time-group">
          <div class="time-label">闭馆时间</div>
          <div class="time-big">{{ formatTime(museumIntro?.closeTime) }}</div>
        </div>
      </div>
      <div class="circle-area">
        <div class="circle-btn" @click="goReserve">参观预约</div>
      </div>
    </div>

    <div class="hot-section">
      <div class="hot-title">热门藏品</div>
      <div class="hot-grid">
        <div class="hot-card" v-for="item in hotRelics" :key="item.id">
          <div class="hot-cover">
            <el-image
              v-if="item.coverImageUrl"
              :src="getFilePrefix + item.coverImageUrl"
              :preview-src-list="[getFilePrefix + item.coverImageUrl]"
              preview-teleported
              fit="cover"
            />
            <div v-else class="hot-cover-empty">—</div>
          </div>
          <div class="hot-info">
            <div class="hot-name">{{ item.name }}</div>
            <div class="hot-cat">{{ item.categoryInfo && item.categoryInfo.name ? item.categoryInfo.name : '—' }}</div>
          </div>
        </div>
      </div>
      <div class="hot-more">
        <div class="hot-more-btn" @click="goMoreHot">查看更多藏品</div>
      </div>
    </div>
    <div class="announce-section">
      <div class="announce-title">公告</div>
      <div class="announce-list">
        <div class="announce-item" v-for="a in announcements" :key="a.id">
          <div class="title"><span v-if="Number(a.isTop) === 1" class="top-badge">置顶</span><span class="ann-link" @click="openAnnDetail(a)">{{ a.title }}</span></div>
          <div class="date">{{ formatDateYMD(a.updateTime || a.createTime) }}</div>
        </div>
      </div>
      <div class="announce-more">
        <div class="announce-more-btn" @click="goMoreAnnouncement">查看更多公告</div>
      </div>
    </div>
  </div>
  <!-- 公告详情弹出框 -->
  <el-dialog v-model="annDetailOpen" title="公告详情" width="700px" append-to-body>
    <div class="ann-detail">
      <div class="ann-detail-title">{{ annDetailData.title }}</div>
      <div class="ann-detail-meta">发布时间：{{ formatDateYMD(annDetailData.updateTime || annDetailData.createTime) }}</div>
      <div class="ann-detail-content" v-html="annDetailData.content"></div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="annDetailOpen=false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { listAllCarousel } from '@/api/carousel'
import { listAllMuseumIntro } from '@/api/museumIntro'
import { listAllRelic } from '@/api/relic'
import { listAllAnnouncement, getAnnouncement } from '@/api/announcement'
import Cookies from 'js-cookie'

const { proxy } = getCurrentInstance()
const getFilePrefix = proxy.getFilePrefix
const carouselList = ref([])
const museumIntro = ref(null)
const hotRelics = ref([])
const announcements = ref([])
const annDetailOpen = ref(false)
const annDetailData = ref({})
const home1 = new URL('@/assets/home1.png', import.meta.url).href
const home2 = new URL('@/assets/home2.png', import.meta.url).href

function openLink(link) {
  window.open(link, '_blank')
}

function goReserve() {
  const role = Cookies.get('role')
  if (!role) {
    proxy.$message.warning('请先登录')
    return
  }
  proxy.$router.push('/tourist/reservation')
}

function formatTime(val) {
  if (!val) return '—'
  if (typeof val === 'string' && val.includes(':')) {
    return val.slice(0, 5)
  }
  const d = new Date(val)
  if (isNaN(d.getTime())) return '—'
  const HH = String(d.getHours()).padStart(2, '0')
  const mm = String(d.getMinutes()).padStart(2, '0')
  return `${HH}:${mm}`
}

function formatDateYMD(val) {
  if (!val) return ''
  const d = new Date(val)
  if (isNaN(d.getTime())) return ''
  const yyyy = d.getFullYear()
  const MM = String(d.getMonth() + 1).padStart(2, '0')
  const DD = String(d.getDate()).padStart(2, '0')
  return `${yyyy}-${MM}-${DD}`
}

onMounted(() => {
  Promise.all([
    listAllCarousel({}),
    listAllMuseumIntro({}),
    listAllRelic({}),
    listAllAnnouncement({})
  ]).then(([resC, resM, resR, resA]) => {
    const arrC = Array.isArray(resC) ? resC : (resC.list || resC.data || [])
    const listC = Array.isArray(arrC) ? arrC : []
    carouselList.value = listC.filter(i => Number(i.status) === 1).sort((a, b) => (Number(a.sort || 0) - Number(b.sort || 0)))

    const arrM = Array.isArray(resM) ? resM : (resM.list || resM.data || [])
    const listM = Array.isArray(arrM) ? arrM : []
    museumIntro.value = listM.length > 0 ? listM[0] : null

    const arrR = Array.isArray(resR) ? resR : (resR.list || resR.data || [])
    const listR = Array.isArray(arrR) ? arrR : []
    const filteredHot = listR.filter(r => Number(r.isHot) === 1 && Number(r.status) === 1)
    hotRelics.value = filteredHot.slice(0, 8)
    const arrA = Array.isArray(resA) ? resA : (resA.list || resA.data || [])
    const listA = Array.isArray(arrA) ? arrA : []
    const active = listA.filter(a => Number(a.status) === 1)
    const sortByTimeDesc = (x, y) => {
      const tx = new Date(x.updateTime || x.createTime).getTime() || 0
      const ty = new Date(y.updateTime || y.createTime).getTime() || 0
      return ty - tx
    }
    const topList = active.filter(a => Number(a.isTop) === 1).sort(sortByTimeDesc)
    const top = topList.length ? topList[0] : null
    const nonTop = active.filter(a => Number(a.isTop) !== 1).sort(sortByTimeDesc)
    const result = []
    if (top) result.push(top)
    result.push(...nonTop.slice(0, top ? 4 : 5))
    announcements.value = result
  })
})

function goMoreHot() {
  proxy.$router.push('/tourist/relic')
}

function goMoreAnnouncement() {
  proxy.$router.push('/tourist/announcement')
}

function openAnnDetail(a) {
  const id = a && a.id
  if (!id) return
  getAnnouncement(id).then(res => {
    annDetailData.value = res.data || {}
    annDetailOpen.value = true
  })
}
</script>


<style scoped>
.home-container {
  width: 100%;
  margin: 0;
}
.hero {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.3) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-title {
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  margin-bottom: 18px;
}
.hero-actions {
  display: flex;
  gap: 12px;
}

:deep(.content-card .el-card__body) {
  padding: 0 !important;
}

:deep(.el-carousel) {
  width: 100%;
  margin: 0;
}

:deep(.el-carousel__container) {
  border-radius: 0;
}

.info-bar {
  width: 55%;
  margin: 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid #ebeef5;
}
.info-icon img {
  width: 110px;
  height: auto;
  display: block;
  filter: hue-rotate(190deg) saturate(120%);
}
.info-content { flex: 1; width: 100%; }
.info-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 6px;
  text-align: center;
}
.info-line { display: flex; align-items: center; justify-content: flex-start; gap: 8px; color: #606266; padding: 2px 0; }
.info-line .label { color: #909399; }
.info-line .val {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}
.info-line .gap { margin: 0 6px; color: #c0c4cc; }
.info-text { color: #606266; line-height: 1.6; margin-bottom: 8px; }
.time-val { font-weight: 700; }
.reserve-block { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 6px; }
.reserve-btn {
  background: #1f4fff;
  border-color: #1f4fff;
  font-weight: 700;
  padding: 11px 22px;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(31,79,255,0.22);
}
.reserve-btn:hover { filter: brightness(1.05); }

/* 开放时间与预约样式仿照参考图 */
.open-time .info-icon { display: none; }
.time-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.time-group { display: flex; flex-direction: column; align-items: flex-start; }
.time-label { font-size: 12px; color: #909399; }
.time-big { font-size: 22px; font-weight: 800; color: #333; letter-spacing: 2px; }
.time-dash { font-size: 22px; color: #999; padding: 0 2px; }

.reserve .info-icon { display: none; }
.circle-btn {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid #8a2b2b;
  color: #8a2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
}
.circle-btn:hover { background: #fef4f4; }
  .circle-area {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.hot-section {
  width: 80%;
  margin: 24px auto 40px;
}
.hot-title {
  font-size: 24px;
  font-weight: 800;
  color: #1f1f1f;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 18px;
}
.hot-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 0;
  border-bottom: 2px solid #8a2b2b;
  margin: 8px auto 0;
}
.hot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hot-card {
  background: #f9f6f1;
  border: 1px solid #e7dfcf;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(138, 43, 43, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hot-cover {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
}
.hot-cover :deep(.el-image) {
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}
.hot-cover:hover :deep(.el-image) { transform: scale(1.03); }
.hot-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 60%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
}
.hot-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}
.hot-info {
  padding: 14px;
  background: linear-gradient(180deg, #faf7f2 0%, #f7f3ea 100%);
}
.hot-name {
  font-size: 16px;
  font-weight: 800;
  color: #2c1f1f;
  letter-spacing: 1px;
}
.hot-name::after {
  content: '';
  display: block;
  width: 36px;
  border-bottom: 2px solid #8a2b2b;
  margin: 6px 0 0;
}
.hot-cat {
  display: inline-block;
  font-size: 12px;
  color: #8a2b2b;
  background: #f5e9e2;
  border: 1px solid #e8d9cf;
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 8px;
}
.hot-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.hot-more-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #8a2b2b;
  color: #8a2b2b;
  background: #f5e9e2;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.hot-more-btn:hover { background: #fef4f4; }
.hot-card:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(138, 43, 43, 0.12); }

.announce-section {
  width: 80%;
  margin: 0 auto 40px;
}
.announce-title {
  font-size: 24px;
  font-weight: 800;
  color: #1f1f1f;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 18px;
}
.announce-title::after {
  content: '';
  display: block;
  width: 64px;
  border-bottom: 2px solid #8a2b2b;
  margin: 8px auto 0;
}
.announce-list {
  background: #f9f6f1;
  border: 1px solid #e7dfcf;
  border-radius: 12px;
  overflow: hidden;
}
.announce-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eadfce;
}
.announce-item:last-child { border-bottom: none; }
.announce-item .title {
  color: #2c1f1f;
  font-weight: 700;
}
.top-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: #d93025;
  box-shadow: 0 0 0 2px rgba(217,48,37,0.12) inset, 0 6px 12px rgba(217,48,37,0.18);
}
.announce-item .date {
  color: #8a2b2b;
  font-size: 12px;
}
.announce-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.announce-more-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #8a2b2b;
  color: #8a2b2b;
  background: #f5e9e2;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.announce-more-btn:hover { background: #fef4f4; }

.ann-link { cursor: pointer; }
.ann-link:hover { color: #8a2b2b; }

:deep(.ann-detail-content img) { width: 100%; }

.ann-detail-title { font-size: 26px; font-weight: 800; color: #2c1f1f; letter-spacing: 1px; margin-bottom: 10px; }
</style>
