<template>
    <div><h2>Top20单台设备累计借用时长排名</h2></div>
    <div>
      <el-table :data="sortedDurationData" 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="total_duration" label="借用时长（小时）" />
      </el-table>
      
      <!-- <template>
        <draggable v-model="sortedDurationData" item-key="device_id" tag="el-table">
            <template #item="{ element, index }">
            <el-table-row>
                <el-table-column>{{ index + 1 }}</el-table-column>
                <el-table-column>{{ element }}</el-table-column>
                <el-table-column>{{ element }}</el-table-column>
                <el-table-column>{{ element }}</el-table-column>
            </el-table-row>
            </template>
        </draggable>
        </template> -->


    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useDeviceRanking } from '../composables/useDeviceRanking'
 import { VueDraggableNext as draggable} from 'vue-draggable-next'
  
  const selectedTag = ref('')
  const tags = ['全部', '高值设备', '摄影设备']
  const { borrowDurationData, fetchRanking } = useDeviceRanking()
  
  const loadData = async () => {
    await fetchRanking(selectedTag.value)
  }
  
  const sortedDurationData = computed(() =>
    [...borrowDurationData.value].sort((a, b) => Number(b.total_duration) - Number(a.total_duration))
  )
  
  onMounted(loadData)
  </script>
  