<template>
    <div class="Container">
        <!-- 谷歌登录 -->
        <div class="g_id_signin" id="g_id_signin"></div>
    </div>
</template>
<script>
	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";

    export default defineComponent({
        name: "login",
		setup() {
			const  handleCredentialResponse = async (response) => {
                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
				console.log(response);
                let code = response.credential
				console.log(code);
                // await api.googleLogin(code);
            }
			onMounted(()=>{
				let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
				// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
				
				// 使用谷歌登录的api
				const script = document.createElement("script");
				script.src = "https://accounts.google.com/gsi/client"
				document.body.appendChild(script);

				window.addEventListener('load', () => {
					window.google.accounts.id.initialize({
					// 主要就是填写client_id
						client_id: GOOGLE_CLIENT_ID,
						auto_select: false,
						callback: handleCredentialResponse,
						context:"signin",
						ux_mode:"popup",
						itp_support:true,
					});
					window.google.accounts.id.renderButton(
						document.getElementById("g_id_signin"),
						{
							type:"standard",
							shape:"pill",
							theme:"outline",
							text:"signin_with",
							size:"medium",
							logo_alignment:"left",
						}
					);
				})
			})
			return {
            }
		},
    })
</script>
<style scoped>
.Container{
	width: 45%;
}
</style>
