<template>
  <view class="login-fotter">
    <view class="login-fotter-division">
      <view
        class="division-line"
        :style="{
          background: themeStore.lightGreyBg,
        }"
      ></view>
      <text
        class="division-text"
        :style="{
          color: themeStore.text.tipTextColor,
        }"
        >{{ t("login.header.or") }}</text
      >
      <view
        class="division-line"
        :style="{
          background: themeStore.lightGreyBg,
        }"
      ></view>
    </view>
    <view class="login-config-list">
      <theme-image
        v-for="(item, index) in channelList"
				:key="index"
        :src="item.imgUrl"
        class="login-config-item"
        mode="scaleToFill"
				@click.stop="handleClick(item)"
      />
    </view>
  </view>
</template>

<script setup>
	import globalConfig from '@/config/global.config.js'
import { ref, onMounted, onUnmounted } from "vue";
// import { getLoginConfigApi } from "@/api/login";
import { useI18n } from "vue-i18n";
import { useThemeStore } from "@/store/useThemeStore";
import { useUserStore } from "@/store/useUserStore"
import { googleAuthLogin, searchParam, getGoogleUserInfo } from '@/module/third/googlesdk.js'
import Toast from '@/module/toast/toast.js'

const { t } = useI18n();
const themeStore = useThemeStore().theme.loginV2;
const userStore = useUserStore()

let timer = null
let channelList = ref([
  {
    chanel: "GOOGLE",
    status: 1,
    imgUrl: globalConfig.appImagePrefix() + '/login/GOOGLE.png'
  },
  // {
  //   chanel: "TWITTER",
  //   status: 1,
  //   imgUrl: globalConfig.appImagePrefix() + '/login/TWITTER.png'
  // },
  // {
  //   chanel: "LINE",
  //   status: 1,
  //   imgUrl: globalConfig.appImagePrefix() + '/login/LINE.png'
  // },
]);

onMounted(() => {
  getLoginConfig()
	startInterval()
})

onUnmounted(() => {
	clearTimer()
})


const getLoginConfig = async () => {
  // const { code, data } = await getLoginConfigApi();
  // if (code == 200) {
  //   channelList.value = data;
  // }
}

const handleClick = async (item) => {
	if (item.chanel === "GOOGLE") {
		googleAuthLogin()
	}
}

const handleLogin = async ({ accessToken }) => {
	Toast.showLoading('Loading')
	const { code, data } = await getGoogleUserInfo({
		accessToken: accessToken
	})
	Toast.hideLoading()
	if (code !== 200 || !data) { return }
	Toast.showLoading('Loading')
	const isSuccess = await userStore.googleLogin(Object.assign({ accessToken }, data))
	Toast.hideLoading()
	if (!isSuccess) { return }
	
	uni.reLaunch({
	  url: "/pages/home/Home",
	});
}

const startInterval = () => {
	clearTimer()
	timer = setInterval(() => {
		const accessToken = searchParam(window.location.href, 'access_token')
		if (accessToken) {
			handleLogin({
				accessToken: accessToken
			})
			clearTimer()
		}
	}, 500)
}

const clearTimer = () => {
	if (timer) {
		clearInterval(timer)
	}
	timer = null
}
</script>

<style lang="scss" scoped>
.login-fotter {
  width: 100%;
  .login-fotter-division {
    width: 100%;
    box-sizing: border-box;
    padding: 0 70rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .division-text {
      width: 40rpx;
      font-weight: bold;
      font-size: 28rpx;
      // color: #9d9d9e;
    }
    .division-line {
      width: 255rpx;
      height: 3rpx;
      // background: #f0f0f0;
    }
  }
  .login-config-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .login-config-item {
      width: 71rpx;
      height: 71rpx;
    }
  }
}
</style>
