
<script setup>
import { onMounted, ref, getCurrentInstance, computed } from 'vue'
import { get } from '../../../utils/request'
import Bulb from '@/components/icon/bulb.vue'
import Arrow from '@/components/icon/left_arrow.vue'
const { proxy } = getCurrentInstance()
const baseUrl = import.meta.env.VITE_STORE_DOMIN

const serErr = ref(false)
let waitRes = ref(false)

// 回到上一级
const goBack = () => {
  if (!document.referrer) {
    window.location.href = '/product'
    return
  }
  window.history.back()
}
const route = proxy.$route
const tradeParam = route.query.payment_id ? 'payment_id=' + route.query.payment_id : 'out_trade_no=' + route.query.out_trade_no
const reqUrl = baseUrl + '/api/subscriptions/payed_callback?' + tradeParam
get(
  reqUrl
).then(function (res) {
  waitRes.value = true
  if (!(Object.keys(res.data).length === 0) && res.data.data?.subscription?.status === 'actived') {
    serErr.value = false
  } else {
    console.log(res)
    serErr.value = true
  }
})
</script>

<template>
  <div class="min-h-100vh bg-[#E7EAEE] py-48px px-120px flex justify-center items-center">
    <template v-if="waitRes">
      <div v-if="serErr">
        <img src="@/assets/images/fail.svg" alt="fail" class="w-64px m-auto">
        <div class="text-28px leading-40px mt-32px font-700 text-center">Payment Failure!</div>
        <div class="flex mt-26px font-700 text-16px leading-20px text-[#232A40] items-center">
          <Bulb class="mr-4px" />
          Solutions as below:
        </div>
        <ul class="mt-16px max-w-800px">
          <li class="text-[#505258] text-16px leading-20px"><span
              class="inline-block flex-shrink-0 mx-8px w-4px h-4px rounded-[50%] bg-[#505258] align-middle"></span>Change
            the network and have a try again.</li>
          <li class="text-[#505258] text-16px leading-20px mt-20px"><span
              class="inline-block flex-shrink-0 mx-8px w-4px h-4px rounded-[50%] bg-[#505258] align-middle"></span>Please
            try Google Chrome, Safari or other different browser, or you can clear browsing data and try again.</li>
          <li class="text-[#505258] text-16px leading-20px mt-20px"><span
              class="inline-block flex-shrink-0 mx-8px w-4px h-4px rounded-[50%] bg-[#505258] align-middle"></span>Try
            other
            payment methods. If you want to use other payment methods, please <a class="text-[#1460F3] hover:underline"
              href="mailto:support@pdfreaderpro.com">contact us</a> directly.</li>
          <li class="text-[#505258] text-16px leading-20px mt-20px flex"><span
              class="inline-block flex-shrink-0 mx-8px w-4px h-4px rounded-[50%] bg-[#505258] align-middle mt-8px"></span>
            <div>If you
              still have purchase problems, you can send your error message or screenshots to us via <a
                class="text-[#1460F3] hover:underline" href="mailto:support@pdfreaderpro.com">support@pdfreaderpro.com</a>
            </div>
          </li>
        </ul>
        <a href="mailto:support@pdfreaderpro.com"
          class="bg-[#1460F3] mt-32px font-700 flex rounded-8px m-auto justify-center w-220px leading-40px text-16px text-[#fff] hover:opacity-80">Get
          Help</a>
        <span class="mt-16px flex items-center text-[#1460F3] cursor-pointer pb-16px flex justify-center" @click="goBack">
          <Arrow class="mr-6px" />
          Back
        </span>
      </div>
      <div v-else>
        <img src="@/assets/images/success.svg" alt="success" class="w-64px m-auto">
        <div class="text-28px leading-40px mt-32px font-700">Payment Success!</div>
        <a href="/dashboard"
          class="bg-[#1460F3] mt-32px font-700 flex rounded-8px m-auto justify-center w-220px leading-40px text-16px text-[#fff] hover:opacity-80">Back
          Home</a>
      </div>
    </template>
  </div>
</template>
