<template>
	<div class="social-signup-container">
		<div class="sign-btn" @click="wechatHandleClick('wechat')">
			<span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信
		</div>
		<div class="sign-btn" @click="tencentHandleClick('tencent')">
			<span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
		</div>
	</div>
</template>

<script>
  import openWindow from 'utils/openWindow';

  export default {
    name: 'social-signin',
    methods: {
      wechatHandleClick(thirdpart) {
        this.$store.commit('SET_AUTH_TYPE', thirdpart);
        const appid = 'xxxxx';
        const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect');
        const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect';
        openWindow(url, thirdpart, 540, 540);
      },
      tencentHandleClick(thirdpart) {
        this.$store.commit('SET_AUTH_TYPE', thirdpart);
        const client_id = 'xxxxx';
        const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect');
        const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri;
        openWindow(url, thirdpart, 540, 540);
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.social-signup-container {
			margin: 20px 0;
			.sign-btn {
					display: inline-block;
					cursor: pointer;
			}
			.icon {
					color: #fff;
					font-size: 30px;
					margin-top: 6px;
			}
			.wx-svg-container,
			.qq-svg-container {
					display: inline-block;
					width: 40px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					padding-top: 1px;
					border-radius: 4px;
					margin-bottom: 20px;
					margin-right: 5px;
			}
			.wx-svg-container {
					background-color: #8dc349;
			}
			.qq-svg-container {
					background-color: #6BA2D6;
					margin-left: 50px;
			}
	}
</style>
