<template>
  <div class="outdoor-viewport">
    <div class="outdoor-container" ref="containerRef">
      <!-- 顶部时间日期天气区域 -->
      <div class="header-datetime">
        <div class="datetime-info">
          <span class="date">{{ currentDate }}</span>
          <span class="weekday">{{ currentWeekday }}</span>
          <span class="lunar">{{ lunarDate }}</span>
          <span class="weather">{{ weather }}</span>
          <span class="temperature">{{ temperature }}</span>
        </div>
      </div>

      <!-- 滚动公告区域 -->
      <div class="announcement-section">
        <ScrollingAnnouncement />
      </div>

      <!-- 主内容四象限布局 -->
      <div class="main-content">
        <!-- 左上：牦牛实时交易概况 -->
        <div class="content-area top-left">
          <YakTradingOverview />
        </div>
        
        <!-- 右上：活牛、鲜肉价格趋势 -->
        <div class="content-area top-right">
          <PriceTrendChart />
        </div>
        
        <!-- 左下：待交易牦牛数据 -->
        <div class="content-area bottom-left">
          <PendingYakData />
        </div>
        
        <!-- 右下：交易结算数据 -->
        <div class="content-area bottom-right">
          <TransactionSettlement />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ScrollingAnnouncement from '../components/Outdoor/ScrollingAnnouncement.vue'
import YakTradingOverview from '../components/Outdoor/YakTradingOverview.vue'
import PriceTrendChart from '../components/Outdoor/PriceTrendChart.vue'
import PendingYakData from '../components/Outdoor/PendingYakData.vue'
import TransactionSettlement from '../components/Outdoor/TransactionSettlement.vue'
import { Lunar, Solar } from 'lunar-javascript'

// 基准分辨率 3000×1500
const BASE_WIDTH = 3000
const BASE_HEIGHT = 1500

// 响应式数据
const containerRef = ref(null)
const currentDate = ref('')
const currentWeekday = ref('')
const lunarDate = ref('')
const weather = ref('晴')
const temperature = ref('18°C')

// 更新时间日期
const updateDateTime = () => {
  const now = new Date()
  
  // 格式化日期
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const day = now.getDate()
  currentDate.value = `${year}年${month}月${day}日`
  
  // 星期
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  currentWeekday.value = weekdays[now.getDay()]
  
  // 农历日期计算
  try {
    const solar = Solar.fromDate(now)
    const lunar = solar.getLunar()
    
    const lunarMonth = lunar.getMonthInChinese()
    const lunarDay = lunar.getDayInChinese()
    
    const lunarString = lunar.toString()
    const isLeapMonth = lunarString.includes('闰')
    
    let monthName = lunarMonth
    
    const monthMap = {
      '正': '正月', '一': '正月', '二': '二月', '三': '三月',
      '四': '四月', '五': '五月', '六': '六月', '七': '七月',
      '八': '八月', '九': '九月', '十': '十月', '冬': '冬月', '腊': '腊月'
    }
    
    if (monthMap[monthName]) {
      monthName = monthMap[monthName]
    } else if (!monthName.includes('月')) {
      monthName = monthName + '月'
    }
    
    if (isLeapMonth && !monthName.startsWith('闰')) {
      monthName = '闰' + monthName
    }
    
    lunarDate.value = `农历${monthName}${lunarDay}`
  } catch (error) {
    console.error('农历计算错误:', error)
    lunarDate.value = '农历计算中...'
  }
}

// 页面缩放适配
const updateScale = () => {
  if (!containerRef.value) return
  
  const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight
  
  // 计算缩放比例
  const scaleX = windowWidth / BASE_WIDTH
  const scaleY = windowHeight / BASE_HEIGHT
  
  // 取较小的缩放比例，确保内容完全可见
  const scale = Math.min(scaleX, scaleY)
  
  // 应用缩放
  containerRef.value.style.transform = `scale(${scale})`
  containerRef.value.style.transformOrigin = 'top left'
  
  // 调整容器位置，使其居中
  const scaledWidth = BASE_WIDTH * scale
  const scaledHeight = BASE_HEIGHT * scale
  
  const offsetX = (windowWidth - scaledWidth) / 2
  const offsetY = (windowHeight - scaledHeight) / 2
  
  containerRef.value.style.left = `${offsetX}px`
  containerRef.value.style.top = `${offsetY}px`
}

let timer = null

onMounted(() => {
  updateDateTime()
  timer = setInterval(updateDateTime, 60000) // 每分钟更新一次
  
  // 隐藏页面滚动条
  document.body.style.overflow = 'hidden'
  document.documentElement.style.overflow = 'hidden'
  
  // 初始化缩放
  updateScale()
  
  // 监听窗口大小变化
  window.addEventListener('resize', updateScale)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
  window.removeEventListener('resize', updateScale)
  
  // 恢复页面滚动条
  document.body.style.overflow = 'auto'
  document.documentElement.style.overflow = 'auto'
})
</script>

<style scoped>
.outdoor-viewport {
  width: 100vw;
  height: 100vh;
  background: #000000;
  overflow: hidden;
  position: relative;
}

.outdoor-container {
  width: 3000px;
  height: 1500px;
  background: 
    radial-gradient(ellipse at 25% 25%, rgba(64, 158, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, #0a0e1a 0%, #0f1419 25%, #131825 50%, #0f1419 75%, #0a0e1a 100%);
  display: flex;
  flex-direction: column;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  color: #ffffff;
  overflow: hidden;
  padding: 30px;
  box-sizing: border-box;
  position: absolute;
}

/* 顶部时间日期天气区域 */
.header-datetime {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.datetime-info {
  display: flex;
  align-items: center;
  gap: 50px;
  font-size: 36px;
  font-weight: 600;
}

.date {
  color: #ffffff;
  font-size: 36px;
  font-weight: 600;
}

.weekday {
  color: #409EFF;
  font-size: 36px;
  font-weight: 600;
}

.lunar {
  color: #67C23A;
  font-size: 36px;
  font-weight: 600;
}

.weather {
  color: #E6A23C;
  font-size: 36px;
  font-weight: 600;
}

.temperature {
  color: #F56C6C;
  font-size: 36px;
  font-weight: 600;
}

/* 滚动公告区域 */
.announcement-section {
  height: 90px;
  margin-bottom: 25px;
  position: relative;
}

/* 主内容四象限网格布局 */
.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 25px;
  min-height: 0;
}

.content-area {
  background: rgba(15, 25, 45, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.3),
    0 6px 24px rgba(64, 158, 255, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.content-area:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 18px 72px rgba(0, 0, 0, 0.4),
    0 9px 36px rgba(64, 158, 255, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

.top-left {
  grid-area: 1 / 1 / 2 / 2;
}

.top-right {
  grid-area: 1 / 2 / 2 / 3;
}

.bottom-left {
  grid-area: 2 / 1 / 3 / 2;
}

.bottom-right {
  grid-area: 2 / 2 / 3 / 3;
}


</style> 