<template>
	<ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
		<div class="top" style="position: relative;overflow: hidden;">
			<!-- 默认回显第一个商品的主图 -->
			<!-- <SPuUploadImg v-model="formData.items[0].picUrl" :disabled="true" v-if="activeName == 'info'" /> -->
			<van-tabs v-model:active="activeName">
				<van-tab title="基本信息" name="info"/>
				<van-tab title="商品" name="product"/>
				<van-tab title="评价" name="comment"/>
				<van-tab title="客服" name="service"/>
				<van-tab title="售后" name="afterSale"/>
				<van-tab title="物流" name="logistics"/>
				<van-tab title="支付" name="pay"/>
				<van-tab title="日志" name="logs"/>
			</van-tabs>
		</div>

		<div class="bottom">
				<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" v-if="activeName == 'info'" />
				<OrderProduct ref="infoRef" :is-detail="isDetail" :id="orderId" v-if="activeName == 'product'"/>
				<OrderComment ref="infoRef" :is-detail="isDetail" :id="orderId" v-if="activeName == 'comment'"/>
				<OrderService ref="infoRef" :is-detail="isDetail" :id="orderId" v-if="activeName == 'service'" />
				<AfterSale :orderId="orderId" openSource="Order" v-if="activeName == 'afterSale'"/>
				<OrderLogistics ref="infoRef" :is-detail="isDetail" :id="orderId" v-if="activeName == 'logistics'"/>
				<OrderPay ref="infoRef" :is-detail="isDetail" :id="orderId" v-if="activeName == 'pay'"/>
				<OrderLogs ref="infoRef" :is-detail="isDetail" :id="orderId" v-if="activeName == 'logs'" />
		</div>

	</ContentWrap>

</template>

<script lang="ts" setup>

import OrderBaseInfo from './OrderBaseInfo.vue'
import OrderProduct from './OrderProduct.vue'
import OrderComment from './OrderComment.vue'
import OrderService from './OrderService.vue'
import AfterSale from '@/components/ZxTemplate/AfterSale/AfterSale.vue'
import OrderLogistics from './OrderLogistics.vue'
import OrderPay from './OrderPay.vue'
import OrderLogs from './OrderLogs.vue'
import { Tab, Tabs } from 'vant';


import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'ProductSpuForm' })

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const orderId = ref(0)
const props = defineProps({
	id: propTypes.number.def(undefined), // 订单ID
})

orderId.value = props.id
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>