<template>
    <div class="login-window">
      <button @click="getWechatQRCode">微信扫码登录</button>
      <div v-if="qrCodeUrl">
        <img :src="qrCodeUrl" alt="微信登录二维码"/>
      </div>
      <div id="login_container">
        </div>
    </div>
</template>

<script>
// import axios from 'axios';
// import QRCode from 'qrcode'


export default {
  data() {
    return {
      qrCodeUrl: null
    };
  },
  methods: {
    async getWechatQRCode() {
    //   try {
    //     // 请求后端接口获取二维码 URL
    //     const response = await axios.get('http://localhost:7003/api/weixin/wechat-login-qrcode');
    //     this.qrCodeUrl = await QRCode.toDataURL(response.data.url); // 这里假设后端返回的数据中有 url 字段
    //     this.qrCodeUrl = await QRCode.toDataURL('https://cocorobo.cn/get-weixin-code.html?appid=wxe9d7fff3c659445f&redirect_uri=//cloud.cocorobo.cn/liyuan.html&response_type=code&scope=snsapi_login&state=116405')
    //   } catch (error) {
    //     console.error('获取二维码失败:', error);
    //   }
      const randomState = Math.random().toString(36).substring(2); // 生成随机状态
        // eslint-disable-next-line no-undef
        new WxLogin({
            self_redirect:true,
            id: "login_container", 
            appid: "wxe9d7fff3c659445f", 
            scope: "snsapi_login", 
            redirect_uri: encodeURIComponent("https://cocorobo.cn"),//https://liyuan.cocorobo.cn/#/wxTest
            state: randomState,
            style: "black",
            onReady: function(isReady){
                    console.log(isReady);
                }
            });
    },


  },
  mounted(){
    
  }
};
</script>

<style scoped>
.login-window {
  text-align: center;
  padding: 20px;
}

.login-window img {
  margin-top: 20px;
  max-width: 200px;
  border: 1px solid #ddd;
}
</style>