<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { invokeAllRefreshCallback } from '@/composables/useRefresh'
import breadcrumbStore from '@/store/modules/breadcrumb'
import { isUndefined } from 'lodash'

const route = useRoute()

const refreshing = ref(false)

const handleRefresh = () => {
  if (refreshing.value)
    return

  invokeAllRefreshCallback()
  refreshing.value = true
  setTimeout(() => {
    refreshing.value = false
  }, 1000);
}

const breadcrumbs = computed(() => breadcrumbStore.breadcrumbs)
</script>

<template>
  <article class="main-frame-page">
    <header class="header">
      <img src="@/assets/logo.png" class="logo" alt="logo" />
      <span class="refresh" title="刷新" @click="handleRefresh">
        <iconfont class="icon dsk-undo" :class="{ refreshing }" />
      </span>
      <el-breadcrumb separator="/">
        <template v-for="item in breadcrumbs">
          <el-breadcrumb-item v-if="isUndefined(item.path)">{{ item.label }}</el-breadcrumb-item>
          <el-breadcrumb-item v-else :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
      <span class="data-big-screen">
        <iconfont class="icon dsk-workbench" />
      </span>
      <span class="message">
        <iconfont class="icon dsk-remind" />
      </span>
      <span class="help">
        <iconfont class="icon dsk-help" />
      </span>
      <span class="avatar">
        <el-avatar :size="30">张三</el-avatar>
      </span>
      <span class="fullscreen">
        <iconfont class="icon dsk-full-screen-one" />
      </span>
    </header>
    <aside class="aside">
      <ul class="menu">
        <router-link custom to="/" v-slot="{ navigate, isExactActive }">
          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
            <iconfont class="icon dsk-dashboard-one" />
          </li>
        </router-link>

        <router-link custom to="/project-list" v-slot="{ navigate }">
          <li
            class="item"
            @click="navigate"
            :class="{ 'active': route.fullPath.startsWith('/project') }"
          >
            <iconfont class="icon dsk-city-one" />
          </li>
        </router-link>
        <router-link custom to="/data-library" v-slot="{ navigate, isExactActive }">
          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
            <iconfont class="icon dsk-data" />
          </li>
        </router-link>
        <router-link custom to="/login" v-slot="{ navigate, isExactActive }">
          <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
            <iconfont class="icon dsk-me" />
          </li>
        </router-link>
        <li class="item disabled">
          <iconfont class="icon dsk-more-app" />
        </li>
        <li class="item disabled">
          <iconfont class="icon dsk-tool" />
        </li>
        <li class="item disabled">
          <iconfont class="icon dsk-doc-detail" />
        </li>
        <li class="item disabled">
          <iconfont class="icon dsk-application-one" />
        </li>
      </ul>
    </aside>
    <main class="main">
      <router-view></router-view>
    </main>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
