<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">设备按摩时长排行榜</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
import { getDeviceTotalMassageTime } from '@/api/data'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      config: {
        header: ['排名', '设备名称', '总按摩时长(分钟)'],
        data: [],
        rowNum: 7,
        headerHeight: 35,
        headerBGC: '#0f1325',
        oddRowBGC: '#0f1325',
        evenRowBGC: '#171c33',
        index: false, // 禁用默认索引
        columnWidth: [60, 120, 120],
        align: ['center']
      },
      loading: false
    }
  },
  mounted() {
    this.loadDeviceUsageData()
  },
  methods: {
    async loadDeviceUsageData() {
      this.loading = true
      try {
        console.log('开始请求设备数据...')
        
        const response = await getDeviceTotalMassageTime()
        console.log('API响应:', response)
        
        if (response && response.code === 200) {
          const deviceData = response.data || []
          
          const tableData = this.formatDeviceData(deviceData)
          this.config = {
            ...this.config,
            data: tableData
          }
          
          console.log('设备按摩数据加载成功:', deviceData)
          Message.success('数据加载成功')
        } else {
          console.error('API返回错误:', response)
          Message.error('数据加载失败: ' + (response.msg || '未知错误'))
          this.useMockData()
        }
      } catch (error) {
        console.error('请求设备数据异常:', error)
        Message.error('设备数据加载失败: ' + error.message)
        this.useMockData()
      } finally {
        this.loading = false
      }
    },
    
    formatDeviceData(deviceData) {
      if (!deviceData || !Array.isArray(deviceData)) {
        return []
      }
      
      const sortedData = deviceData.sort((a, b) => {
        const timeA = a.totalMassageTime || a.duration || a.value || 0
        const timeB = b.totalMassageTime || b.duration || b.value || 0
        return timeB - timeA
      })
      
      return sortedData.map((item, index) => {
        const deviceName = item.deviceName || item.name || item.deviceId || `设备${index + 1}`
        const massageTime = item.totalMassageTime || item.duration || item.value || 0
        const minutes = Math.round(massageTime)
        
        return [
          `${index + 1}`, // 手动添加排名数字
          deviceName,
          `<span class='colorGrass'>${minutes}分钟</span>`
        ]
      })
    },
    
    useMockData() {
      const mockData = [
        { deviceName: '按摩设备A', totalMassageTime: 456 },
        { deviceName: '按摩设备B', totalMassageTime: 389 },
        { deviceName: '按摩设备C', totalMassageTime: 342 },
        { deviceName: '按摩设备D', totalMassageTime: 298 },
        { deviceName: '按摩设备E', totalMassageTime: 267 },
        { deviceName: '按摩设备F', totalMassageTime: 234 },
        { deviceName: '按摩设备G', totalMassageTime: 198 },
        { deviceName: '按摩设备H', totalMassageTime: 167 },
        { deviceName: '按摩设备I', totalMassageTime: 145 },
        { deviceName: '按摩设备J', totalMassageTime: 123 }
      ]
      
      const tableData = this.formatDeviceData(mockData)
      this.config = {
        ...this.config,
        data: tableData
      }
      
      console.log('使用模拟数据:', mockData)
      Message.info('使用模拟数据展示')
    }
  }
}
</script>