<template>
  <a-tabs v-model:activeKey="activeKey" tabPosition="left" :centered="true" @change="changeTabs">
    <a-tab-pane key="1" tab="图层管理">
      <GeoserverManagement ref="GeoserverManagementRef" />
    </a-tab-pane>
    <a-tab-pane key="2" tab="影像管理">
      <GeoTiffManager ref="GeoTiffManagerRef" />
    </a-tab-pane>
    <a-tab-pane key="3" tab="航飞图片">
      <AchievementManager ref="AchievementManagerRef" />
    </a-tab-pane>
    <a-tab-pane key="4" tab="样式管理">
      <LayerStyleManager ref="LayerStyleManagerRef" />
    </a-tab-pane>
  </a-tabs>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  // 组件
  import GeoserverManagement from '@/views/demo/system/geoservermanagement/index.vue';
  import GeoTiffManager from './GeoTiffManager/index.vue';
  import AchievementManager from './AchievementManager/index.vue';
  import LayerStyleManager from './LayerStyleManager/index.vue';

  const activeKey = ref('1');
  // 图层管理
  const GeoserverManagementRef = ref();
  // 影像管理
  const GeoTiffManagerRef = ref();
  // 航飞图片
  const AchievementManagerRef = ref();
  // 图层样式管理
  const LayerStyleManagerRef = ref();

  function changeTabs(activeKey) {
    if (activeKey == 1) {
      // 图层管理
    } else if (activeKey == 2) {
      // 影像管理
    } else if (activeKey == 3) {
      // 航飞图片
    } else if (activeKey == 4) {
      // 图层样式管理
    }
  }
</script>
<style lang="scss" scoped></style>
