<template>
  <div class="home">
    <div class="home-header">
      <div>
        <h1 class="home-title">预约报名系统</h1>
      </div>
      <div class="home-action">
        <!-- <div class="home-action-item">
          <svg-icon name="icon-user" fill="#BFBFBF" />
          <span :title="userStore.name">{{ userStore.name }}</span>
        </div> -->
        <el-tooltip content="修改密码" placement="bottom-end">
          <div class="home-action-item cursor" @click="toResetPwd">
            <svg-icon name="icon-user" fill="#BFBFBF" />
            <span :title="userStore.name">{{ userStore.name }}</span>
          </div>
        </el-tooltip>
        <el-tooltip content="退出登录" placement="bottom-end">
          <div class="home-action-item cursor" @click="toLogout">
            <svg-icon name="icon-logout" />
          </div>
        </el-tooltip>
      </div>
    </div>

    <div class="home-navs">
      <el-menu
        v-if="appStore.appMenus && appStore.appMenus.length"
        class="el-menu-home"
        :default-active="curRouteName"
        @select="toMenuItem"
      >
        <template v-for="submenu in appStore.appMenus">
          <el-sub-menu
            v-if="submenu.children && submenu.children.length"
            :key="submenu.url"
            :index="submenu.url"
          >
            <template #icon>
              <svg-icon :name="`icon-${submenu.url}`" />
            </template>
            <template #title>
              <span>{{ submenu.name }}</span>
            </template>

            <el-menu-item
              v-for="nav in submenu.children"
              :key="nav.url"
              :index="nav.url"
            >
              <span>{{ nav.name }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item
            v-else
            :key="submenu.url + 'menu'"
            :index="submenu.url + 'menu'"
          >
            <span>{{ submenu.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <div class="home-body">
      <div v-if="appStore.breadcrumbs.length" class="home-breadcrumb">
        <span class="breadcrumb-tips">
          <svg-icon name="icon-home" />
          <span>当前所在位置：</span>
        </span>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(bread, index) in appStore.breadcrumbs"
            :key="index"
          >
            {{ bread }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- home-view: page detail -->
      <div class="home-view">
        <router-view />
      </div>

      <Footer class="home-footer" />
    </div>
  </div>

  <!-- ResetPwd -->
  <ResetPwd ref="fesetPwdRef" @modified="resetPwdModified" />
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useAppStore, useUserStore } from '@/store';
  import { ElMessage, ElMessageBox } from 'element-plus';

  import ResetPwd from '@/views/login/login/ResetPwd.vue';
  import Footer from '@/components/footer/index.vue';

  defineOptions({
    name: 'DefaultLayout',
  });

  const appStore = useAppStore();
  const userStore = useUserStore();
  const route = useRoute();
  const router = useRouter();

  const curRouteName = ref('');
  const fesetPwdRef = ref();

  function initData() {
    curRouteName.value = route.name as string;
    // console.log(route.name);
  }

  function toMenuItem(val: string) {
    router.push({ name: val });
  }

  function toResetPwd() {
    fesetPwdRef.value?.open();
  }

  function resetPwdModified() {
    setTimeout(() => {
      userStore.logout();
    }, 1000);
  }

  async function toLogout() {
    try {
      await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      });
      userStore.logout();
    } catch (error) {
      // User clicked cancel or closed the dialog
      console.log('Logout cancelled');
    }
  }

  onMounted(() => {
    initData();
  });

  watch(
    () => route.name,
    () => {
      initData();
    }
  );
</script>
