<template>
  <div class="layout h-full">
    <div class="layout-header flex items-center justify-between">
      <div class="bread-space">
        <img src="../assets/imgs/bread_prefix_icon.png" />
        <div class="my-bread flex items-center">
          <div v-for="(r, i) in matched" :key="r.path">
            <span :class="{ 'cur-page': r.name === route.name }">{{
              r.meta?.title || ""
            }}</span>
            <span class="gt" v-if="i < matched.length - 1">&gt;</span>
          </div>
        </div>
      </div>
      <div class="user-space">
        <qm-button type="text" :icon="h(UserOutlined)">{{
          userStore.userInfo?.name
        }}</qm-button>
        <qm-button
          type="text"
          :icon="h(MinusOutlined)"
          class="m-l-6px"
          @click="windowToMin"
          >最小化</qm-button
        >
        <qm-button
          v-if="isIndexPage"
          type="text"
          :icon="h(LogoutOutlined)"
          class="m-l-6px"
          @click="toLogout"
          >退出账号</qm-button
        >
        <qm-button
          v-else
          type="text"
          :icon="h(HomeOutlined)"
          class="m-l-6px"
          @click="backToIndexPage"
          >返回首页</qm-button
        >
      </div>
    </div>
    <div class="radius-wrap">
      <div class="sub-page-wrap">
        <router-view />
      </div>
    </div>
    <FooterInfo :height="38" bgColor="#f2f3f5"></FooterInfo>
  </div>
</template>

<script setup name="AppLayout" lang="ts">
import { h, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import FooterInfo from "@/components/FooterInfo/index.vue";
import {
  UserOutlined,
  MinusOutlined,
  LogoutOutlined,
  HomeOutlined,
} from "@ant-design/icons-vue";
import { useUserStore } from "@/store";

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const matched = computed(() => {
  return route.matched || [];
});
const isIndexPage = computed(() => {
  return route.name === "CurExam" || route.name === "Audit";
});
const backToIndexPage = () => {
  if (userStore.userInfo.role === "AUDITOR") {
    router.push({ name: "Audit" });
  } else {
    router.push({ name: "CurExam" });
  }
};

const windowToMin = () => {
  window.electronApi?.windowMin();
};

const toLogout = () => {
  userStore.logout();
};
</script>
<style lang="less" scoped>
.layout {
  background: #f2f3f5;
  .layout-header {
    height: 54px;
    padding: 0 24px;
    .bread-space {
      height: 100%;
      display: flex;
      align-items: center;
      & > img {
        height: 22px;
      }
      .my-bread {
        margin-left: 10px;
        color: @text-color3;
        height: 100%;
        .cur-page {
          color: @text-color1;
        }
        .gt {
          margin: 0 4px;
        }
      }
    }
  }
  .radius-wrap {
    border-radius: 12px;
    overflow: hidden;
    margin: 0 16px;

    height: calc(100% - 92px);
    .sub-page-wrap {
      overflow: auto;
      height: 100%;
      background-color: #fff;
      border: 1px solid #e5e6eb;
    }
  }
}
</style>
