<template>
  <div class="loginBox">
    <iframe src="//edu.cocorobo.cn/course/login?type=2" frameborder="0"></iframe>
    <!-- <button @click="handleLogin">登录</button> -->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'LoginPage',
  data() {
    return {
      redirect: undefined,
      timer: null
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions({
      login: 'user/login'
    }),
    handleLogin() {
      this.$router.push({ path: this.redirect || '/' })
    },
    async getLogin() {
      // 检查用户是否已登录
      const hasToken = this.$store.getters.token;
      if (hasToken) {
        // 如果已登录，直接重定向
        this.$router.push({ path: this.redirect || '/' });
        return;
      }

      const userid = await this.login();
      if (userid) {
        this.$router.push({ path: this.redirect || '/' });
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.getLogin();
    this.timer = setInterval(() => {
      this.getLogin();
    }, 2000);
  }
}
</script>

<style  scoped>
.loginBox {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

}

.loginBox > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
