<template>
	<ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
		<div class="top" :style="{height:(winHeight - 230)+'px'}" style="overflow-y: auto;">
			<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" />
			<OrderProduct ref="infoRef" :id="orderId" />
		</div>
		<div class="bottom">
			<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="140px" style="" :rules="formRules">
				<el-form-item label="物流公司" prop="logisticsId" style="border: none;">
					<el-select v-model="formData.logisticsId" style="width: 90%;" placeholder="请选择" filterable :filter-method="customFilter">
						<el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id"  />
					</el-select>
				</el-form-item>
				<el-form-item label="物流单号" prop="logisticsNo" style="border: none;">
					<el-input v-model="formData.logisticsNo" style="width: 90%;" placeholder="请录入快递单号" />
				</el-form-item>
				<!-- <el-form-item>
						<el-button type="primary" plain>扫一扫</el-button>
					</el-form-item> -->
			</el-form>
			<div>
				<el-button @click="goback">返 回</el-button>
				<el-button :disabled="formLoading" type="primary" @click="submitForm">发 货</el-button>
			</div>
		</div>
	</ContentWrap>

</template>

<script lang="ts" setup>
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import * as TradeOrderApi from '@/api/mall/trade/order'
import OrderBaseInfo from '../components/OrderBaseInfo.vue'
import OrderProduct from '../components/OrderProduct.vue'
import { useRoute } from 'vue-router';

import { FormRules } from 'element-plus'
const route = useRoute();
const { push } = useRouter() // 路由跳转

const message = useMessage() // 消息弹窗
const formRules = reactive<FormRules>({
	logisticsId: [{ required: true,message: '请选择物流公司' }],
	logisticsNo: [{ required: true,message: '请输入快递单号' }],
})

const formData = ref<TradeOrderApi.DeliveryVO>({
	id: 0, // 订单编号
	logisticsId: null, // 物流公司编号
	logisticsNo: '' // 物流编号
})

const searchText = ref('');  // 用户输入的搜索文本

// 过滤列表基于搜索文本
const filteredList = computed(() => {
	if (!searchText.value) return deliveryExpressList.value;
	return deliveryExpressList.value.filter(item =>
		item.name.toLowerCase().includes(searchText.value.toLowerCase())
	);
});
const customFilter = (input) => {
	searchText.value = input;  // 更新当前的搜索文本
};
const winHeight = window.innerHeight || document.documentElement.clientHeight;
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const orderId = ref(0)
const deliveryExpressList = ref([])

orderId.value = route.params.id as unknown as number
const goback = () => {
	push({ name: 'Order', query: {openType:"tobedone", }})
}
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
	// 提交请求
	formLoading.value = true
	try {
		if (formData.value.logisticsId === null) {
			message.error("请选择物流公司")
			return false
		} else if (formData.value.logisticsNo === "") {
			message.error("请输入物流单号")
			return false
		}
		const data = unref(formData)
		await TradeOrderApi.deliveryOrder(data)
		message.success("发货成功")

		// 发送操作成功的事件
		emit('success', true)
		goback()
	} finally {
		formLoading.value = false
		
	}
}

onMounted(async () => {
	formData.value.id = orderId.value;
	deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList();
	// 当子组件挂载时，改变父组件的样式
	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 {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: white;
	padding:1rem;
	box-sizing: border-box;
	.el-button{
		width: 48%;
	}
}
.el-select-dropdown .el-select-dropdown__list .el-select-dropdown__item {
  max-width: 200px; /* 或者您想要的其他宽度 */
}
</style>