<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
import { OpenEmojiRight } from '@vben/icons'

import hud from '#/utils/hud'

defineOptions({ name: 'WxCodePay' })
const props = withDefaults(
  defineProps<{
    getStatus: () => Promise<any>
    modelValue?: boolean
    pay: () => Promise<any>
    title: any
  }>(),
  {
    modelValue: false,
  },
)

const emits = defineEmits(['update:modelValue', 'success'])

const show = computed({
  get() {
    return props.modelValue
  },
  async set(newVal) {
    emits('update:modelValue', newVal)
    if (newVal) {
      // const res = await props.pay()
      // url.value = res.url
      // startTimer()
    } else {
      clearTimer()
    }
  },
})

const url = ref('')
const paySuccess = ref(false)

// 开始查询订单状态的定时器
let timer: any
function startTimer() {
  clearTimer()
  timer = setInterval(async () => {
    if (await props.getStatus()) {
      clearTimer()
      paySuccess.value = true
      hud.success('支付成功')
      emits('success')
    }
  }, 3000)
}

function clearTimer() {
  clearInterval(timer)
}

onUnmounted(() => {
  clearTimer()
})
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title,
      width: 600,
      height: 300,
    }"
  >
    <div v-if="paySuccess" class="pay-success">
      <p>充值成功</p>
      <OpenEmojiRight width="48" />
    </div>
    <img v-else :src="url" alt="" />
  </mj-modal>
</template>

<style lang="scss" scoped></style>
