<script setup lang="ts">
// 在Vue组件中访问环境变量
const baseUrl = import.meta.env.VITE_APP_BASE_URL
const isDebug = import.meta.env.VITE_APP_DEBUG === 'true'

// 获取当前环境模式
const mode = import.meta.env.MODE

// 用于测试的方法
function testApiCall() {
  // 使用环境变量构建API URL
  const apiUrl = `${baseUrl}/api/v1/test`
  console.log('请求地址:', apiUrl)

  // 这里可以添加实际的API调用
  uni.showToast({
    title: `环境: ${mode}, API: ${apiUrl}`,
    icon: 'none'
  })
}
</script>

<template>
  <view class="env-demo">
    <view class="env-info">
      <text class="info-title">环境变量信息</text>
      <view class="info-item">
        <text class="label">基础URL:</text>
        <text class="value">{{ baseUrl }}</text>
      </view>
      <view class="info-item">
        <text class="label">调试模式:</text>
        <text class="value">{{ isDebug ? '已开启' : '已关闭' }}</text>
      </view>
      <view class="info-item">
        <text class="label">当前环境:</text>
        <text class="value">{{ mode }}</text>
      </view>
    </view>

    <button class="test-btn" @click="testApiCall">测试API调用</button>
  </view>
</template>

<style>
.env-demo {
  padding: 20px;
}

.env-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  width: 80px;
}

.value {
  flex: 1;
  word-break: break-all;
}

.test-btn {
  background-color: #007aff;
  color: #ffffff;
}
</style>
