
<template>
    <div><h2>Top20单台设备累计借用次数排名</h2></div>
    <div>
      <el-table :data="sortedData" style="width: 100%">
        <el-table-column label="排名" type="index" width="60" />
        <el-table-column prop="device_name" label="设备名称" />
        <el-table-column prop="device_code" label="设备编号" />
        <el-table-column prop="borrow_count" label="借用次数" />
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref, watch,computed } from 'vue'
  import * as echarts from 'echarts'
  import { useDeviceRanking } from '../composables/useDeviceRanking'
  

  const chartRef = ref<HTMLElement | null>(null)
  const selectedTag = ref('')
  const tags = ['全部', '高值设备', '摄影设备'] // 示例标签
  const { borrowCountData, fetchRanking } = useDeviceRanking()
  


  interface DeviceItem {
    device_id: number
    device_name: string
    device_code: string
    borrow_count: number
  }

  const rawData = ref<DeviceItem[]>([])
  
  const loadData = async () => {
      await fetchRanking()
      rawData.value = borrowCountData.value

  }

  const sortedData = computed(() =>
    [...rawData.value].sort((a, b) => b.borrow_count - a.borrow_count)
  )


  


    
  onMounted(loadData)
  
//   watch(borrowCountData, renderChart)
  </script>
  



  