<template>
	<h-dark :title="t('auth.googleTitle')"></h-dark>
	<view class="mx-[30rpx]" v-if="data.info.auth_google==1">
		<view class="flex justify-center mt-[60rpx]">
			<u-image width="180" height="180" mode="widthFix" src="/static/images/user/authgoogle.png"></u-image>
		</view>
		<view class="my-[30rpx] leading-loose">
			{{t('auth.googleTIps')}}
		</view>
		<view class="flex justify-between mt-[100rpx]">
			<view class="">
				<view class="text-[#00D2E0] mt-[10rpx]">
					{{data.info.google_key}}
				</view>
			</view>
			<view class="">
				<text class="">{{t('tabs.Verified')}}</text>
			</view>
		</view>
	</view>

	<view class="mx-[30rpx]" v-if="data.info.auth_google==0">
		<view class="font-bold my-[30rpx]">
			{{t('auth.googleStep1')}}
		</view>
		<view class="text-[#00D2E0]">
			{{t('auth.googleStep1Tips')}}
		</view>
		<view class="font-bold my-[30rpx]">
			{{t('auth.googleStep2')}}
		</view>
		<view class="">
			<view class="">
				<view class="flex justify-center">
					<u-image width="330rpx" height="330rpx" :src="data.info.google_qrcode"></u-image>
				</view>
			</view>
			<view class="text-[#00D2E0] text-center my-[40rpx]">
				{{t('auth.googleStep2Tips')}}
			</view>
			<view class="bg-[#3d4277] rounded-lg px-[30rpx] py-[20rpx] mx-[100rpx]">
				<view class="flex justify-center items-center" @click.stop="copyText(data.info.google_key)">
					<view class="">
						{{data.info.google_key}}
					</view>
					<view class="ml-[10rpx]">
						<u-icon size="30" name="/static/images/common/copy.png"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="font-bold my-[30rpx]">
			{{t('auth.googleStep3')}}
		</view>
		<view class="bg-[#3d4277] rounded-lg px-[20rpx] py-[10rpx]">
			<u-input v-model="formData.code" type="number" :border="false"
				:placeholder="t('auth.googleCodePlaceholder')" />
		</view>
	</view>

	<view v-if="data.info.auth_google==0" class="max-w-[750px] fixed bottom-[50rpx] w-4/5 ml-[10%]">
		<u-button type="primary" :disabled="formData.code == ''" @click="submitHandle"> {{t('auth.bindBtn')}}
		</u-button>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { getUserInfo, verifyGoogle } from '@/api/user'
	import { useCopy } from '@/hooks/useCopy'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('auth.googleTitle') })
	const { copy } = useCopy()
	const data = ref<any>({
		info: {
			auth_google: 2
		}
	})

	const formData = reactive<any>({
		code: ''
	})

	const getData = async () => {
		const res = await getUserInfo()
		data.value = res;
	}

	const copyText = async (text : string) => {
		copy(text);
		uni.$u.toast(t('common.copySuccess'))
	}

	const submitHandle = async () => {
		await verifyGoogle(formData)
		uni.$u.toast(t('network.bindingSuccessful'))
		getData();
	}
	getData()
</script>

<style lang="scss">
</style>