<template>
  <view class="wallpaper-category">
    <custom-nav-bar title="分类列表"></custom-nav-bar>

    <!-- 分类展示 -->
    <scroll-view scroll-y class="category-scroll-view">
      <view class="category-grid">
        <view class="category-item"
              v-for="item in categoryList"
              :key="item._id"
              @click="goCategoryDetail(item)">
          <image class="category-image" :src="item.picurl" mode="aspectFill"></image>
          <text class="category-name">{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const categoryList = ref([])

// API配置
const API_CONFIG = {
  baseUrl: 'https://tea.qingnian8.com/api/bizhi',
  accessKey: '123921' // 请替换为您的实际access-key
}

// 请求封装
const request = async (url, params = {}) => {
  try {
    const res = await uni.request({
      url: `${API_CONFIG.baseUrl}/${url}`,
      data: params,
      header: { 'access-key': API_CONFIG.accessKey },
      timeout: 8000
    })
    const response = res[1]?.data || res.data
    return response?.errCode === 0 ? response.data || [] : []
  } catch (e) {
    console.error(`请求${url}失败`, e)
    return []
  }
}

const fetchCategories = async () => {
  const data = await request('classify')
  categoryList.value = data
}

const goCategoryDetail = (item) => {
  uni.navigateTo({
    url: `/pages/category/detail?id=${item._id}&name=${encodeURIComponent(item.name)}`
  })
}

onMounted(() => {
  fetchCategories()
})
</script>

<style scoped lang="scss">
.wallpaper-category {
  background-color: #f8f8f8;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .category-scroll-view {
    flex: 1;
    padding: 20rpx 15rpx;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .category-item {
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      text-align: center;

      .category-image {
        width: 100%;
        height: 200rpx;
      }

      .category-name {
        font-size: 28rpx;
        padding: 20rpx 0;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>