<template>
  <div>
    <!-- 顶部统计卡片区 -->
    <el-row :gutter="16" class="mb-16px">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card stat-card-total">
          <div class="stat-value">{{ deviceStats.totalCount }}<span class="stat-unit">台</span></div>
          <div class="stat-title">总设备数</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card stat-card-online">
          <div class="stat-value online">{{ deviceStats.onlineCount }}<span class="stat-unit">台</span></div>
          <div class="stat-title">在线设备</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card stat-card-offline">
          <div class="stat-value offline">{{ deviceStats.offlineCount }}<span class="stat-unit">台</span></div>
          <div class="stat-title">离线设备</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card stat-card-warning">
          <div class="stat-value warning">{{ alertData.alertTotal }}<span class="stat-unit">条</span></div>
          <div class="stat-title">预警信息 <span class="stat-warning-unhandled">未处理 {{ alertData.alertUnhandled }}</span></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下方地图+柱状图 -->
    <el-row :gutter="16">
      <el-col :span="15">
        <el-card shadow="never" class="modern-card" style="height: 650px">
          <template #header>
            <span class="modern-card-title">设备分布地图</span>
          </template>
          <Echart :options="mapOptions" :height="580" />
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="never" class="modern-card" style="height: 650px;">
          <template #header>
            <span class="modern-card-title">会员增长趋势</span>
          </template>
          <Echart :options="memberLineOptions" :height="580" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Echart } from '@/components/Echart'
import chinaJson from '@/assets/map/json/china.json'
import * as echarts from 'echarts/core'
import { ElMessage } from 'element-plus'
import { DataAnalysis, Connection, CircleClose, Warning } from '@element-plus/icons-vue'
import { DeviceApi, DeviceMapVO } from '@/api/device'
import { AlertMessageApi } from '@/api/alertmessage'
import { PersonApi, MemberGrowthVO } from '@/api/person'
import { getUserProfile } from '@/api/system/user/profile'

// 预警统计数据
const alertData = reactive({
  alertTotal: 0,
  alertUnhandled: 0
})

// 设备统计数据
const deviceStats = reactive({
  totalCount: 0,
  onlineCount: 0,
  offlineCount: 0
})

// 地图数据
const mapData = reactive<DeviceMapVO>({
  totalCount: 0,
  onlineCount: 0,
  offlineCount: 0,
  alertTotal: 0,
  alertUnhandled: 0,
  mapData: [],
  scatterData: []
})

// 地图配置（底图+点标注）
const mapOptions = ref<any>({})

// 会员增长数据
const memberGrowthData = ref([
  { date: '周一', count: 0 },
  { date: '周二', count: 0 },
  { date: '周三', count: 0 },
  { date: '周四', count: 0 },
  { date: '周五', count: 0 },
  { date: '周六', count: 0 },
  { date: '周日', count: 0 }
])

const memberLineOptions = ref<any>({
  tooltip: { trigger: 'axis' },
  grid: { left: 40, right: 24, top: 40, bottom: 40 },
  xAxis: {
    type: 'category',
    data: memberGrowthData.value.map(d => d.date),
    boundaryGap: false,
    axisLine: { lineStyle: { color: '#dbeafe' } },
    axisLabel: { color: '#666', fontSize: 14 }
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
    axisLine: { show: false },
    splitLine: { lineStyle: { color: '#f0f0f0' } },
    axisLabel: { color: '#888', fontSize: 13 }
  },
  series: [
    {
      name: '会员增长',
      type: 'line',
      data: memberGrowthData.value.map(d => d.count),
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      lineStyle: { color: '#409EFF', width: 3 },
      itemStyle: { color: '#409EFF', borderColor: '#fff', borderWidth: 2 },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64,158,255,0.18)' },
            { offset: 1, color: 'rgba(64,158,255,0.02)' }
          ]
        }
      }
    }
  ]
})

// 获取预警统计数据
const getAlertData = async (orgid: number) => {
  try {
    const data = await AlertMessageApi.getAlertStatistics(orgid)
    Object.assign(alertData, data)
  } catch (error) {
    console.error('获取预警数据失败:', error)
    ElMessage.error('获取预警数据失败')
  }
}

// 获取设备统计数据
const getDeviceStats = async (orgid: number) => {
  try {
    const data = await DeviceApi.getDeviceStatistics(orgid)
    Object.assign(deviceStats, data)
  } catch (error) {
    console.error('获取设备统计数据失败:', error)
    ElMessage.error('获取设备统计数据失败')
  }
}

// 获取设备分布地图数据
const getDeviceMapData = async (orgid: number) => {
  try {
    const data = await DeviceApi.getDeviceMapData(orgid)

    
    // 更新地图数据
    Object.assign(mapData, data)
    
    // 更新地图配置 - 组件会自动监听options变化
    updateMapOptions()
    

  } catch (error) {
    console.error('获取设备分布数据失败:', error)
    ElMessage.error('获取设备分布数据失败')
  }
}

// 获取会员增长数据
const getMemberGrowthData = async (orgid: number) => {
  try {
    const data = await PersonApi.getMemberGrowthData(orgid)
    memberGrowthData.value = data
    
    // 更新会员增长图表
    updateMemberLineOptions()
  } catch (error) {
    console.error('获取会员增长数据失败:', error)
    ElMessage.error('获取会员增长数据失败')
  }
}

// 更新会员增长图表
const updateMemberLineOptions = () => {
  memberLineOptions.value = {
    tooltip: { 
      trigger: 'axis',
      formatter: (params: any) => {
        const data = params[0]
        return `${data.name}<br/>新增会员：${data.value} 人`
      }
    },
    grid: { left: 40, right: 24, top: 40, bottom: 40 },
    xAxis: {
      type: 'category',
      data: memberGrowthData.value.map(d => d.date),
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#dbeafe' } },
      axisLabel: { color: '#666', fontSize: 14 }
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      axisLine: { show: false },
      splitLine: { lineStyle: { color: '#f0f0f0' } },
      axisLabel: { color: '#888', fontSize: 13 }
    },
    series: [
      {
        name: '会员增长',
        type: 'line',
        data: memberGrowthData.value.map(d => d.count),
        smooth: true,
        symbol: 'circle',
        symbolSize: 10,
        lineStyle: { color: '#409EFF', width: 3 },
        itemStyle: { color: '#409EFF', borderColor: '#fff', borderWidth: 2 },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(64,158,255,0.18)' },
              { offset: 1, color: 'rgba(64,158,255,0.02)' }
            ]
          }
        }
      }
    ]
  }
}

// 更新地图配置
const updateMapOptions = () => {
  console.log('更新地图配置，当前数据:', mapData)
  
  const maxValue = mapData.mapData.length > 0 
    ? Math.max(...mapData.mapData.map(d => d.value), 10)
    : 10

  console.log('地图数据:', mapData.mapData)
  console.log('散点数据:', mapData.scatterData)
  console.log('最大值:', maxValue)

  // 处理散点数据，确保格式正确
  const processedScatterData = mapData.scatterData.map(item => {
    console.log('处理散点数据项:', item)
    return {
      name: item.name,
      value: item.value,
      count: item.count
    }
  })
  
  console.log('处理后的散点数据:', processedScatterData)

  mapOptions.value = {
    geo: {
      map: 'china',
      roam: true,
      label: {
        show: true,  // 开启geo的label显示
        color: '#2c3e50',
        fontWeight: 'bold',
        fontSize: 11
      },
      itemStyle: { 
        areaColor: '#f8f9fa',  // 更浅的背景色
        borderColor: '#4ea3ff' 
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        if (params.seriesType === 'effectScatter') {
          // 设备点的tooltip
          return `${params.name}<br/>设备数量: ${params.value[2]}台`
        }
        // 注释掉省份区域的tooltip - 需要时可以取消注释
        // if (params.seriesType === 'map') {
        //   // 省份区域的tooltip
        //   return `${params.name}<br/>设备数量: ${params.data ? params.data.value : 0}台`
        // }
        return params.name
      }
    },
    visualMap: {
      min: 0,
      max: maxValue,
      left: 'left',
      top: 'bottom',
      text: ['多', '少'],
      inRange: { color: ['#e3f2fd', '#1976d2'] },  // 改为更明显的蓝色渐变
      show: true
    },
    series: [
      {
        name: '设备分布',
        type: 'map',
        map: 'china',
        geoIndex: 0,
        roam: true,
        data: mapData.mapData,
        label: {
          show: false  // 关闭series的label，使用geo的label
        },
        emphasis: {
          label: { 
            show: true,
            fontSize: 13,
            fontWeight: 'bold',
            color: '#000000'  // 强调时使用黑色
          },
          itemStyle: {
            areaColor: '#ffeb3b'  // 强调时使用黄色背景
          }
        }
      },
      {
        name: '设备点',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: processedScatterData,
        symbolSize: (val: any) => {
          const size = val[2] || 1
          return Math.max(6, Math.min(16, 6 + size * 2))  // 调整点的大小范围
        },
        showEffectOn: 'render',
        rippleEffect: { 
          brushType: 'stroke',
          scale: 2.5,  // 减小涟漪效果
          period: 4
        },
        itemStyle: {
          color: '#000000',  // 改为黑色
          shadowBlur: 8,     // 减小阴影
          shadowColor: '#000000'
        },
        emphasis: {
          itemStyle: {
            color: '#333333',  // 强调时的深灰色
            shadowBlur: 15,
            shadowColor: '#333333'
          }
        },
        zlevel: 2
      }
    ]
  }
  
  console.log('地图配置已更新:', mapOptions.value)
}

// 地图点击事件（弹窗显示设备数）
const handleMapClick = (params: any) => {
  if (params.componentType === 'series') {
    if (params.seriesType === 'map') {
      // 点击省份区域
      const area = params.name
      const count = params.data ? params.data.value : 0
      ElMessage.info(`${area} 有 ${count} 个设备`)
    } else if (params.seriesType === 'effectScatter') {
      // 点击设备点
      const area = params.name
      const count = params.value[2] || 0
      ElMessage.info(`${area} 有 ${count} 个设备`)
    }
  }
}

// 初始化所有数据
const initAllData = async () => {
  try {
    // 获取用户信息，从中获取orgid（部门ID）
    const userProfile = await getUserProfile()
    const orgid = userProfile.dept.orgid
    
    // 并行获取所有数据
    await Promise.all([
      getAlertData(orgid),
      getDeviceStats(orgid),
      getDeviceMapData(orgid),
      getMemberGrowthData(orgid)
    ])
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('初始化数据失败')
  }
}

// 注册中国地图并初始化
onMounted(async () => {
  // 注册中国地图
  // @ts-ignore
  echarts.registerMap('china', chinaJson)
  
  // 初始化所有数据
  await initAllData()
  
  // 绑定地图点击事件
  setTimeout(() => {
    // 查找所有ECharts实例，第一个应该是地图（因为它在模板中的位置）
    const allCharts = document.querySelectorAll('.v-echart')
    console.log('找到的ECharts元素数量:', allCharts.length)
    
    if (allCharts.length > 0) {
      // 第一个ECharts实例应该是设备分布地图
      const mapChart = allCharts[0]
      console.log('地图DOM元素:', mapChart)
      
      // @ts-ignore
      const chart = echarts.getInstanceByDom(mapChart)
      console.log('ECharts实例:', chart)
      if (chart) {
        chart.on('click', handleMapClick)
        console.log('地图点击事件已绑定')
      }
    } else {
      console.log('未找到任何ECharts实例')
    }
  }, 1000) // 增加延迟时间，确保地图已渲染
})
</script>

<style scoped>
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  box-shadow: 0 8px 32px 0 rgba(64,158,255,0.18);
  transform: translateY(-2px) scale(1.03);
}
.stat-card-total {
  background: linear-gradient(135deg, #e0e7ef 0%, #b6c6e6 100%);
}
.stat-card-online {
  background: linear-gradient(135deg, #e8f5e9 0%, #b2f0c0 100%);
}
.stat-card-offline {
  background: linear-gradient(135deg, #ffeaea 0%, #ffc1c1 100%);
}
.stat-card-warning {
  background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
}
.stat-card-warning .stat-icon {
  color: #faad14;
}
.stat-value.warning {
  color: #faad14;
}
.stat-warning-unhandled {
  color: #f56c6c;
  font-size: 13px;
  margin-left: 8px;
}
.stat-icon {
  font-size: 38px;
  margin-bottom: 8px;
  color: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-card-online .stat-icon {
  color: #4caf50;
}
.stat-card-offline .stat-icon {
  color: #f44336;
}
.stat-value {
  font-size: 38px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
  line-height: 1.1;
}
.stat-value.online {
  color: #4caf50;
}
.stat-value.offline {
  color: #f44336;
}
.stat-unit {
  font-size: 16px;
  font-weight: 400;
  margin-left: 2px;
  color: #888;
}
.stat-title {
  font-size: 16px;
  color: #666;
  letter-spacing: 1px;
  margin-top: 2px;
  font-weight: 500;
}

/* 现代化大卡片样式 */
.modern-card {
  border-radius: 18px;
  box-shadow: 0 6px 32px 0 rgba(64,158,255,0.10);
  background: #fff;
  border: none;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.modern-card:hover {
  box-shadow: 0 12px 48px 0 rgba(64,158,255,0.18);
  transform: translateY(-2px) scale(1.01);
}
.modern-card .el-card__header {
  background: transparent;
  border-bottom: none;
  padding: 24px 24px 12px 24px;
}
.modern-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  letter-spacing: 1px;
}
.modern-card .el-card__body {
  padding: 0 24px 24px 24px;
}
</style>
