<template>
  <div class="callback-container">
    <div class="loading-174"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import website from '@/config/website';

export default {
  name: 'iamCallback',
  computed: {
    ...mapGetters(['tagWel']),
  },
  created() {
    this.handleCallback();
  },
  methods: {
    handleCallback() {
      const { code, state } = this.$route.query;
      // console.log(this.$route.query);
      if (!code) {
        this.$router.replace('/login');
        return;
      }
      this.$store
        .dispatch('LoginBySso', {
          tenantId: state || website.tenantId,
          code,
          state: state || website.tenantId,
        })
        .then(() => this.$store.dispatch('FlowRoutes'))
        .then(() => {
          this.$router.replace(this.tagWel);
        })
        .catch(() => {
          this.$router.replace('/login');
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.callback-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.loading-174 {
  width: 10px;
  aspect-ratio: 1;
  background: #0694cd;
  border-radius: 50%;
  animation: loading-174 1s infinite linear alternate;
}

@keyframes loading-174 {
  0% {
    box-shadow: 15px 0 #0694cd, -25px 0 #0694cd;
  }
  50% {
    box-shadow: 15px 0 #0694cd, -15px 0 #0694cd;
  }
  100% {
    box-shadow: 25px 0 #0694cd, -15px 0 #0694cd;
  }
}
</style>
