<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-show="activeName == 'info'" />
				<OrderProduct ref="infoRef"  :id="orderId" v-if="activeName == 'product'"/>
				<OrderComment ref="infoRef"  :id="orderId" v-if="activeName == 'comment'"/>
				<OrderService ref="infoRef"  :id="orderId" v-if="activeName == 'service'" />
				<AfterSale :orderId="orderId" openSource="Order" v-if="activeName == 'afterSale'"/>
				<OrderLogistics ref="infoRef"  :id="orderId" v-if="activeName == 'logistics'"/>
				<OrderPay ref="infoRef"  :id="orderId" v-if="activeName == 'pay'"/>
				<OrderLogs ref="infoRef"  :id="orderId" v-if="activeName == 'logs'" />
				
		</div>
		<div  class="bottom-button">
				<el-button @click="goback">返 回</el-button>
				<el-button :disabled="formLoading" type="primary" @click="remark">备 注</el-button>
		</div>

	</ContentWrap>

</template>

<script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
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 { useRoute } from 'vue-router'
import { propTypes } from '@/utils/propTypes'
const route = useRoute();
const { push } = useRouter() // 路由跳转
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

defineOptions({ name: 'ProductSpuForm' })

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const orderId = ref(0)
orderId.value = route.params.id as unknown as number
const baseInfoRef = ref(null)
const defaultRemark = ref('')
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// 获得备注
const getRemark = async (id) => {
	if (id) {
		const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
		// 没有表单信息则关闭页面返回
		if (!res) {
			message.error('交易订单不存在')
			close()
		}
		defaultRemark.value = res.remark
	}
}
// 备注
const remark = async () => {
  const { value } = await ElMessageBox.prompt('请输入备注', '备注', {
		inputValue:defaultRemark,
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
  })
  try {
		await TradeOrderApi.updateOrderRemark({ id: orderId.value, remark: value })
    message.success(t('common.updateSuccess'))
		baseInfoRef.value.getDetail()
    // 发送操作成功的事件
    emit('success', true)
	} finally {
    formLoading.value = false
  }
}

const goback = () => {
	push({ name: 'Order' })
}
onMounted(async() => {
	await getRemark(orderId.value)
  // 当子组件挂载时，改变父组件的样式
  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>
<style lang="scss" scoped>
.bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: white;
	padding:1rem;
	box-sizing: border-box;
	.el-button{
		width:48%;
	}
}
</style>