<script lang="ts" setup>
// import { useRouter } from 'vue-router'
// import { getUUid, uuidLogin } from '@api/login'
// import { useStore } from '@store/index'
// import { IosRefresh } from '@vicons/ionicons5';
import { RotateCcw } from 'lucide-vue-next';
import { onBeforeUnmount, onMounted, ref } from 'vue';
// 定义事件
const emit = defineEmits<{
  (event: 'login-success', data: any): void
}>()

interface UserToken {
  token: string
}
interface ApiResponse<T> {
  code: number
  msg: string
  token: string
}
const qrUrl = ref<string>('')
const qrSize = ref(174)
// const router = useRouter()
// const store = useStore()
let pollingTimer: ReturnType<typeof setInterval> | undefined
const bindTimeout = ref(false)

async function onGetUUid() {
  bindTimeout.value = false
  try {
    // /wx/uuid/get
    const res = await request.get('/wx/uuid/get')
    if (res.code === 200) {
      const appid = 'wx0a72f196ec9c3a70'
      const { uuid } = res
      const redirect_uri = `http://www.mc158c.com/login-success?uuid=${uuid}`
      const codeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
        redirect_uri,
      )}&response_type=code&scope=snsapi_userinfo&state=12345e23436#wechat_redirect`
      qrUrl.value = codeUrl
      let counter = 1
      pollingTimer && clearTimeout(pollingTimer)
      pollingTimer = setInterval(async () => {
        await request.get('/wx/uuid/login', { uuid }).then(async (res) => {
          counter++
          if (counter === 59) {
            clearTimeout(pollingTimer)
            bindTimeout.value = true
          }
          if (res.status === 1) {
            clearTimeout(pollingTimer)
            const userStore = useUserStore()
            userStore.setToken(res.token)
            const res1 = await request.get<ApiResponse<UserToken>>('/getInfo', {
              token: res.token,
            })
            userStore.setUserInfo(res1.user)
            // window.location.href = '/'
             // 刷新页面
            window.location.reload();
          }
        }).catch(() => {
          clearTimeout(pollingTimer)
        })
      }, 1000)
    }
  }
  catch (error) {
    console.log(error)
  }
}

// 处理登录成功
// const handleLoginSuccess = (data: any) => {
//   // 发出登录成功事件
//   emit('login-success', data)
// }

// 组件挂载时生成二维码
onMounted(() => {
  onGetUUid()
})
onBeforeUnmount(() => {
  clearInterval(pollingTimer)
})
</script>

<template>
  <div class="w-[280px] px-5 text-center relative">
    
    <div v-if="qrUrl" class="relative w-full">
      <div v-if="bindTimeout" class="absolute py-3 left-0 w-full h-full top-0 z-[9999] flex items-center justify-center flex-col cursor-pointer text-white bg-black/40" @click="onGetUUid">
        刷新二维码
        <RotateCcw />
      </div>
      <!-- <component
        is="RotateCcw"
        class="h-[18px] w-[18px] color-white"
      /> -->
      <n-qr-code style="padding: 0;" class="p-0 w-full h-full" :value="qrUrl" :size="qrSize" />
    </div>
    <div v-else class="p-5 text-gray-400">
      加载中...
    </div>
  </div>
</template>

<style scoped>

</style>
