<template>
  <div class="dashboard-container">
    <img
      class="dashboard-bg"
      src="/images/世界地图背景.png"
      alt=""
    />

    <!-- 标题区域 -->
    <HeaderBar
      :title="systemConfig.title"
      :title-background="systemConfig.titleBackground"
    />

    <div class="content-area">
      <!-- 主要内容区域 -->
      <div v-if="isLayoutReady" class="main-content">
        <!-- 左侧：背景 + 装饰 + 统计模块 -->
        <div class="side-panel side-panel-left">
          <img class="side-panel-bg" src="/images/左边bg.png" alt="" />
          <img class="side-decor side-decor-left" src="/images/左部.png" alt="" />
          <div class="side-panel-body">
            <div class="left-section">
              <div class="left-column">
                <div class="left-top">
                  <RealTimeStats />
                </div>
                <div class="left-bottom">
                  <YakTradingData />
                </div>
              </div>
              <div class="left-center-column">
                <div class="left-center-top">
                  <ComprehensiveSalesStats />
                </div>
                <div class="left-center-bottom">
                  <YakPriceTrend />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中央地图 -->
        <div class="center-section">
          <div class="map-container">
            <ChinaMap />
          </div>
        </div>

        <!-- 右侧：背景 + 统计模块 + 装饰 -->
        <div class="side-panel side-panel-right">
          <img class="side-panel-bg" src="/images/右边bg.png" alt="" />
          <div class="side-panel-body">
            <div class="right-section">
              <div v-if="isSupplyExpanded" class="expanded-supply-container">
                <SupplyDemandData
                  :force-expanded="true"
                  :initial-detail-id="supplyDetailId"
                  @expand-change="handleSupplyExpand"
                  @initial-detail-applied="clearSupplyDetailId"
                />
              </div>
              <template v-else>
                <div class="right-center-column">
                  <div class="right-center-top">
                    <ExchangeMonitor />
                  </div>
                  <div class="right-center-middle">
                    <YakSalesTypeStats />
                  </div>
                  <div class="right-center-bottom">
                    <PurchaserAnalysis />
                  </div>
                </div>
                <div class="right-column">
                  <div class="right-bottom">
                    <SupplyDemandData :force-expanded="false" @expand-change="handleSupplyExpand" />
                  </div>
                  <div class="right-middle">
                    <MarketRealtimeMonitor />
                  </div>
                  <div class="right-top">
                    <MarketEnvironmentMonitor />
                  </div>
                </div>
              </template>
            </div>
          </div>
          <img class="side-decor side-decor-right" src="/images/右部.png" alt="" />
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-else class="loading-container">
        <div class="loading-content">
          <div class="loading-spinner"></div>
          <div class="loading-text">正在初始化布局...</div>
        </div>
      </div>
    </div>

    <ScreenDecorations />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { configManager } from '../utils/config.js'
import { loadSystemConfig } from '../utils/systemConfig.js'
import { dataManager } from '../utils/dataManager.js'
import { dataUpdater } from '../utils/dataUpdater.js'

// 导入组件
import RealTimeStats from '../components/RealTimeStats.vue'
import YakTradingData from '../components/YakTradingData.vue'
import ComprehensiveSalesStats from '../components/ComprehensiveSalesStats.vue'
import YakPriceTrend from '../components/YakPriceTrend.vue'
import ChinaMap from '../components/ChinaMap.vue'
import ScrollingAnnouncement from '../components/ScrollingAnnouncement.vue'
import TransactionDetails from '../components/TransactionDetails.vue'
import ExchangeMonitor from '../components/ExchangeMonitor.vue'
import YakSalesTypeStats from '../components/YakSalesTypeStats.vue'
import PurchaserAnalysis from '../components/PurchaserAnalysis.vue'
import MarketEnvironmentMonitor from '../components/MarketEnvironmentMonitor.vue'
import MarketRealtimeMonitor from '../components/MarketRealtimeMonitor.vue'
import SupplyDemandData from '../components/SupplyDemandData.vue'
import HeaderBar from '../components/HeaderBar.vue'
import ScreenDecorations from '../components/ScreenDecorations.vue'

// 响应式数据
const config = ref(null)
const systemConfig = ref({
  title: '/标题.png',
  titleBackground: '/images/标题背景.png'
})
const isLayoutReady = ref(false) // 控制页面渲染时机
const isSupplyExpanded = ref(false) // 控制供应信息组件是否展开
const supplyDetailId = ref('')

// 处理供应信息组件展开/收缩
const handleSupplyExpand = (payload) => {
  if (typeof payload === 'boolean') {
    isSupplyExpanded.value = payload
    if (!payload) {
      supplyDetailId.value = ''
    }
    return
  }
  isSupplyExpanded.value = !!payload.expanded
  if (payload.detailId) {
    supplyDetailId.value = payload.detailId
  }
}

const clearSupplyDetailId = () => {
  supplyDetailId.value = ''
}

// 初始化配置
onMounted(async () => {
  try {
    // 加载系统配置（标题栏）
    systemConfig.value = await loadSystemConfig()

    // 加载配置
    console.log('Dashboard: 开始加载配置')
    config.value = await configManager.loadConfig()
    console.log('Dashboard: 配置加载完成', config.value)

    // 设置CSS变量
    console.log('Dashboard: 设置CSS变量')
    configManager.setCSSVariables()

    // 等待CSS变量生效和DOM更新
    await nextTick()

    // 再等待一帧确保样式完全应用
    await new Promise(resolve => requestAnimationFrame(resolve))
    console.log('Dashboard: CSS变量已生效')

    // 加载数据配置
    console.log('Dashboard: 开始加载数据配置')
    const loadedData = await dataManager.loadData()
    console.log('Dashboard: 数据配置加载完成', loadedData)

    // 标记布局准备完成，开始渲染组件
    console.log('Dashboard: 布局准备完成，开始渲染组件')
    isLayoutReady.value = true

    console.log('Dashboard 完全初始化完成')
  } catch (error) {
    console.error('Failed to initialize dashboard:', error)
    systemConfig.value = await loadSystemConfig()
    // 使用默认配置
    config.value = configManager.getDefaultConfig()
    configManager.setCSSVariables()

    // 等待DOM更新后显示页面
    await nextTick()
    await new Promise(resolve => requestAnimationFrame(resolve))
    isLayoutReady.value = true
  }
})
</script>

<style scoped>
/* Dashboard专用样式 - 4:1大屏布局 */
.dashboard-container {
  width: var(--screen-width, 5120px);
  height: var(--screen-height, 1440px);
  min-width: var(--screen-width, 5120px);
  min-height: var(--screen-height, 1440px);
  --decor-offset-x: 16px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #0a0e1a;
  overflow: hidden;
  box-sizing: border-box;
  gap: 20px;
  position: relative;
}

.dashboard-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.dashboard-container > :not(.dashboard-bg) {
  position: relative;
  z-index: 1;
}

/* 响应式适配 - 针对4:1宽高比优化 */
@media (max-width: 1919px) and (min-width: 1600px) {
  .dashboard-container {
    padding: 6px;
    gap: 6px;
  }
}

@media (max-width: 1599px) {
  .dashboard-container {
    padding: 5px;
    gap: 5px;
  }
}

/* 正文区域 */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--decor-offset-x);
  min-height: 0;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
  min-width: 0;
  padding-bottom: 20px;
  position: relative;
  box-sizing: border-box;
}

/* 左右侧背景面板（含装饰 + 统计模块） */
.side-panel {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.side-panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.side-panel-body {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
}

.side-panel-left {
  gap: var(--decor-offset-x);
  padding-left: var(--decor-offset-x);
}

.side-panel-right {
  gap: var(--decor-offset-x);
  padding-right: var(--decor-offset-x);
}

.side-decor {
  position: relative;
  z-index: 2;
  height: 100%;
  width: auto;
  flex-shrink: 0;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* 左侧区域布局 */
.left-section {
  flex: 1;
  display: flex;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.left-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.left-center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

/* 中央区域布局 */
.center-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
}

.map-container {
  position: relative;
  flex: 1;
  min-height: 0;
  background: transparent;
}

.floating-table {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 200px;
  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;
}

/* 右侧区域布局 */
.right-section {
  flex: 1;
  display: flex;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.right-center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.right-center-top,
.right-center-middle,
.right-center-bottom,
.right-top,
.right-middle,
.right-bottom {
  flex: 1;
  min-height: 0;
}

/* 展开供应信息的容器 */
.expanded-supply-container {
  flex: 1;
  min-height: 0;
}

/* 加载状态 */
.loading-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  min-width: 0;
}

.loading-content {
  text-align: center;
  color: #a0a8b8;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(64, 158, 255, 0.3);
  border-top: 3px solid #409EFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

.loading-text {
  font-size: 14px;
  color: #a0a8b8;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 