<template>
    <div class="ranking-panel">
      <div class="panel-header">
        <el-select v-model="borrowType" placeholder="借用类型" style="width: 140px">
          <el-option label="全部" value="all" />
          <el-option label="常规借用" value="regular" />
          <el-option label="课堂借用" value="classroom" />
          <el-option label="特殊借用" value="special" />
        </el-select>
  
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 10px"
        />
  
        <el-input
          v-model="keyword"
          placeholder="搜索用户/设备"
          clearable
          style="margin-left: 10px; width: 200px"
        />
  
        <el-button type="primary" @click="fetchRanking" style="margin-left: 10px">
          查询
        </el-button>
      </div>
  
      <el-table
        v-if="rankingData.length"
        :data="rankingData"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column type="index" label="排名" 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-column prop="total_quantity" label="累计借用册数" /> -->
      </el-table>
  
      <div v-else class="empty-tip">暂无数据</div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import * as api from '../api'
  
  interface RankingItem {
    user_id: number
    user_name: string
    user_code: string
    borrow_count: number
    total_quantity: number
  }
  
  const borrowType = ref('all')
  const dateRange = ref<[string, string] | null>(null)
  const keyword = ref('')
  const rankingData = ref<RankingItem[]>([])
  
  const fetchRanking = async () => {
    const params: Record<string, any> = {
      type: borrowType.value
    }
  
    if (dateRange.value) {
      params.start = dateRange.value[0]
      params.end = dateRange.value[1]
    }
  
    if (keyword.value) {
      params.keyword = keyword.value
    }
  
    const res = await api.GetBorrowRanking(params)
    if (res.code === 2000) {
      rankingData.value = res.data.borrow_count_ranking
    } else {
      rankingData.value = []
    }
  }
  
  onMounted(fetchRanking)
  </script>
  
  <style scoped>
  .ranking-panel {
    width: 100%;
    padding: 10px;
  }
  .panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .empty-tip {
    text-align: center;
    color: #999;
    padding: 20px;
  }
  </style>
  