<template>
  <a-card title="useRunLogic / usePost 请求工具示例" :bordered="false">
    <a-space direction="vertical" style="width: 100%">
      <!-- 示例1: 基础用法 - 组件级 loading -->
      <a-button
        type="primary"
        :loading="basicRequest.loading"
        @click="handleBasicRequest"
      >
        基础请求 (组件级 loading)
      </a-button>

      <!-- 示例2: 全局 Loading -->
      <a-button
        type="danger"
        :loading="globalLoadingRequest.loading"
        @click="handleGlobalLoadingRequest"
      >
        全局 Loading 请求
      </a-button>

      <!-- 示例3: 请求去重 -->
      <a-button
        type="dashed"
        @click="handleDedupeRequest"
      >
        去重请求 (快速点击试试)
      </a-button>

      <!-- 示例4: 组合使用 -->
      <a-button
        :loading="comboRequest.loading"
        @click="handleComboRequest"
      >
        组合使用 (去重 + 全局 Loading)
      </a-button>

      <!-- 示例5: usePost 基础用法 -->
      <a-button
        type="primary"
        ghost
        :loading="postRequest.loading"
        @click="handlePostRequest"
      >
        usePost 示例
      </a-button>

      <!-- 显示请求结果 -->
      <a-card v-if="requestResult" size="small" title="请求结果">
        <pre style="margin: 0; font-size: 12px; max-height: 200px; overflow: auto;">{{ JSON.stringify(requestResult, null, 2) }}</pre>
      </a-card>
    </a-space>
  </a-card>
</template>

<script>
import { useRunLogic, usePost } from '@vue2-client/composables'

export default {
  name: 'UseRequestDemo',

  data () {
    return {
      // 请求结果展示
      requestResult: null,

      // ========== useRunLogic 实例 ==========
      // 示例1: 基础用法
      basicRequest: useRunLogic('test'),

      // 示例2: 全局 Loading
      globalLoadingRequest: useRunLogic('test', {
        globalLoading: '正在加载数据...'
      }),

      // 示例3: 请求去重
      dedupeRequest: useRunLogic('test', {
        dedupe: true
      }),

      // 示例4: 组合使用
      comboRequest: useRunLogic('test', {
        dedupe: true,
        globalLoading: '处理中，请勿重复操作...'
      }),

      // ========== usePost 实例 ==========
      postRequest: usePost('/api/af-safecheck/logic/test', {
        globalLoading: '请求中...'
      })
    }
  },

  methods: {
    // 示例1: 基础请求
    async handleBasicRequest () {
      const { success, data, error } = await this.basicRequest.execute({
        queryParamsName: 'checkPlanListCRUD',
        pageNum: 1,
        pageSize: 5
      })
      if (success) {
        this.requestResult = data
        this.$message.success('基础请求成功')
      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
        this.$message.error('请求失败: ' + error?.message)
      }
    },

    // 示例2: 全局 Loading 请求
    async handleGlobalLoadingRequest () {
      const { success, data, error } = await this.globalLoadingRequest.execute({
        queryParamsName: 'checkPlanListCRUD',
        pageNum: 1,
        pageSize: 5
      })
      if (success) {
        this.requestResult = data
        this.$message.success('全局 Loading 请求成功')
      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
        this.$message.error('请求失败: ' + error?.message)
      }
    },

    // 示例3: 去重请求
    async handleDedupeRequest () {
      // 快速点击多次，只会发送一次请求
      const { success, data, error } = await this.dedupeRequest.execute({
        queryParamsName: 'checkPlanListCRUD',
        pageNum: 1,
        pageSize: 5
      })
      if (success) {
        this.requestResult = data
        this.$message.success('去重请求成功 (查看控制台是否有去重警告)')
      } else if (error?.code === 'ERR_DUPLICATE_REQUEST') {
        // 重复请求被拦截，静默处理或提示
        console.log('重复请求已被拦截')
      } else {
        this.$message.error('请求失败: ' + error?.message)
      }
    },

    // 示例4: 组合请求
    async handleComboRequest () {
      const { success, data, error } = await this.comboRequest.execute({
        queryParamsName: 'checkPlanListCRUD',
        pageNum: 1,
        pageSize: 5
      })
      if (success) {
        this.requestResult = data
        this.$message.success('组合请求成功')
      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
        this.$message.error('请求失败: ' + error?.message)
      }
    },

    // 示例5: usePost 请求
    async handlePostRequest () {
      const { success, data, error } = await this.postRequest.execute({
        queryParamsName: 'checkPlanListCRUD',
        pageNum: 1,
        pageSize: 5
      })
      if (success) {
        this.requestResult = data
        this.$message.success('usePost 请求成功')
      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
        this.$message.error('请求失败: ' + error?.message)
      }
    }
  }
}
</script>
