<template>
  <div style="text-align:center; margin-top: 100px;">
    <el-result
      :icon="isVerifySuccess ? 'success' : 'error'"
      :title="isVerifySuccess ? '验签成功，支付结果可信' : '验签失败，支付结果不可信'"
      :sub-title="tradeStatus === 'TRADE_SUCCESS' ? '支付成功' : '支付失败或取消'"
    >
      <template #extra>
        <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const isVerifySuccess = ref(false)
const tradeStatus = route.query.trade_status || ''

// 将支付宝同步回调参数全部传给后端验签
const params = {}
for (const key in route.query) {
  params[key] = route.query[key]
}

onMounted(async () => {
  try {
    const res = await axios.post('/api/user/alipay/verifyReturn', params)
    isVerifySuccess.value = res.data === true
  } catch {
    isVerifySuccess.value = false
  }
})
</script>
