<template>
    <div class="Container">
        <div class="icon" @click="openWeiXinModel">
			<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
			<span>{{ $props.text }}</span>
		</div>
		<weiXinModel ref="weiXinModel"></weiXinModel>
    </div>
</template>
<script>
	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
	import weiXinModel from "./weiXinModel.vue";
    export default defineComponent({
        name: "login",
		components: {
		    weiXinModel
		},
		props: {
			text: {
				type: String,
				default: 'Sign in with Wechat'
			}
		},
		setup() {
			let weiXinDom = reactive({
				weiXinModel:null
			})
			const openWeiXinModel = ()=>{
				weiXinDom.weiXinModel.init()
			}
			onMounted(()=>{
				
			})
			return {
				...toRefs(weiXinDom),
				openWeiXinModel,
            }
		},
    })
</script>
<style scoped lang="less">
.Container{
	position: relative;
	.icon{
		// width: 40px;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #dadce0;
		border-radius: 4rem;
		padding: .5rem 3rem;
		cursor: pointer;
		box-sizing: border-box;
		&:hover{
			background: #f8faff;
		}
		img{
			width: 3.8rem;
			height: 3.8rem;
		}
		span{
			font-size: 1.4rem;
			margin-left: 1.4rem;
		}
	}
	&.Container:hover{
	}
}
</style>
