<template>
  <a-modal
    v-model:open="visible"
    :title="title"
    width="800px"
    :footer="null"
    :closable="true"
    @cancel="handleClose"
    class="map-modal"
  >
    <div class="map-modal-content">
      <a-tabs v-model:activeKey="currentActiveKey">
        <a-tab-pane 
          v-for="tab in tabsConfig" 
          :key="tab.key" 
          :tab="tab.title"
        >
          <!-- 根据 key 动态渲染子组件 -->
          <div v-if="currentActiveKey === 'basicInfo'" class="tab-pane-container">
            <!-- 假设 BasicInfo 是预定义的组件 -->
            <BasicInfo :data="modalData" />
          </div>
          
          <div v-else-if="currentActiveKey === 'mapView'" class="tab-pane-container">
            <!-- 假设 MapView 是预定义的组件 -->
            <MapView :data="modalData" />
          </div>

          <div v-else-if="currentActiveKey === 'surrounding'" class="tab-pane-container">
             <!-- 其他预定义组件 -->
             <SurroundingInfo :data="modalData" />
          </div>

          <div v-else class="empty-placeholder">
            未找到对应 Key ({{ currentActiveKey }}) 的组件配置
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
// 导入预定义的 Tab 内容组件
// 请根据实际路径调整导入地址
import BasicInfo from './components/BasicInfo.vue'; 
import MapView from './components/MapView.vue';
import SurroundingInfo from './components/SurroundingInfo.vue';

// 定义 Tab 配置项接口
interface TabItem {
  key: string;
  title: string;
}

// 定义 Props
const props = defineProps<{
  visible: boolean;
  title?: string;
  activeKey?: string; // 外部控制的当前激活 tab
  tabsConfig?: TabItem[]; // Tab 配置列表，用于生成 Tab 头
  data?: any; // 可选：传递给内部组件的数据
}>();

// 定义 Emits
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
  (e: 'change', key: string): void; // 当 tab 切换时触发
}>();

// 内部维护的 activeKey
const currentActiveKey = ref<string>(props.activeKey || '');

// 监听外部传入的 activeKey 变化
watch(() => props.activeKey, (newVal) => {
  if (newVal) {
    currentActiveKey.value = newVal;
  }
}, { immediate: true });

// 监听内部 tab 切换，通知父组件
watch(currentActiveKey, (newVal) => {
  emit('change', newVal);
});

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false);
};

// 为了方便模板中使用，将 props.data 暴露给模板
const modalData = ref(props.data);
watch(() => props.data, (newVal) => {
  modalData.value = newVal;
});
</script>

<style lang="scss" scoped>
.map-modal {
  :deep(.ant-modal-body) {
    padding: 24px;
  }
  
  .map-modal-content {
    min-height: 300px; // 增加高度以容纳内容
    
    .tab-pane-container {
      padding: 10px 0;
    }

    .empty-placeholder {
      color: #999;
      text-align: center;
      padding: 40px 0;
    }
  }
}
</style>