<template>
  <a :href="oauthLoginLink" class="a-link">
    <afin-button v-bind="$attrs">
      {{ buttonText }}
    </afin-button>
  </a>
</template>

<script>
import AfinButton from "./AfinButton.vue";
import { parseUrl } from "../utils/index";

export default {
  name: "OauthButton",
  components: {
    AfinButton
  },
  props: {
    clientId: {
      type: Number,
      required: true
    },
    responseType: {
      type: String,
      default: "code"
    },
    buttonText: {
      type: String,
      default: "OneFinT 统一登录"
    },
    oauthLink: {
      type: String,
      required: true
    },
    redirectUri: {
      type: String,
      required: true
    }
  },
  mounted() {},
  computed: {
    oauthLoginLink() {
      return `${this.oauthLink}?redirectUri=${encodeURIComponent(
        parseUrl(this.redirectUri)
      )}&clientId=${this.clientId}&responseType=${this.responseType}`;
    }
  },
  methods: {
    oauthLogin() {
      window.location.href = `${
        this.oauthLink
      }?redirectUri=${encodeURIComponent(
        parseUrl(this.redirectUri)
      )}&clientId=${this.clientId}&responseType=${this.responseType}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.a-link {
  text-decoration: none;
  color: #fff;
}
</style>
