<template>
	<div class="login-third">
		<el-divider>其他登录方式</el-divider>
		<div class="third-btn">
			<el-button link title="企业微信" @click="thirdLogin('wechat_work')"><ma-icon icon="icon-workweixin" size="24" /></el-button>
			<el-button link title="钉钉" @click="thirdLogin('dingtalk')"><ma-icon icon="icon-dingding" size="24" /></el-button>
			<el-button link title="飞书" @click="thirdLogin('feishu')"><ma-icon icon="icon-feishu" size="24" /></el-button>
			<el-button link title="微信" @click="thirdLogin('wechat_open')"><ma-icon icon="icon-weixin" size="24" /></el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import constant from '@/utils/constant'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()

const thirdLogin = (openType: string) => {
	// 请求接口
	const url = constant.thirdLoginUrl + openType
	// 打开新窗口
	window.open(url, '第三方登录', 'width=600, height=400, toolbar=no')

	window.onmessage = function (e) {
		if (!e.data?.openType) {
			return
		}

		// 第三方登录
		userStore.thirdLoginAction(e.data).then(() => {
			router.push({ path: constant.loginPage })
		})
	}
}
</script>

<style lang="scss" scoped>
.login-third {
	margin-top: 36px;
	:deep(.el-divider__text) {
		color: #999 !important;
		font-size: 13px;
	}
	.third-btn {
		display: flex;
		justify-content: space-around;
	}
}
</style>
