<template>
  <GiPageLayout
    :margin="true"
    :default-collapsed="false"
    :header-style="isDesktop ? { padding: 0, borderBottomWidth: 0 } : { borderBottomWidth: '1px' } "
  >
    <template v-if="isDesktop" #left>
      <a-tabs v-model:active-key="activeKey" type="rounded" position="left" hide-content size="large" @change="change">
        <a-tab-pane v-for="(item) in menuList" :key="item.key">
          <template #title>
            <div style="display: flex; align-items: center">
              <GiSvgIcon :name="item.icon" :size="18" style="margin-right: 4px" />
              {{ item.name }}
            </div>
          </template>
        </a-tab-pane>
      </a-tabs>
    </template>
    <template #header>
      <a-tabs v-if="!isDesktop" v-model:active-key="activeKey" type="rounded" position="top" size="large" @change="change">
        <a-tab-pane v-for="(item) in menuList" :key="item.key" :title="item.name">
          <template #title>
            <div style="display: flex; align-items: center">
              <GiSvgIcon :name="item.icon" :size="18" style="margin-right: 4px" />
              {{ item.name }}
            </div>
          </template>
        </a-tab-pane>
      </a-tabs>
    </template>
    <transition name="fade-slide" mode="out-in" appear>
      <component :is="menuList.find((item) => item.key === activeKey)?.value"></component>
    </transition>
  </GiPageLayout>
</template>

<script setup lang="tsx">
import { useRoute, useRouter } from 'vue-router'
import SystemRegulation from './repository.vue'
import RegulationProposal from './proposal/index.vue'
import RegulationType from './type/index.vue'
import ProcessManagement from './confirm.vue'
import { useDevice } from '@/hooks'

defineOptions({ name: 'RegulationManagement' })

const { isDesktop } = useDevice()

const data = [
  { name: '制度公告', key: 'system-regulation', icon: 'file-text', value: SystemRegulation, path: '/regulation/system-regulation' },
  { name: '制度提案', key: 'proposal', icon: 'edit', value: RegulationProposal, path: '/regulation/proposal' },
  { name: '制度公示', key: 'process-management', icon: 'workflow', value: ProcessManagement, path: '/regulation/process-management' },
  { name: '制度类型', key: 'type', icon: 'tag', value: RegulationType, path: '/regulation/type' },

]

const menuList = computed(() => {
  return data
})

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

// 根据当前路由确定激活的标签页
const activeKey = computed(() => {
  const currentPath = route.path
  const menuItem = menuList.value.find(item => item.path === currentPath)
  return menuItem ? menuItem.key : menuList.value[0].key
})
watch(
  () => route.path,
  () => {
    // 路由变化时会自动更新activeKey
  },
  { immediate: true },
)
const change = (key: string | number) => {
  const menuItem = menuList.value.find(item => item.key === key)
  if (menuItem) {
    router.push(menuItem.path)
  }
}
</script>

<style scoped lang="scss">
.gi_page {
  padding-top: 0;
}

:deep(.arco-tabs-nav-vertical.arco-tabs-nav-type-line .arco-tabs-tab) {
  margin: 0;
  padding: 8px 16px;

  &:hover {
    background: var(--color-fill-1);

    .arco-tabs-tab-title {
      &::before {
        display: none !important;
      }
    }
  }

  &.arco-tabs-tab-active {
    background: rgba(var(--primary-6), 0.08);
  }
}
</style> 