<template>
  <div class="scrolling-announcement">
    <div class="announcement-header">
      <div class="header-icon">📢</div>
      <div class="header-title">最新公告</div>
    </div>
    <div class="announcement-content">
      <div class="scrolling-container" ref="scrollingContainer">
        <div 
          class="announcement-item current"
          :key="'current-' + currentIndex"
        >
          {{ announcements[currentIndex]?.content }}
        </div>
        <div 
          class="announcement-item next"
          :key="'next-' + nextIndex"
        >
          {{ announcements[nextIndex]?.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue'

const scrollingContainer = ref(null)
const currentIndex = ref(0)
const isAnimating = ref(false)
let scrollTimer = null

const announcements = reactive([])

// 计算下一个索引
const nextIndex = computed(() => {
  return announcements.length > 0 ? (currentIndex.value + 1) % announcements.length : 0
})

// 加载公告数据
const loadAnnouncements = async () => {
  try {
    console.log('正在从JSON文件加载室外公告数据...')
    const response = await fetch('/outdoor-announcements.json')
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    
    if (data.announcements && Array.isArray(data.announcements)) {
      announcements.splice(0, announcements.length, ...data.announcements)
      console.log(`成功加载 ${announcements.length} 条公告`)
    } else {
      throw new Error('公告数据格式不正确')
    }
  } catch (error) {
    console.error('加载公告数据失败，使用默认数据:', error)
    loadDefaultAnnouncements()
  }
}

// 加载默认公告（作为备用方案）
const loadDefaultAnnouncements = () => {
  announcements.splice(0, announcements.length, 
    { content: '【重要通知】今日牦牛交易价格上涨2.5%，活牛32.8元/公斤，鲜肉78.5元/公斤，受春季需求增长影响，请商户关注行情变化，合理安排采购计划' },
    { content: '【招商信息】新增北京、上海、广州、深圳等一线城市优质采购商入驻，涵盖餐饮连锁、精品超市、生鲜电商等业态，欢迎牧民朋友联系洽谈合作' },
    { content: '【系统维护】本周末（3月18日22:00-19日08:00）系统升级维护，交易时间调整为09:00-17:00，支付功能暂停4小时，请提前安排交易事宜' },
    { content: '【市场资讯】受春季牧草丰茂、气候适宜等因素影响，预计下月牦牛供应量增加15%，达8500头左右，肉质品质提升，建议采购商提前规划库存' },
    { content: '【质量报告】西藏、青海、甘肃等主要产区肉品检测合格率达98.5%，创历史新高，蛋白质含量21.8%，重金属含量远低于国标，品质安全有保障' }
  )
}

// 执行滚动动画
const performScroll = () => {
  if (isAnimating.value || announcements.length <= 1) return
  
  isAnimating.value = true
  const container = scrollingContainer.value
  
  // 添加滚动类来触发动画
  container.classList.add('scrolling')
  
  // 动画完成后更新索引并重置状态
  setTimeout(() => {
    currentIndex.value = nextIndex.value
    container.classList.remove('scrolling')
    isAnimating.value = false
  }, 800) // 动画持续时间
}

// 开始垂直滚动
const startVerticalScroll = () => {
  if (announcements.length <= 1) return
  
  scrollTimer = setInterval(() => {
    performScroll()
  }, 5000) // 每5秒切换一次
}

// 停止滚动
const stopVerticalScroll = () => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
    scrollTimer = null
  }
}

onMounted(async () => {
  await loadAnnouncements()
  // 等待数据加载完成后开始滚动
  if (announcements.length > 1) {
    startVerticalScroll()
  }
})

onUnmounted(() => {
  stopVerticalScroll()
})
</script>

<style scoped>
.scrolling-announcement {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(26, 31, 46, 0.95);
  border: 1px solid rgba(64, 158, 255, 0.4);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.announcement-header {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 140px;
  background: rgba(64, 158, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid rgba(64, 158, 255, 0.3);
}

.header-icon {
  font-size: 20px;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.announcement-content {
  margin-left: 140px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.scrolling-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.announcement-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;
  color: #fff;
  padding: 0 30px;
  white-space: nowrap;
  transition: transform 0.8s ease-in-out;
  font-weight: 500;
}

.announcement-item.current {
  transform: translateY(0);
}

.announcement-item.next {
  transform: translateY(100%);
}

/* 滚动动画状态 */
.scrolling-container.scrolling .announcement-item.current {
  transform: translateY(-100%);
}

.scrolling-container.scrolling .announcement-item.next {
  transform: translateY(0);
}
</style> 