<template>
  <ContentWrap  style="overflow-y: auto;" class="ContentWrap">
    <div class="top" style="position: relative;overflow: hidden;">
      <!-- {{ props }} -->
      <van-tabs v-model:active="activeTabName" @tab-click="handleTabClick">
  				<van-tab :title="tab.label" v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.component"/>
      </van-tabs>
    </div>
    <div class="bottom">
      <component :is="CurrentComponent" :id="id" :isDetail="true" :propFormData="initialData" />
    </div>
    <div style="clear: both;"></div>

  	</ContentWrap>
</template>

<script setup lang="ts">
import { ref, watch, defineAsyncComponent, defineEmits, computed } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query)
const tabs = computed(() => {
  const tabsParam = route.query.tabs;
  return tabsParam ? JSON.parse(tabsParam) : [];
});
const activeTabName = ref(route.query.initialComponent);
const initialData = computed(() => {
  const initialDataParam = route.query.initialData;
  return initialDataParam ? JSON.parse(initialDataParam) : [];
});
const id = ref(route.query.id);

defineOptions({ name: 'ZxMobileDialog' })

const CurrentComponent = ref(null);
const modules = import.meta.glob('@/views/**/components/*.vue');
watch(activeTabName, (newVal) => {
  const comp = modules[`/src/${newVal}.vue`]
  if (newVal) {
    comp().then((myModule) => {
      CurrentComponent.value = myModule.default
    })
  }
}, { immediate: true });
// 检测id
watch(() => id.value, (newId) => {
  id.value = newId;
});
function handleTabClick(tab) {
  activeTabName.value = tab.name;
}

onMounted(() => {
  // 当子组件挂载时，改变父组件的样式
  document.getElementsByTagName('section')[1].style.padding = '0px';
  document.getElementsByTagName('section')[1].style.width = '100%';
  document.getElementsByTagName('section')[1].style.background = '#f5f7f9';
  document.getElementsByTagName('section')[1].querySelector('div').style.border = 'none';
});
onUnmounted(() => {
  // 当子组件卸载时，恢复父组件的原始样式
  document.getElementsByTagName('section')[1].style.width = 'auto';
  document.getElementsByTagName('section')[1].style.padding = '20px';
  document.getElementsByTagName('section')[1].style.background = 'var(--el-color-white)';
});
</script>



<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style>