<template>
  <div class="guns-layout">
    <div class="guns-layout">
      <guns-split-layout>
        <div class="guns-layout-sidebar width-100 p-t-12">
          <div class="sidebar-content">
            <a-menu
              v-model:selectedKeys="selectedKeys"
              class="sidebar-menu"
              mode="inline"
              :open-keys="openKeys"
              @select="selectChange"
              @openChange="openChange"
            >
              <a-sub-menu key="1">
                <template #title>业务汇总</template>
                <div>
                  <a-menu-item key="0">
                    <span class="flex">
                      <icon-font icon-class="icon-menu-shujubiao" fontSize="20px" color="#43505E" :style="{ paddingRight: '8px' }" />
                      数据表
                    </span>
                  </a-menu-item>
                </div>
                <div>
                  <a-menu-item key="1">
                    <span class="flex">
                      <icon-font icon-class="icon-menu-zidian" fontSize="20px" color="#43505E" :style="{ paddingRight: '8px' }" />
                      字典管理
                    </span>
                  </a-menu-item>
                </div>
                <div>
                  <a-menu-item key="2">
                    <span class="flex">
                      <icon-font icon-class="icon-menu-shitu" fontSize="20px" color="#43505E" :style="{ paddingRight: '8px' }" />
                      业务图库
                    </span>
                  </a-menu-item>
                </div>
              </a-sub-menu>
            </a-menu>
          </div>
        </div>
        <template #content>
          <div class="guns-layout-content" :style="{ padding: currentMenuSelect === '1' ? '0px' : '12px' }">
            <!-- 数据表 -->
            <DataSheet v-if="currentMenuSelect === '0'" />

            <!-- 字典管理 -->
            <BusinessDict v-if="currentMenuSelect === '1'" style="flex-direction: row" showAll />

            <!-- 业务图库 -->
            <BuinessList v-if="currentMenuSelect === '2'" showAll />
          </div>
        </template>
      </guns-split-layout>
    </div>
  </div>
</template>

<script setup name="BusinessSummary">
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { ref, defineAsyncComponent, onMounted, computed } from 'vue';

const userStore = useUserStore();

const DataSheet = defineAsyncComponent(() => import('./components/data-sheet.vue'));
const BusinessDict = defineAsyncComponent(() => import('../dict/index.vue'));
const BuinessList = defineAsyncComponent(() => import('../business-graph/index.vue'));

const route = useRoute();
const router = useRouter();

// 左侧菜单展开列表
const openKeys = ref(['1']);
// 左侧菜单选中列表
const selectedKeys = ref(['0']);

// 当前菜单选中
const currentMenuSelect = ref('0');

// 权限列表
const authorities = computed(() => {
  return userStore.authorities ?? [];
});

// 左侧菜单选中
const selectChange = ({ key }) => {
  currentMenuSelect.value = key;
};

// 设置展开
const openChange = () => {
  openKeys.value = ['1'];
};

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

const init = () => {
  const { type } = route.query;
  if (type) {
    selectedKeys.value = [type];
    currentMenuSelect.value = type;
    router.push({
      path: router.currentRoute.value.path, // 保留当前路径
      query: {} // 清空查询参数
    });
  } else {
    selectedKeys.value = ['0'];
  }
};
</script>

<style scoped lang="less">
:deep(.ant-menu-sub.ant-menu-inline) {
  background-color: #fff !important;
}

:deep(.ant-menu-title-content) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
