<!-- 二维码弹窗 -->
<template>
  <div>
    <el-dialog title="微信登录" v-model="visible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" @before-close="close">
      <qrcode-vue :value="qrcode" :size="300" :margin="2" colorDark="#2c3e50" colorLight="#f8f9fa" errorCorrectionLevel="H" />
      <!-- 扫码状态 -->
      <div class="text-center">
        <span>{{ checkLoginStatus }}</span>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { getLoginQrcode, checkScanStatus } from '~/api/personal-center/index'
  import QrcodeVue from 'qrcode.vue'

  const visible = defineModel('visible', {
    default: false,
  })

  const checkLoginStatus = computed(() => {
    const type = {
      EXPIRED: '已过期',
      CONFIRMED: '已确认',
      SCANNED: '已扫码',
      WAITING: '等待扫码',
      SUCCESS: '登录成功',
    }
    if (checkLoginInfo.value) {
      return type[checkLoginInfo.value.status as keyof typeof type]
    }
    return '微信扫码登录'
  })

  const qrcode = ref('')
  const sceneStr = ref('')
  const timer = ref<any>()
  const getQrcode = async () => {
    // 获取二维码
    const res = await getLoginQrcode()
    if (res.code === 0) {
      const jsonurl = res.data.qrCodeUrl
      const qrCodeUrl = jsonurl ? JSON.parse(jsonurl) : ''

      if (qrCodeUrl?.qrCodeUrl) {
        qrcode.value = qrCodeUrl.qrCodeUrl
        sceneStr.value = res.data.sceneStr

        // 轮询检查扫码状态
        getCheckScanStatus()
      }
    }
  }

  const checkLoginInfo = ref<{ status: string; openId: string | null; message: string }>()
  const getCheckScanStatus = async () => {
    // 轮询检查扫码状态
    timer.value = setInterval(async () => {
      const response = await checkScanStatus({ sceneStr: sceneStr.value })
      if (response.code === 0) {
        checkLoginInfo.value = response.data
        if (checkLoginInfo.value.status === 'SCANNED') {
          // 扫码成功
          //   visible.value = false
          clearInterval(timer.value)
        } else if (checkLoginInfo.value.status === 'EXPIRED') {
          // 二维码过期
          clearInterval(timer.value)
          // 重新获取二维码
          getQrcode()
        }
      }
    }, 5000)
  }

  const close = () => {
    visible.value = false
    qrcode.value = ''
  }

  onMounted(() => {
    // 获取二维码
    getQrcode()
  })
  // 关闭定时器
  onUnmounted(() => {
    clearInterval(timer.value)
  })
</script>

<style lang="scss" scoped>
  :deep(.el-dialog__body) {
    text-align: center !important;
  }
</style>
