<template>
  <div class="third">
    <div class="box">
      <i class="iconfont icon-QQ"
         @click="handleClick('qq')"
         style="color:#53a4d8"></i>
      <i class="iconfont icon-weixinicon2x"
         @click="handleClick('wx')"
         style="color:#71c252"></i>
      <i class="iconfont icon-weibo"
         @click="handleClick('wb')"
         style="color:#c73420"></i>
      <i class="iconfont icon-zhifubao"
         @click="handleClick('zfb')"
         style="color:#439fe2"></i>
      <i class="iconfont  icon-huaban88"
         @click="handleClick('github')"
         style="color:#666"></i>
    </div>
  </div>
</template>

<script>
import { openWindow } from "@/util/util";

export default {
  name: "thirdLogin",
  methods: {
    handleClick (thirdpart) {
      let appid, client_id, redirect_uri, url;
      redirect_uri = encodeURIComponent(
        window.location.origin + "/#/authredirect"
      );
      if (thirdpart === "wx") {
        appid = "xxxx";
        url =
          "https://open.weixin.qq.com/connect/qrconnect?appid=" +
          appid +
          "&redirect_uri=" +
          redirect_uri +
          "&state=WX&response_type=code&scope=snsapi_login#wechat_redirect";
      } else if (thirdpart === "qq") {
        client_id = "xxxx";
        url =
          "https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ&client_id=" +
          client_id +
          "&redirect_uri=" +
          redirect_uri;
      }
      openWindow(url, thirdpart, 540, 540);
    }
  }
};
</script>

<style lang="scss" scoped>
.third {
  padding: 10px 0;
  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  i {
    font-size: 36px;
    margin: 0 10px;
  }
}
</style>
