<!--
 * @Author: sjl
 * @Date: 2023-05-06 16:08:35
 * @Descripttion:之前版本顶部子系统设计方式
-->
<template>
  <div class="SubSystem">
    <ul>
      <li
        @click="switchRouting({ path: 'backMenuList' })"
        :class="{ active: selected === '/dashboard/workbench' }"
        >首页</li
      >
      <li
        v-for="(i, index) in oldMenu"
        :key="index"
        v-show="i.subsystem"
        :class="{ active: selected === i.path }"
        @click="switchRouting(i)"
        >{{ t(i.name) }}</li
      >
    </ul>
  </div>
</template>

<script lang="ts">
  import { defineComponent, toRef, computed, unref, ref } from 'vue';
  import { useSplitMenu } from '../../menu/useLayoutMenu';
  import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useAppStore } from '/@/store/modules/app';
  import { session } from '/@/utils/Memory.js';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'SubSystem',
    props: {
      splitType: {
        type: Number as PropType<MenuSplitTyeEnum>,
        default: MenuSplitTyeEnum.NONE,
      },
    },
    setup(props) {
      const oldMenu = session.getItem('backMenuList');
      const permissionStore = usePermissionStore();
      const appStore = useAppStore();
      const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
      const { t } = useI18n();
      const selected = ref<string>('/dashboard/workbench');
      const router = useRouter();

      const switchRouting = (e) => {
        selected.value = e.path == 'backMenuList' ? '/dashboard/workbench' : e.path;
        const menu =
          e.path == 'backMenuList' ? session.getItem(e.path) : session.getItem(e.path).children;
        session.setItem('currentSystem', e.path);
        appStore.setCurrentSystem(e.path == 'backMenuList' ? '/dashboard/workbench' : e.path);
        permissionStore.setBackMenuList(menu);
        if (e.path == 'backMenuList') router.push({ path: '/dashboard/workbench' });
      };
      console.log('menusRef', menusRef);

      return {
        selected,
        switchRouting,
        oldMenu,
        t,
      };
    },
    data() {
      return {
        list: [
          { name: '系统管理', index: 1 },
          { name: '视频管理', index: 2 },
        ],
      };
    },
  });
</script>
<style lang="css" scoped>
  .SubSystem li.active {
    background: #04561c;
    color: #ffffff;
  }
  .SubSystem {
    width: 100%;
    padding-left: 200px;
  }
  .SubSystem li {
    float: left;
    background: linear-gradient(to bottom right, #d0f0fd, #ffffff);
    color: #2083e8;
    border-radius: 15px;
    height: 30px;
    line-height: 30px;
    padding: 0px 20px;
    margin: 0px 10px;
    cursor: pointer;
  }
</style>
