<template>
  <div class="dashboard">
    <!-- 标题 -->
    <h1 class="dashboard-title">设备监控看板</h1>

    <div class="chart-container">
      <div class="chart-grid">
        <!-- 设备状态 -->
        <div class="chart-card">
          <h2>设备基础状态</h2>
          <div ref="deviceStatusChart" class="chart"></div>
        </div>

        <!-- 设备分布 -->
        <div class="chart-card">
          <h2>设备分布情况</h2>
          <div ref="deviceDistributionChart" class="chart"></div>
        </div>

        <!-- 告警统计 -->
        <div class="chart-card">
          <h2>设备告警统计</h2>
          <div ref="alarmChart" class="chart"></div>
        </div>

        <!-- 年龄分布 -->
        <div class="chart-card">
          <h2>用户年龄分布</h2>
          <div ref="ageChart" class="chart"></div>
        </div>

        <!-- 重点人群 -->
        <div class="chart-card">
          <h2>重点关注人群</h2>
          <div ref="focusGroupChart" class="chart"></div>
        </div>

        <!-- 日活统计 -->
        <div class="chart-card">
          <h2>日活跃用户统计</h2>
          <div ref="dailyActiveChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

defineOptions({
  name: 'HomeIndex',
})

// 图表DOM引用
const deviceStatusChart = ref<HTMLElement | null>(null)
const deviceDistributionChart = ref<HTMLElement | null>(null)
const alarmChart = ref<HTMLElement | null>(null)
const ageChart = ref<HTMLElement | null>(null)
const focusGroupChart = ref<HTMLElement | null>(null)
const dailyActiveChart = ref<HTMLElement | null>(null)

// 初始化所有图表
const initCharts = () => {
  initDeviceStatusChart()
  initDeviceDistributionChart()
  initAlarmChart()
  initAgeChart()
  initFocusGroupChart()
  initDailyActiveChart()
}

// 设备状态图表
const initDeviceStatusChart = () => {
  const chart = echarts.init(deviceStatusChart.value)
  const option = {
    tooltip: { trigger: 'item' },
    legend: { bottom: 10, left: 'center', textStyle: { color: '#fff' } },
    series: [
      {
        name: '设备状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],
        itemStyle: { borderWidth: 2, borderColor: '#0f1c3c' },
        data: [
          {
            value: 356,
            name: '在线设备',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00fffc' },
                { offset: 1, color: '#0066cc' },
              ]),
            },
          },
          {
            value: 42,
            name: '离线设备',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff7c7c' },
                { offset: 1, color: '#cc0000' },
              ]),
            },
          },
        ],
        label: { color: '#e6e6e6' },
        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
      },
    ],
  }
  chart.setOption(option)
}

// 设备分布图表
const initDeviceDistributionChart = () => {
  const chart = echarts.init(deviceDistributionChart.value)
  const option = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: { left: '3%', right: '4%', bottom: '10%', top: '15%', containLabel: true },
    xAxis: {
      type: 'category',
      data: ['卫生间', '卧室', '客厅', '厨房', '阳台'],
      axisLabel: { color: '#aaa' },
    },
    yAxis: { type: 'value', axisLabel: { color: '#aaa' } },
    series: [
      {
        name: '设备数量',
        type: 'bar',
        data: [45, 78, 120, 35, 28],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00f2fe' },
            { offset: 1, color: '#4facfe' },
          ]),
        },
        barWidth: '35%',
        label: { show: true, position: 'top', color: '#fff' },
      },
    ],
  }
  chart.setOption(option)
}

// 告警统计图表
const initAlarmChart = () => {
  const chart = echarts.init(alarmChart.value)
  const option = {
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', right: 10, top: 'center', textStyle: { color: '#fff' } },
    series: [
      {
        name: '告警类型',
        type: 'pie',
        radius: '70%',
        center: ['40%', '50%'],
        roseType: 'radius',
        itemStyle: { borderRadius: 8 },
        data: [
          { value: 12, name: '火灾报警', itemStyle: { color: '#ff6b6b' } },
          { value: 8, name: '燃气泄漏', itemStyle: { color: '#ffd166' } },
          { value: 5, name: '异常入侵', itemStyle: { color: '#06d6a0' } },
          { value: 3, name: '设备故障', itemStyle: { color: '#118ab2' } },
        ],
        label: { color: '#e6e6e6' },
        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
      },
    ],
  }
  chart.setOption(option)
}

// 年龄分布图表
const initAgeChart = () => {
  const chart = echarts.init(ageChart.value)
  const option = {
    tooltip: { trigger: 'axis' },
    radar: {
      indicator: [
        { name: '18岁以下', max: 100 },
        { name: '18-30岁', max: 100 },
        { name: '31-45岁', max: 100 },
        { name: '46-60岁', max: 100 },
        { name: '60岁以上', max: 100 },
      ],
      splitArea: { show: false },
      axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
      splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
      axisName: { color: '#fff' },
    },
    series: [
      {
        name: '年龄分布',
        type: 'radar',
        data: [
          {
            value: [15, 42, 65, 38, 22],
            name: '用户占比',
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { width: 2, color: '#4facfe' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(79, 172, 254, 0.5)' },
                { offset: 1, color: 'rgba(79, 172, 254, 0.1)' },
              ]),
            },
          },
        ],
      },
    ],
  }
  chart.setOption(option)
}

// 重点关注人群图表
const initFocusGroupChart = () => {
  const chart = echarts.init(focusGroupChart.value)
  const option = {
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '关注人群',
        type: 'pie',
        radius: ['50%', '80%'],
        center: ['50%', '50%'],
        data: [
          { value: 23, name: '独居老人', itemStyle: { color: '#ff6b6b' } },
          { value: 15, name: '婴幼儿家庭', itemStyle: { color: '#4ecdc4' } },
          { value: 8, name: '慢性病患者', itemStyle: { color: '#ffd166' } },
          { value: 5, name: '残障人士', itemStyle: { color: '#118ab2' } },
        ],
        label: { color: '#e6e6e6' },
        itemStyle: { borderWidth: 3, borderColor: '#0f1c3c' },
        emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' } },
      },
    ],
  }
  chart.setOption(option)
}

// 日活统计图表
const initDailyActiveChart = () => {
  const chart = echarts.init(dailyActiveChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: '#4facfe',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
      formatter: '{b0}: {c0} 活跃用户',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
      axisLine: {
        lineStyle: {
          color: 'rgba(79, 172, 254, 0.5)',
          width: 1,
        },
      },
      axisLabel: {
        color: '#a0d2ff',
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(79, 172, 254, 0.5)',
          width: 1,
        },
      },
      axisLabel: {
        color: '#a0d2ff',
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(79, 172, 254, 0.1)',
        },
      },
    },
    series: [
      {
        name: '活跃用户',
        type: 'line',
        data: [320, 432, 501, 1258, 590, 730, 820],
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          width: 4,
          color: '#00f2fe',
          shadowColor: 'rgba(0, 242, 254, 0.5)',
          shadowBlur: 10,
        },
        itemStyle: {
          color: '#00f2fe',
          borderWidth: 2,
          borderColor: '#0f1c3c',
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 242, 254, 0.5)' },
            { offset: 1, color: 'rgba(0, 242, 254, 0.01)' },
          ]),
        },
        markPoint: {
          data: [
            {
              type: 'max',
              name: '峰值',
              symbol: 'circle',
              symbolSize: 16,
              itemStyle: {
                color: '#00f2fe',
                shadowColor: '#00f2fe',
                shadowBlur: 15,
              },
              label: {
                color: '#00f2fe',
                fontSize: 12,
                position: 'top',
                formatter: '峰值: {c}',
              },
            },
          ],
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100,
        zoomLock: true,
      },
    ],
    animation: true,
    animationDuration: 2000,
    animationEasing: 'cubicOut',
  }
  chart.setOption(option)
}

onMounted(() => {
  initCharts()
  // 响应式调整
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(deviceStatusChart.value!)?.resize()
    echarts.getInstanceByDom(deviceDistributionChart.value!)?.resize()
    echarts.getInstanceByDom(alarmChart.value!)?.resize()
    echarts.getInstanceByDom(ageChart.value!)?.resize()
    echarts.getInstanceByDom(focusGroupChart.value!)?.resize()
    echarts.getInstanceByDom(dailyActiveChart.value!)?.resize()
  })
})
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
}
.dashboard {
  background: linear-gradient(135deg, #0f1c3c, #1a3a5f);
  min-height: 100vh;
  padding: 20px;
  color: white;
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 8px;
}

.dashboard-title {
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(79, 172, 254, 0.7);
  letter-spacing: 2px;
}

.chart-container {
  flex: 1;
  padding: 0 20px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1800px;
  min-width: 700px;
  margin: 0 auto;
  grid-auto-flow: dense;
}

.chart-card {
  background: rgba(16, 33, 64, 0.6);
  border: 1px solid rgba(79, 172, 254, 0.3);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.4);
  border-color: rgba(0, 242, 254, 0.6);
}

.chart-card h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.3rem;
  color: #4facfe;
  text-align: center;
  border-bottom: 1px solid rgba(79, 172, 254, 0.3);
  padding-bottom: 10px;
}

.chart {
  height: 350px;
}

@media (max-width: 1200px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}
</style>
