<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="title">
        <span class="main-title">宁夏智慧畜牧可视化大屏</span>
        <span class="sub-title">宁夏回族自治区</span>
      </div>
      <div class="time-info">
        <span class="date">{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
        <span class="weather">22°C 晴朗</span>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 畜牧产业基础分析 -->
        <div class="panel-section">
          <div class="section-title">
            <span class="title-icon">📊</span>
            畜牧产业基础分析
          </div>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-label">牛存栏</div>
              <div class="stat-value">200 <span class="unit">万</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-label">羊存栏</div>
              <div class="stat-value">200 <span class="unit">万</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-label">猪存栏</div>
              <div class="stat-value">200 <span class="unit">万</span></div>
            </div>
            <div class="stat-item">
              <div class="stat-label">合作社数量</div>
              <div class="stat-value">200 <span class="unit">个</span></div>
            </div>
          </div>
        </div>

        <!-- 养殖品种分布 -->
        <div class="panel-section">
          <div class="section-title">
            <span class="title-icon">🐄</span>
            养殖品种分布
          </div>
          <div class="chart-container" ref="breedChart"></div>
        </div>

        <!-- 全年文档管理统计 -->
        <div class="panel-section">
          <div class="section-title">
            <span class="title-icon">📋</span>
            全年文档管理统计
          </div>
          <div class="chart-container" ref="docChart"></div>
        </div>
      </div>

      <!-- 中央地图区域 -->
      <div class="center-panel">
        <Map3D />
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 流动资源分析 -->
        <div class="panel-section">
          <div class="section-title">
            <span class="title-icon">💰</span>
            流动资源分析
          </div>
          <div class="resource-list">
            <div class="resource-item">
              <span class="resource-name">资金</span>
              <div class="progress-bar">
                <div class="progress" style="width: 75%;"></div>
              </div>
              <span class="resource-value">7500000</span>
            </div>
            <div class="resource-item">
              <span class="resource-name">饲料</span>
              <div class="progress-bar">
                <div class="progress" style="width: 60%;"></div>
              </div>
              <span class="resource-value">6000000</span>
            </div>
            <div class="resource-item">
              <span class="resource-name">设备</span>
              <div class="progress-bar">
                <div class="progress" style="width: 85%;"></div>
              </div>
              <span class="resource-value">8500000</span>
            </div>
          </div>
        </div>

        <!-- 每日资源统计 -->
        <div class="panel-section">
          <div class="section-title">
            <span class="title-icon">📈</span>
            每日资源统计
          </div>
          <div class="chart-container" ref="dailyChart"></div>
        </div>
      </div>
    </div>

    <!-- 底部图表区域 -->
    <div class="bottom-panel">
      <div class="chart-section">
        <div class="section-title">
          <span class="title-icon">📊</span>
          全年文档管理统计
        </div>
        <div class="chart-container" ref="yearChart"></div>
      </div>
      <div class="chart-section">
        <div class="section-title">
          <span class="title-icon">📈</span>
          近七日资源统计
        </div>
        <div class="chart-container" ref="weekChart"></div>
      </div>
      <div class="chart-section">
        <div class="section-title">
          <span class="title-icon">📊</span>
          每日资源流入
        </div>
        <div class="chart-container" ref="inflowChart"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import Map3D from './Map3D.vue'

// 响应式数据
const currentDate = ref('')
const currentTime = ref('')

// 图表引用
const breedChart = ref(null)
const docChart = ref(null)
const dailyChart = ref(null)
const yearChart = ref(null)
const weekChart = ref(null)
const inflowChart = ref(null)

// 定时器
let timeInterval = null

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-')
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false
  })
}

// 初始化图表
const initCharts = () => {
  // 养殖品种分布饼图
  if (breedChart.value) {
    const chart = echarts.init(breedChart.value)
    chart.setOption({
      backgroundColor: 'transparent',
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 35, name: '牛', itemStyle: { color: '#84acf0' } }, /* 地图顶部材质颜色 */
          { value: 25, name: '羊', itemStyle: { color: '#7af4ff' } }, /* 地图光源颜色 */
          { value: 20, name: '猪', itemStyle: { color: '#00F6FF' } }, /* 养殖场标签颜色 */
          { value: 20, name: '其他', itemStyle: { color: '#123024' } } /* 地图侧面材质颜色 */
        ],
        label: {
          color: '#fff',
          fontSize: 12
        }
      }]
    })
  }

  // 全年文档管理统计图表
  if (docChart.value) {
    const chart = echarts.init(docChart.value)
    chart.setOption({
      backgroundColor: 'transparent',
      grid: {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } },
        splitLine: { lineStyle: { color: '#333' } }
      },
      series: [{
        type: 'line',
        data: [50, 80, 65, 90, 120, 100],
        itemStyle: {
          color: '#7af4ff'
        },
        lineStyle: {
          color: '#7af4ff'
        }
      }]
    })
  }

  // 每日资源统计柱状图
  if (dailyChart.value) {
    const chart = echarts.init(dailyChart.value)
    chart.setOption({
      backgroundColor: 'transparent',
      grid: {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } },
        splitLine: { lineStyle: { color: '#333' } }
      },
      series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          color: '#84acf0' /* 使用地图顶部材质颜色，移除渐变 */
        }
      }]
    })
  }

  // 底部年度图表
  if (yearChart.value) {
    const chart = echarts.init(yearChart.value)
    chart.setOption({
      backgroundColor: 'transparent',
      grid: {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4'],
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } },
        splitLine: { lineStyle: { color: '#333' } }
      },
      series: [{
        type: 'bar',
        data: [300, 450, 320, 520],
        itemStyle: {
          color: '#00F6FF'
        }
      }]
    })
  }

  // 近七日资源统计
  if (weekChart.value) {
    const chart = echarts.init(weekChart.value)
    chart.setOption({
      backgroundColor: 'transparent',
      grid: {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      xAxis: {
        type: 'category',
        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff', fontSize: 10 },
        axisLine: { lineStyle: { color: '#333' } },
        splitLine: { lineStyle: { color: '#333' } }
      },
      series: [{
        type: 'line',
        data: [80, 95, 110, 90, 120, 85, 130],
        itemStyle: {
          color: '#123024'
        },
        lineStyle: {
          color: '#123024'
        }
      }]
    })
  }

  // 每日资源流入
  if (inflowChart.value) {
    const chart = echarts.init(inflowChart.value)
    chart.setOption({
      backgroundColor: 'transparent',
      series: [{
        type: 'pie',
        radius: ['30%', '60%'],
        data: [
          { value: 40, name: '资金流入', itemStyle: { color: '#84acf0' } },
          { value: 30, name: '物资流入', itemStyle: { color: '#7af4ff' } },
          { value: 20, name: '设备流入', itemStyle: { color: '#00F6FF' } },
          { value: 10, name: '其他', itemStyle: { color: '#123024' } }
        ],
        label: {
          color: '#fff',
          fontSize: 10
        }
      }]
    })
  }
}



onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  
  // 延迟初始化图表，确保DOM已渲染
  setTimeout(() => {
    initCharts()
  }, 100)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.dashboard-container {
  width: 100vw;
  height: 100vh;
  background: #0c1426; /* 移除渐变，使用地图基础深色 */
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  position: relative;
}

/* 科技感背景效果 */
.dashboard-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    rgba(132, 172, 240, 0.05),
    rgba(18, 48, 36, 0.05);
  pointer-events: none;
}

/* 顶部标题栏 */
.header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background: rgba(132, 172, 240, 0.1); /* 使用地图顶部材质颜色 */
  border-bottom: 2px solid #84acf0; /* 地图顶部材质颜色 */
  position: relative;
}

.header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #84acf0; /* 单色替代渐变 */
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 5px rgba(132, 172, 240, 0.5); }
  to { box-shadow: 0 0 20px rgba(132, 172, 240, 0.8); }
}

.title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main-title {
  font-size: 32px;
  font-weight: bold;
  color: #84acf0; /* 使用地图顶部材质颜色 */
  text-shadow: 0 0 20px rgba(132, 172, 240, 0.5);
}

.sub-title {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 18px;
}

.date, .time {
  color: #84acf0; /* 使用地图顶部材质颜色 */
  font-weight: bold;
}

.weather {
  color: rgba(255, 255, 255, 0.8);
}

/* 主体内容 */
.main-content {
  height: calc(100vh - 240px);
  display: flex;
  padding: 20px;
  gap: 20px;
}

.left-panel, .right-panel {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-panel {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 面板样式 */
.panel-section {
  background: rgba(132, 172, 240, 0.05); /* 使用地图颜色 */
  border: 1px solid rgba(132, 172, 240, 0.3);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(10px);
  position: relative;
}

.panel-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #84acf0; /* 地图顶部材质颜色 */
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #84acf0; /* 使用地图顶部材质颜色 */
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(132, 172, 240, 0.2);
}

.title-icon {
  font-size: 18px;
}

/* 统计数据网格 */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: rgba(18, 48, 36, 0.3); /* 使用地图侧面颜色 */
  border-radius: 6px;
  border: 1px solid rgba(132, 172, 240, 0.2);
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #84acf0; /* 使用地图顶部材质颜色 */
}

.unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 图表容器 */
.chart-container {
  height: 200px;
  width: 100%;
}

/* 地图容器 */
.map-container {
  width: 100%;
  height: 100%;
  background: rgba(18, 48, 36, 0.2); /* 使用地图侧面颜色 */
  border: 2px solid rgba(132, 172, 240, 0.3);
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.map-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #84acf0; /* 使用地图顶部材质颜色 */
  margin-bottom: 20px;
}

.map-content {
  height: calc(100% - 80px);
  width: 100%;
}

.map-legend {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* 资源列表 */
.resource-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.resource-name {
  width: 60px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(18, 48, 36, 0.3); /* 使用地图侧面颜色 */
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #84acf0; /* 单色替代渐变 */
  border-radius: 4px;
  transition: width 0.3s ease;
}

.resource-value {
  font-size: 12px;
  color: #84acf0; /* 使用地图顶部材质颜色 */
  font-weight: bold;
}

/* 底部面板 */
.bottom-panel {
  height: 160px;
  display: flex;
  padding: 0 20px 20px;
  gap: 20px;
}

.chart-section {
  flex: 1;
  background: rgba(132, 172, 240, 0.05); /* 使用地图颜色 */
  border: 1px solid rgba(132, 172, 240, 0.3);
  border-radius: 8px;
  padding: 15px;
  position: relative;
}

.chart-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #84acf0; /* 地图顶部材质颜色 */
}

.chart-section .chart-container {
  height: calc(100% - 40px);
}

/* 响应式设计 */
@media (max-width: 1920px) {
  .main-title { font-size: 28px; }
  .left-panel, .right-panel { width: 320px; }
}

@media (max-width: 1600px) {
  .main-title { font-size: 24px; }
  .left-panel, .right-panel { width: 300px; }
  .stats-grid { grid-template-columns: 1fr; }
}
</style>