<template>
  <div class="ranking-container">
    <el-card class="ranking-card">
      <h2 class="ranking-title">本月热租榜</h2>
      
      <el-table :data="rankList" style="width: 100%">
        <el-table-column type="index" label="排名" width="80" />
        <el-table-column label="封面" width="120">
          <template #default="scope">
            <el-image :src="scope.row.url" class="cover-small" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="书名" width="200" />
        <el-table-column prop="number" label="阅读量" width="120" />
        <el-table-column prop="money" label="价格(元/天)" width="120">
          <template #default="scope">
            ￥{{ scope.row.money }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button 
              type="text" 
              @click="handleBorrow(scope.row)"
              :disabled="scope.row.number <= 0">
              立即借阅
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="no-data" v-if="rankList.length === 0">
        <el-empty description="暂无排行数据" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const rankList = ref([])

onMounted(async () => {
  await fetchMonthlyRank()
})

const fetchMonthlyRank = async () => {
  try {
    const response = await store.dispatch('fetchMonthlyRank')
    rankList.value = response.data
  } catch (error) {
    console.error('获取本月热租榜失败:', error)
    ElMessage.error('获取本月热租榜失败')
     // 预设数据
     books.value = [
      {  title: '三体', url: 'https://picsum.photos/id/24/200/300', money: 5, number: 12},
      { title: '人类简史', url: 'https://picsum.photos/id/25/200/300', money: 4, number: 10 },
      { title: '百年孤独', url: 'https://picsum.photos/id/26/200/300', money: 6, number: 8},
      { title: '活着', url: 'https://picsum.photos/id/27/200/300', money: 3, number: 15 },
      { title: '追风筝的人', url: 'https://picsum.photos/id/28/200/300', money: 4, number: 9 },
      { title: '解忧杂货店', url: 'https://picsum.photos/id/29/200/300', money: 5, number: 7 },
      { title: '小王子', url: 'https://picsum.photos/id/30/200/300', money: 2, number: 20 },
      { title: '围城', url: 'https://picsum.photos/id/31/200/300', money: 4, number: 18 }
    ]
  }
}

const handleBorrow = async (book) => {
  try {
    if (book.number <= 0) {
      ElMessage.warning('该书籍已无库存')
      return
    }
    
    await store.dispatch('borrowBook', { title: book.title })
    ElMessage.success(`成功借阅《${book.title}》`)
    await fetchMonthlyRank()
  } catch (error) {
    console.error('借阅失败:', error)
    ElMessage.error(error.message || '借阅失败')
  }
}
</script>

<style scoped>
.ranking-container {
  padding: 20px;
}

.ranking-card {
  padding: 20px;
}

.ranking-title {
  text-align: center;
  margin-bottom: 20px;
}

.cover-small {
  width: 80px;
  height: 120px;
  border-radius: 4px;
}

.no-data {
  margin: 40px 0;
  text-align: center;
}
</style>