<template>
  <div class="login-box">
    <!-- 登陆中 -->
    <div v-if="loginState == 0">
      <van-empty description="登陆中"></van-empty>
    </div>
    <!-- 登陆成功 -->
    <div v-else-if="loginState == 1">
      <van-empty description="登陆成功"></van-empty>
    </div>
    <!-- 登陆失败 -->
    <div v-else-if="loginState == 2">
      <van-empty image="network" description="登录失败"></van-empty>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "login",
});
</script>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import * as API from "@/api";
import { ref } from "vue";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
const store = useStore();
const loginState = ref(0);

API.login(route.query.code).then(async (res) => {
  if (res.code == 200) {
    store.commit("setToken", res.data.token);
    store.commit("setUserData", res.data.wxUserInfo);
    let userDataRes = await API.userInfo();
    store.commit("setUserData", {
      ...store.getters.getUserData,
      expireTime: userDataRes.data.data.expireTime,
    });
    loginState.value = 1;
    router.push("/home/test");
  } else {
    loginState.value = 2;
  }
});
</script>

<style scoped lang="scss">
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
