<template>
  <div>
    <a-modal
      class="map-resource-modal"
      width="1446px"
      v-model:open="props.openModal"
      style="top: 50px"
      :footer="null"
    >
      <template #closeIcon>
        <CloseCircleOutlined @click="serveCancle" :style="{ fontSize: '30px' }" />
      </template>
      <a-tabs v-model:activeKey="activeKey" :tabBarGutter="50" size="large">
        <a-tab-pane key="1" tab="服务资源">
          <ServeResource />
        </a-tab-pane>
        <a-tab-pane key="2" tab="第三方服务">
          <ThirdPartyServe @serveCancle="serveCancle" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="离线文件">
          <OfflineFile />
        </a-tab-pane>
        <template #leftExtra>
          <div :style="{ width: '30px' }" />
        </template>
      </a-tabs>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { CloseCircleOutlined } from '@ant-design/icons-vue';
  import { defineProps, defineEmits, ref } from 'vue';
  import ServeResource from './ServeResource.vue';
  import ThirdPartyServe from './ThirdPartyServe.vue';
  import OfflineFile from './OfflineFile.vue';

  const props = defineProps(['openModal']);
  const emit = defineEmits(['serveModalCancle']);

  const activeKey = ref('1');

  function serveCancle() {
    emit('serveModalCancle', false);
  }
</script>
<style scoped></style>
