<template>
  <div class="w-toolbar">
    <w-theme />
    <div onclick="location.reload()" title="刷新">
      <w-icon icon-class="reload" />
    </div>
    <div @click="proxy.$router.back()" title="后退">
      <w-icon icon-class="back" />
    </div>
    <w-fullscreen />
    <template v-if="authStore.isLogin">
      <div onclick="window.open('/admin/')" title="管理后端">
        <w-icon icon-class="sys" />
      </div>
      <div @click="logout()" title="退出">
        <w-icon icon-class="exit" />
      </div>
    </template>
    <template v-else-if="proxy.$route.path != '/login'">
      <div @click="proxy.$router.push({ path: '/login' })" title="登录">
        <w-icon icon-class="logininfor" />
      </div>
    </template>
  </div>
</template>
<script setup>
import { getCurrentInstance } from "vue";
import { useAuthStore } from "@/store";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const authStore = useAuthStore();

const logout = async () => {
  await authStore.logout();
  ElMessage.success("成功退出");
  proxy.$router.push({
    path: "/login",
    query: { to: encodeURIComponent(proxy.$route.fullPath) },
  });
};
</script>
<style lang="scss" scoped>
.w-toolbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5em;
  width: auto;

  & > div {
    cursor: pointer;
    opacity: 0.9;
    transition: all 0.3s;
    margin-left: 0.7em;
    &:hover {
      opacity: 1;
      transform: translate(0.05em, 0.05em);
    }
  }

  svg {
    width: 1em;
    height: 1em;
  }
}
</style>