<template>
  <div id="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="align-left" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2">设备使用分析</span>
      </div>
      <div class="d-flex ai-center flex-column body-box">
        <!-- 胶囊图：显示设备使用排名 -->
        <dv-capsule-chart class="dv-cap-chart" :config="capsuleConfig" />
        <!-- 雷达图：显示设备多维度分析 -->
        <centerRight2Chart1 :cdata="radarData" />
        
        <!-- 统计指标 -->
        <div class="stats-container">
          <div class="stat-item">
            <span class="stat-label">总设备数</span>
            <span class="stat-value">{{ stats.totalDevices }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">在线率</span>
            <span class="stat-value">{{ stats.onlineRate.toFixed(1) }}%</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">今日任务</span>
            <span class="stat-value">{{ stats.todayTasks }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
import { getDeviceUsageAnalysis } from '@/api/data'

export default {
  data() {
    return {
      capsuleConfig: {
        data: []
      },
      radarData: {
        indicatorData: [],
        dataBJ: [],
        dataSH: [],
        dataGZ: []
      },
      stats: {
        totalDevices: 0,
        onlineDevices: 0,
        offlineDevices: 0,
        onlineRate: 0,
        totalTasks: 0,
        todayTasks: 0,
        avgTasksPerDevice: 0
      }
    }
  },
  components: { centerRight2Chart1 },
  mounted() {
    this.loadDeviceUsageData()
  },
  methods: {
    async loadDeviceUsageData() {
      try {
        const response = await getDeviceUsageAnalysis()
        const data = response.data
        
        // 更新胶囊图数据
        this.capsuleConfig = {
          data: data.capsuleData
        }
        
        // 更新雷达图数据
        this.radarData = {
          indicatorData: data.radarData.indicatorData,
          dataBJ: [data.radarData.device1],
          dataSH: [data.radarData.device2],
          dataGZ: [data.radarData.device3]
        }
        
        // 更新统计指标
        this.stats = data.stats
        
      } catch (error) {
        console.error('加载设备使用分析数据失败:', error)
        this.setDefaultData()
      }
    },
    setDefaultData() {
      this.capsuleConfig = {
        data: [
          { name: '设备A', value: 167 },
          { name: '设备B', value: 123 },
          { name: '设备C', value: 98 },
          { name: '设备D', value: 87 },
          { name: '设备E', value: 76 }
        ]
      }
      
      this.radarData = {
        indicatorData: [
          { name: "使用频率", max: 100 },
          { name: "运行时长", max: 100 },
          { name: "在线率", max: 100 },
          { name: "按摩次数", max: 100 },
          { name: "设备健康", max: 100 },
          { name: "任务效率", max: 100 }
        ],
        dataBJ: [[85, 70, 90, 60, 75, 50]],
        dataSH: [[70, 85, 65, 80, 60, 70]],
        dataGZ: [[90, 60, 75, 70, 85, 55]]
      }
      
      this.stats = {
        totalDevices: 50,
        onlineDevices: 35,
        offlineDevices: 15,
        onlineRate: 70.0,
        totalTasks: 1200,
        todayTasks: 25,
        avgTasksPerDevice: 24.0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#centerRight2 {
  $box-height: 410px;
  $box-width: 340px;
  padding: 5px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  
  .bg-color-black {
    padding: 5px;
    height: $box-height;
    width: $box-width;
    border-radius: 10px;
  }
  
  .text {
    color: #c3cbde;
  }
  
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    
    .dv-cap-chart {
      width: 100%;
      height: 160px;
    }
    
    .stats-container {
      display: flex;
      justify-content: space-around;
      padding: 10px;
      width: 100%;
      
      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .stat-label {
          font-size: 12px;
          color: #c3cbde;
          margin-bottom: 4px;
        }
        
        .stat-value {
          font-size: 16px;
          color: #ffd700;
          font-weight: bold;
        }
      }
    }
  }
}
</style>