<template>
  <ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
    <div class="top" style="position: relative;overflow: hidden;">
      <van-tabs v-model:active="activeName">
        <van-tab title="订单信息" name="info" />
        <van-tab title="商品信息" name="spu" />
        <van-tab title="售后信息" name="afterinfo" />
        <van-tab title="退款状态" name="return" />
        <van-tab title="售后日志" name="afterlog" />
      </van-tabs>
    </div>
    <div class="bottom">
      <AfterSaleBaseInfo :obj="Obj"  :openType="openType" v-if="activeName == 'info'" />
      <AfterSaleSpuInfo :obj="Obj"  :openType="openType" v-if="activeName == 'spu'" />
      <AfterSaleInfo :obj="Obj"  :openType="openType" v-if="activeName == 'afterinfo'" />
      <AfterSaleRetrun :obj="Obj"  :openType="openType" v-if="activeName == 'return'" />
      <AfterSaleLog :obj="Obj"  :openType="openType" v-if="activeName == 'afterlog'" />
    </div>

  </ContentWrap>
</template>

<script lang="ts" setup>
import AfterSaleBaseInfo from './components/AfterSaleBaseInfo.vue'
import AfterSaleLog from './components/AfterSaleLog.vue'
import AfterSaleRetrun from './components/AfterSaleRetrun.vue'
import AfterSaleInfo from './components/AfterSaleInfo.vue'
import AfterSaleSpuInfo from './components/AfterSaleSpuInfo.vue'
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query)
const openType = route.query.type;
const Obj = JSON.parse(route.query.obj);
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'ProductSpuForm' })

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口

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>