<template>
  <div class="tv86-viewport">
    <div class="tv86-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="main-content">
        <!-- 左侧区域 -->
        <div class="left-section">
          <!-- 左上：牦牛实时交易概况 -->
          <div class="left-top">
            <YakTradingOverview />
          </div>
          
          <!-- 左下：活牛、鲜肉价格趋势 -->
          <div class="left-bottom">
            <PriceTrendChart />
          </div>
        </div>

        <!-- 右侧：市场公告 -->
        <div class="right-section">
          <MarketAnnouncements />
        </div>
      </div>
    </div>
  </div>
</template>

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

// 基准分辨率
const BASE_WIDTH = 3840
const BASE_HEIGHT = 2160

// 响应式数据
const containerRef = ref(null)
const currentDate = ref('')
const currentWeekday = ref('')
const lunarDate = ref('')
const weather = ref('晴')
const temperature = ref('36°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()
    
    // 使用toString方法获取完整信息来检查闰月
    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) // 每分钟更新一次
  
  // 86寸电视页面专用：禁用页面滚动条
  document.body.style.overflow = 'hidden'
  document.documentElement.style.overflow = 'hidden'
  
  // 初始化缩放
  updateScale()
  
  // 监听窗口大小变化
  window.addEventListener('resize', updateScale)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
  window.removeEventListener('resize', updateScale)
  
  // 恢复页面滚动条（当离开86寸电视页面时）
  document.body.style.overflow = 'auto'
  document.documentElement.style.overflow = 'auto'
})
</script>

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

.tv86-container {
  width: 3840px;
  height: 2160px;
  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: 40px;
  box-sizing: border-box;
  position: absolute;
}

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

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

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

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

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

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

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

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  gap: 60px;
  min-height: 0;
}

/* 左侧区域 */
.left-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.left-top {
  /* height: 400px; */
  flex-shrink: 0;
}

.left-bottom {
  flex: 1;
  min-height: 0;
}

/* 右侧区域 */
.right-section {
  flex: 1;
}

/* 确保内容始终适配，移除响应式媒体查询 */
/* 页面会通过JavaScript自动缩放来适配不同屏幕尺寸 */
</style> 