<script setup lang="ts">
import { queryProse } from '@af-mobile-client-vue3/api/mock'
import { getUserPermissions } from '@af-mobile-client-vue3/services/api/search'
import { post } from '@af-mobile-client-vue3/services/restTools'
import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
import { showToast, Button as VanButton, Cell as VanCell, CellGroup as VanCellGroup } from 'vant'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 路由
const router = useRouter()
// 用户store
const userStore = useUserStore()

// 数据定义
const requestTypes = ref('GET, POST, DELETE')
const getResult = ref('')
const postResult = ref('')
const permissionsResult = ref('')
const storePermissionsResult = ref('')
const postData = reactive({
  name: '',
  value: '',
})

// 返回上一页
function onClickLeft() {
  router.back()
}

// 发送GET请求示例
async function handleGetRequest() {
  try {
    // 这里使用项目中的模拟API
    const result = await queryProse()
    getResult.value = JSON.stringify(result, null, 2)
    showToast('请求成功')
  }
  catch (error) {
    console.error('GET请求失败:', error)
    showToast('请求失败')
  }
}

// 获取用户权限
async function handleGetPermissions() {
  try {
    const userInfo = userStore.getUserInfo()
    if (!userInfo || !userInfo.id) {
      showToast('请先登录')
      return
    }

    // 从API获取权限
    const permissions = await getUserPermissions(userInfo.id.toString())
    permissionsResult.value = JSON.stringify(permissions, null, 2)

    // 从Store获取权限
    const storePermissions = userStore.getPermissions()
    storePermissionsResult.value = JSON.stringify(storePermissions, null, 2)

    showToast('获取权限成功')
  }
  catch (error) {
    console.error('获取权限失败:', error)
    showToast('获取权限失败')
  }
}

// 定义请求数据类型
interface RequestData {
  name: string
  value: string
}

// 定义返回结果类型
interface ResponseData {
  code: number
  msg: string
  data: any
}

// 发送POST请求示例
async function handlePostRequest() {
  try {
    // 这里演示使用通用post方法发送请求
    // 使用泛型指定返回类型
    const result = await post<ResponseData>('/api/demo/post', {
      name: '测试',
      value: '测试',
    })
    postResult.value = JSON.stringify(result, null, 2)
    showToast('请求成功')
  }
  catch (error) {
    console.error('POST请求失败:', error)
    showToast('请求失败')
  }
}

// 类型定义展示
const typeDefinitions = `

// 使用泛型扩展特定业务数据类型
import { get } from '@af-mobile-client-vue3/services/restTools'

interface UserInfo {
  id: string
  name: string
  roles: string[]
}

// 调用示例
const userInfo = await get<UserInfo>('/api/user/info')
// userInfo 类型为 UserInfo，而非 BasicResponseModel<UserInfo>
// 不用使用 userInfo.data 获取数据
// 直接使用 userInfo 即可
`.trim()
</script>

<template>
  <div class="request-view">
    <div class="container">
      <VanCellGroup title="API请求演示">
        <VanCell title="基本请求类型" :value="requestTypes" />

        <!-- GET请求部分 -->
        <div class="request-section">
          <h3>GET请求示例</h3>
          <VanButton type="primary" size="small" @click="handleGetRequest">
            发送GET请求
          </VanButton>
          <div v-if="getResult" class="result-box">
            <h4>响应结果：</h4>
            <pre>{{ getResult }}</pre>
          </div>
        </div>

        <!-- POST请求部分 -->
        <div class="request-section">
          <h3>POST请求示例</h3>

          <VanButton type="primary" size="small" @click="handlePostRequest">
            发送POST请求
          </VanButton>
          <div v-if="postResult" class="result-box">
            <h4>响应结果：</h4>
            <pre>{{ postResult }}</pre>
          </div>
        </div>

        <!-- 用户权限部分 -->
        <div class="request-section">
          <h3>用户权限获取</h3>
          <VanButton type="primary" size="small" @click="handleGetPermissions">
            获取用户权限
          </VanButton>

          <div v-if="permissionsResult" class="result-box">
            <h4>API请求权限结果：</h4>
            <pre>{{ permissionsResult }}</pre>
          </div>

          <div v-if="storePermissionsResult" class="result-box">
            <h4>Store缓存权限结果：</h4>
            <pre>{{ storePermissionsResult }}</pre>
          </div>
        </div>

        <!-- 类型定义说明 -->
        <div class="code-section">
          <h3>类型定义</h3>
          <pre>{{ typeDefinitions }}</pre>
        </div>
      </VanCellGroup>
    </div>
  </div>
</template>

<style scoped>
.request-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.request-section {
  margin: 16px 0;
  padding: 16px;
  background-color: #f7f8fa;
  border-radius: 8px;
}

.result-box {
  margin-top: 16px;
  padding: 12px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebedf0;
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
  background-color: #f5f7fa;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
}

.code-section {
  margin: 16px 0;
}

h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #323233;
}

h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #323233;
}
</style>
