<template>
  <div class="upgrade-plan">
    <div class="upgrade-plan__container">
      <Spin
        v-if="loading"
        fix
      />
      <iframe
        ref="paymentFrame"
        :src="embedUrl"
        class="upgrade-plan__iframe"
        frameborder="0"
        allow="payment"
        @load="onIframeLoad"
      />
    </div>
  </div>
</template>

<script>
import queryString from 'query-string';

export default {
  name: 'UpgradePlan',
  data() {
    return {
      loading: true,
    };
  },
  computed: {
    service() {
      if (this.$route.query.plan === 'Plus') {
        return 'extension-plus-12';
      }

      return 'extension-vip-12';
    },
    embedUrl() {
      return queryString.stringifyUrl({
        url: 'https://payment.autoshopee.com/',
        query: {
          username: this.getUsername,
          service: this.service,
        },
      }).replace('?', '#/embed/?');
    },
  },
  methods: {
    onIframeLoad() {
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
  .upgrade-plan {
    width: 100%;
  }

  .upgrade-plan__container {
    position: relative;
    height: calc(100vh - 200px);
    min-height: 600px;
  }

  .upgrade-plan__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
  }
</style>
