<template>
  <div class="menu_login_out">
    <div v-if="canLogout" class="change_account" @click="loginOut">
      切换账号
    </div>
    <div v-else class="change_account gray" @click="loginOut">切换中</div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "MenuLoginOut",
  components: {},
  inject: ["checkCode", "routeLink"],
  data() {
    return {
      canLogout: true, // 是否可以退出登录
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapActions(["userInfoAction"]),

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 切换账号
    loginOut() {
      if (!this.canLogout) {
        return;
      }
      this.canLogout = false;
      this.$api.logout().then((res) => {
        this.checkCode(res);
        this.canLogout = true;
        const { data, code, msg } = res.data;
        // 错误
        if (code) {
          return;
        }
        // 成功
        this.showInnerControl("");
        // localStorage.removeItem("userInfo");
        this.$utils.deleteStorage("", "userInfo");
        this.userInfoAction({});
        this.routeLink("Login");
      });
    },
  },
};
</script>

<style lang='less' scoped>
.menu_login_out {
  .change_account {
    width: 60%;
    margin: 40 / @rem auto 0;
    height: 70 / @rem;
    line-height: 70 / @rem;
    border-radius: 10 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 32 / @rem;
  }
}
// 横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .menu_login_out {
    .change_account {
      height: 35 / @rem;
      line-height: 35 / @rem;
      margin: 10 / @rem auto 0;
      border-radius: 5 / @rem;
      font-size: 16 / @rem;
    }
  }
}
</style>