<template>
  <view class="api-demo">
    <nut-cell-group>
      <nut-cell title="API 生成器演示" />
    </nut-cell-group>

    <!-- 用户信息模块 -->
    <nut-cell-group title="用户模块">
      <nut-cell>
        <template #title>
          <view>获取用户信息</view>
        </template>
        <template #link>
          <nut-button
            size="small"
            type="primary"
            @click="fetchUserInfo"
            :loading="userLoading"
          >
            调用
          </nut-button>
        </template>
      </nut-cell>

      <nut-cell v-if="userInfo" title="用户数据">
        <view class="user-info">
          <text>姓名: {{ userInfo?.name || '-' }}</text>
          <text>手机: {{ userInfo?.mobile || '-' }}</text>
        </view>
      </nut-cell>
    </nut-cell-group>

    <!-- 订单模块 -->
    <nut-cell-group title="订单模块">
      <nut-cell>
        <template #title>
          <view>获取订单列表</view>
        </template>
        <template #link>
          <nut-button
            size="small"
            type="primary"
            @click="fetchOrderList"
            :loading="orderLoading"
          >
            调用
          </nut-button>
        </template>
      </nut-cell>

      <nut-cell v-if="orderList.length > 0" title="订单列表">
        <view class="order-list">
          <view
            v-for="order in orderList"
            :key="order.id"
            class="order-item"
          >
            <text>订单号: {{ order.order_no }}</text>
            <text>状态: {{ order.status }}</text>
            <text>金额: ¥{{ order.total_amount }}</text>
          </view>
        </view>
      </nut-cell>

      <nut-cell>
        <template #title>
          <view>获取订单详情</view>
        </template>
        <template #link>
          <nut-button
            size="small"
            type="primary"
            @click="fetchOrderDetail"
            :loading="detailLoading"
          >
            调用
          </nut-button>
        </template>
      </nut-cell>

      <nut-cell v-if="orderDetail" title="订单详情">
        <view class="order-detail">
          <text>订单号: {{ orderDetail.order_no }}</text>
          <text>商品数: {{ orderDetail.items?.length || 0 }}</text>
        </view>
      </nut-cell>
    </nut-cell-group>

    <!-- 使用说明 -->
    <nut-cell-group title="使用说明">
      <nut-cell>
        <view class="instructions">
          <text>1. 点击上方按钮调用 API</text>
          <text>2. API 文件位于 src/api/ 目录</text>
          <text>3. 由 docs/api-specs/ 文档自动生成</text>
          <text>4. 运行 pnpm api:generate 生成新 API</text>
        </view>
      </nut-cell>
    </nut-cell-group>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { getUserInfoAPI } from '@/api/user';
import { getListAPI, getDetailAPI } from '@/api/order';

// 用户模块
const userInfo = ref(null);
const userLoading = ref(false);

// 订单模块
const orderList = ref([]);
const orderLoading = ref(false);
const orderDetail = ref(null);
const detailLoading = ref(false);

/**
 * 获取用户信息
 */
const fetchUserInfo = async () => {
  userLoading.value = true;
  try {
    const result = await getUserInfoAPI();

    if (result.code === 1) {
      userInfo.value = result.data.user;
      Taro.showToast({
        title: '获取成功',
        icon: 'success',
        duration: 2000,
      });
    } else {
      Taro.showToast({
        title: result.msg || '获取失败',
        icon: 'error',
        duration: 2000,
      });
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    Taro.showToast({
      title: '网络异常',
      icon: 'error',
      duration: 2000,
    });
  } finally {
    userLoading.value = false;
  }
};

/**
 * 获取订单列表
 */
const fetchOrderList = async () => {
  orderLoading.value = true;
  try {
    const result = await getListAPI({
      page: 1,
      pageSize: 10,
    });

    if (result.code === 1) {
      orderList.value = result.data.list || [];
      Taro.showToast({
        title: '获取成功',
        icon: 'success',
        duration: 2000,
      });
    } else {
      Taro.showToast({
        title: result.msg || '获取失败',
        icon: 'error',
        duration: 2000,
      });
    }
  } catch (error) {
    console.error('获取订单列表失败:', error);
    Taro.showToast({
      title: '网络异常',
      icon: 'error',
      duration: 2000,
    });
  } finally {
    orderLoading.value = false;
  }
};

/**
 * 获取订单详情
 */
const fetchOrderDetail = async () => {
  detailLoading.value = true;
  try {
    const result = await getDetailAPI({
      id: 123, // 示例订单ID
    });

    if (result.code === 1) {
      orderDetail.value = result.data.order;
      Taro.showToast({
        title: '获取成功',
        icon: 'success',
        duration: 2000,
      });
    } else {
      Taro.showToast({
        title: result.msg || '获取失败',
        icon: 'error',
        duration: 2000,
      });
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
    Taro.showToast({
      title: '网络异常',
      icon: 'error',
      duration: 2000,
    });
  } finally {
    detailLoading.value = false;
  }
};
</script>

<style lang="less" scoped>
.api-demo {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;

  .user-info,
  .order-list,
  .order-detail,
  .instructions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: #666;

    text {
      display: block;
    }
  }

  .order-item {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 10px;
  }
}
</style>