<template>
  <div class="api-example">
    <h3>API使用示例</h3>

    <!-- 轮播图数据 -->
    <div class="section">
      <h4>轮播图数据</h4>
      <button @click="loadCarousel" :loading="loading.carousel">加载轮播图</button>
      <div v-if="carouselData.length" class="data-list">
        <div v-for="item in carouselData" :key="item.id" class="data-item">
          {{ item.title || item.name }}
        </div>
      </div>
    </div>

    <!-- 展览数据 -->
    <div class="section">
      <h4>展览数据</h4>
      <button @click="loadExhibitions" :loading="loading.exhibitions">加载展览</button>
      <div v-if="exhibitionData.length" class="data-list">
        <div v-for="item in exhibitionData" :key="item.id" class="data-item">
          {{ item.title || item.name }}
        </div>
      </div>
    </div>

    <!-- 用户信息（需要token） -->
    <div class="section">
      <h4>用户信息（需要登录）</h4>
      <button @click="loadUserInfo" :loading="loading.userInfo">获取用户信息</button>
      <div v-if="userInfo" class="data-item">
        用户名: {{ userInfo.username || userInfo.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { museumApi, userApi } from '@/api'

// 获取全局API实例
const { proxy } = getCurrentInstance()

// 响应式数据
const carouselData = ref([])
const exhibitionData = ref([])
const userInfo = ref(null)
const loading = ref({
  carousel: false,
  exhibitions: false,
  userInfo: false
})

// 加载轮播图数据
const loadCarousel = async () => {
  try {
    loading.value.carousel = true

    // 方式1: 直接使用导入的API
    const data = await museumApi.getCarouselList({
      pageNum: 1,
      pageSize: 5,
      status: 1
    })

    carouselData.value = data.records || data.list || data || []
    console.log('轮播图数据:', data)
  } catch (error) {
    console.error('加载轮播图失败:', error.message)
  } finally {
    loading.value.carousel = false
  }
}

// 加载展览数据
const loadExhibitions = async () => {
  try {
    loading.value.exhibitions = true

    // 方式2: 使用全局API
    const data = await proxy.$api.museumApi.getExhibitionList({
      pageNum: 1,
      pageSize: 5,
      status: 1
    })

    exhibitionData.value = data.records || data.list || data || []
    console.log('展览数据:', data)
  } catch (error) {
    console.error('加载展览失败:', error.message)
  } finally {
    loading.value.exhibitions = false
  }
}

// 获取用户信息（需要token）
const loadUserInfo = async () => {
  try {
    loading.value.userInfo = true

    const data = await userApi.getUserInfo()
    userInfo.value = data
    console.log('用户信息:', data)
  } catch (error) {
    console.error('获取用户信息失败:', error.message)
    // 如果是未登录，可以提示用户登录
    if (error.message.includes('未授权') || error.message.includes('登录')) {
      alert('请先登录')
    }
  } finally {
    loading.value.userInfo = false
  }
}
</script>

<style lang="scss" scoped>
.api-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  h3 {
    color: #333;
    margin-bottom: 20px;
  }

  .section {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;

    h4 {
      color: #666;
      margin-bottom: 10px;
    }

    button {
      background: #409eff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 10px;

      &:hover {
        background: #66b1ff;
      }

      &:disabled {
        background: #c0c4cc;
        cursor: not-allowed;
      }
    }

    .data-list {
      margin-top: 10px;
    }

    .data-item {
      padding: 8px;
      background: #f5f7fa;
      margin: 5px 0;
      border-radius: 4px;
      font-size: 14px;
    }
  }
}
</style>