<script setup lang="ts">
import { onMounted } from 'vue';
import { LoginType, userStore } from "@/stores/user.ts";
import wechatConfig from '@/utils/wechat-config.ts';

// 微信回调地址
const wechatCallback = window.location.origin + '/wechatCallBack';
// 二维码状态
// const wxLoginQrCode = ref('');

onMounted(() => {
  // 在组件挂载时执行的逻辑
  console.log(oauthURL());
});

// 构造微信扫码登录的授权URL
const oauthURL = () => {
  const redirectURL = `${wechatCallback}?target=${btoa(window.location.href)}`;
  return `${wechatConfig.oauth}/wechat.html?appid=${wechatConfig.wxPCAppId}&redirect_uri=${redirectURL}&response_type=code&scope=snsapi_login&state=&isMp=false&href=https://oauth.3dreal.cn/style/diy.css`;
};
// 用户 store
const user = userStore();
</script>

<template>
  <div class="bf-login-dialog-box">
    <h1 class="title">微信扫码登录</h1>
    <div class="bf-login-form">
      <div class="bf-wechat-code">
        <iframe :src="oauthURL()" sandbox="allow-top-navigation allow-scripts allow-same-origin"></iframe>
      </div>
<!--      <div class="bf-refresh-btn">-->
<!--        <a @click="getQrCode">-->
<!--          <el-icon><Refresh /></el-icon>-->
<!--          <b style="vertical-align: middle">刷新</b>-->
<!--        </a>-->
<!--      </div>-->
      <div class="bf-login-process">
        <a class="wx-login" @click="user.loginType = LoginType.ACCOUNT_LOGIN"><img src="@/assets/components/common/login/account-icon.png" style="background: rgba(107, 182, 87, 1);">账户登录</a>
        <a class="SMS-login" @click="user.loginType = LoginType.SMS_LOGIN"><img src="@/assets/components/common/login/SMS-icon.png">短信登录</a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bf-wechat-code {
  text-align: center;
  padding-top: 20px;
  margin-bottom: 50px;
}

.bf-refresh-btn {
  margin: 50px 0;
  text-align: center;
  a {
    //color: $primary-color;
    i {
      vertical-align: middle;
    }
  }
}

.impowerBox .qrcode {
  width: 50px;
  box-shadow: 0 0 29px 0 rgba(3, 65, 157, 0.1);
  border: 1px solid rgba(216, 221, 228, .5);
}

iframe {
  height: 330px;
  width: 100%;
  border: 0;
}
</style>
