 <template>
 	<view class="form-container">
 		<uni-forms ref="dataForm" :modelValue="meterPar" label-position="top" :label-width="160">
 			<!-- 响应式网格容器 -->
 			<view class="form-grid">
 				<!-- 所有表单项保持不变 -->
 				<!-- 流量计类别 -->
 				<uni-forms-item v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)" label="流量计类别"
 					name="dMeterType" class="form-item">
 					<uni-data-select :key="'meter-type-' + meterPar.dMeterType" v-model="meterPar.dMeterType"
 						:localdata="ngtools_lljlx" placeholder="请选择流量计类别" clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 计算标准 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="计算标准" name="dFlowCalbz" class="form-item">
 					<uni-data-select v-model="meterPar.dFlowCalbz" :localdata="ngtools_lljsbz" placeholder="请选择计算标准"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 压缩因子计算标准 -->
 				<uni-forms-item label="压缩因子计算标准" name="dZcalbz" class="form-item">
 					<uni-data-select v-model="meterPar.dZcalbz" :localdata="ngtools_ysyzjsbz" placeholder="请选择压缩因子计算标准"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 计量参比条件压力 -->
 				<uni-forms-item label="计量参比条件压力" name="dCbtj" class="form-item">
 					<uni-data-select v-model="meterPar.dCbtj" :localdata="ngtools_cbtj" placeholder="请选择计量参比条件压力"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 节流装置类型 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="节流装置类型" name="dCoreType" class="form-item">
 					<uni-data-select v-model="meterPar.dCoreType" :localdata="ngtools_jlzzlx" placeholder="请选择节流装置类型"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 取压方式 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="取压方式" name="dPtmode" class="form-item">
 					<uni-data-select v-model="meterPar.dPtmode" :localdata="ngtools_qyfs" placeholder="请选择取压方式"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 管道类型 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="管道类型" name="dPipeType" class="form-item">
 					<uni-data-select v-model="meterPar.dPipeType" :localdata="ngtools_gdlx" placeholder="请选择管道类型"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 管道材料 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="管道材料" name="dPipeMaterial" class="form-item">
 					<uni-data-select v-model="meterPar.dPipeMaterial" :localdata="ngtools_gdcz" placeholder="请选择管道材料"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 孔板材料 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="孔板材料" name="dOrificeMaterial"
 					class="form-item">
 					<uni-data-select v-model="meterPar.dOrificeMaterial" :localdata="ngtools_gdcz"
 						placeholder="请选择孔板材料" clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 管道内径 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'" label="管道内径"
 					name="dPipeD" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dPipeD" :unit-type="'length'"
 						:unitOrder.sync="meterPar.dLenUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 孔板孔径 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="孔板孔径" name="dOrificeD" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dOrificeD" :unit-type="'length'"
 						:unitOrder.sync="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 喉部直径 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '3'" label="喉部直径" name="dOrificeD" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dOrificeD" :unit-type="'length'"
 						:unitOrder.sync="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 压力类型 -->
 				<uni-forms-item label="压力类型" name="dPfType" class="form-item">
 					<uni-data-select v-model="meterPar.dPfType" :localdata="ngtools_yllx" placeholder="请选择压力类型"
 						clearable></uni-data-select>
 				</uni-forms-item>

 				<!-- 当地大气压 -->
 				<uni-forms-item v-if="meterPar.dPfType === '0'" label="当地大气压" name="dPatm" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dPatm" :unit-type="'pressure'"
 						:unitOrder.sync="meterPar.dPatmUnit" :show-english-only="false" :decimal-places="6"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 输入压力 -->
 				<uni-forms-item label="输入压力" name="dPf" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dPf" :unit-type="'pressure'" :unitOrder.sync="meterPar.dPfUnit"
 						:show-english-only="false" :decimal-places="5" :width="selectWidth" />
 				</uni-forms-item>

 				<!-- 输入温度 -->
 				<uni-forms-item label="输入温度" name="dTf" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dTf" :unit-type="'temperature'"
 						:unitOrder.sync="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 输入差压 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '0'" label="输入差压" name="dDp" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dDp" :unit-type="'pressure'" :unitOrder.sync="meterPar.dDpUnit"
 						:show-english-only="false" :decimal-places="5" :width="selectWidth" />
 				</uni-forms-item>

 				<!-- 流出系数 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '3'" label="流出系数" name="dCd" class="form-item">
 					<uni-easyinput v-model="meterPar.dCd" placeholder="请输入流出系数" />
 				</uni-forms-item>

 				<!-- 仪表系数 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" label="仪表系数"
 					name="dMeterFactor" class="form-item">
 					<uni-easyinput v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数" />
 				</uni-forms-item>

 				<!-- 脉冲数 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" label="脉冲数"
 					name="dPulseNum" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dPulseNum" :unit-type="'user'"
 						:unitOrder.sync="meterPar.dVGscUnit" :show-english-only="false" :decimal-places="5"
 						:user-defined="true" :user-definedunit-name="'个'" :enable-convert="false"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 管束车容积 -->
 				<uni-forms-item v-if="meterPar.dMeterType === '8'" label="管束车容积" name="dVGsc" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dVGsc" :unit-type="'volume'"
 						:unitOrder.sync="meterPar.dVGscUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 最大体积流量 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="最大体积流量" name="dVFlowMax" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dVFlowMax" :unit-type="'volumeflow'"
 						:unitOrder.sync="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 最小体积流量 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="最小体积流量" name="dVFlowMin" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dVFlowMin" :unit-type="'volumeflow'"
 						:unitOrder.sync="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 常用流量 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="常用流量" name="dVFlowCon" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dVFlowCon" :unit-type="'volumeflow'"
 						:unitOrder.sync="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
 						:enable-convert="true" :width="selectWidth" />
 				</uni-forms-item>

 				<!-- 压力量程下限 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="压力量程下限" name="dPfRangeMin" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dPfRangeMin" :unit-type="'pressure'"
 						:unitOrder.sync="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 压力量程上限 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="压力量程上限" name="dPfRangeMax" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dPfRangeMax" :unit-type="'pressure'"
 						:unitOrder.sync="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 差压量程下限 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="差压量程下限" name="dDpRangeMin" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dDpRangeMin" :unit-type="'pressure'"
 						:unitOrder.sync="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 差压量程上限 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="差压量程上限" name="dDpRangeMax" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dDpRangeMax" :unit-type="'pressure'"
 						:unitOrder.sync="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 温度计量程下限 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="温度计量程下限" name="dTfRangeMin" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dTfRangeMin" :unit-type="'temperature'"
 						:unitOrder.sync="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>

 				<!-- 温度计量程上限 -->
 				<uni-forms-item v-if="meterPar.dBqdd === '1'" label="温度计量程上限" name="dTfRangeMax" class="form-item">
 					<a-yjly-inputunit v-model="meterPar.dTfRangeMax" :unit-type="'temperature'"
 						:unitOrder.sync="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
 						:width="selectWidth" />
 				</uni-forms-item>
 			</view>
 		</uni-forms>
 	</view>
 </template>


 <script setup>
 	import {
 		ref,
 		watch,
 		onMounted,
 		computed
 	} from 'vue';
 	// 1. 导入 useDict（确保路径正确）
 	import {
 		useDict
 	} from '@/utils/dict';

 	// 定义组件名称
 	const __name = 'meterParComponents';
 	// 2. 调用 useDict 获取字典（返回的是 Ref 对象集合）
 	const dictRefs = useDict(
 		'ngtools_cbtj',
 		'ngtools_jlzzlx',
 		'ngtools_lljlx',
 		'ngtools_qyfs',
 		'ngtools_gdcz',
 		'ngtools_lcxsjsff',
 		'ngtools_gdlx',
 		'ngtools_yllx',
 		'ngtools_lljsbz',
 		'ngtools_ysyzjsbz'
 	);
 	// 3. 解构出每个字典的 Ref 对象，并通过 computed 简化 .value 取值（可选，但更优雅）
 	const ngtools_cbtj = computed(() => {
 		return (dictRefs.ngtools_cbtj.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_jlzzlx = computed(() => {
 		return (dictRefs.ngtools_jlzzlx.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_lljlx = computed(() => {
 		return (dictRefs.ngtools_lljlx.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_qyfs = computed(() => {
 		return (dictRefs.ngtools_qyfs.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_gdcz = computed(() => {
 		return (dictRefs.ngtools_gdcz.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_lcxsjsff = computed(() => {
 		return (dictRefs.ngtools_lcxsjsff.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_gdlx = computed(() => {
 		return (dictRefs.ngtools_gdlx.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_yllx = computed(() => {
 		return (dictRefs.ngtools_yllx.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_lljsbz = computed(() => {
 		return (dictRefs.ngtools_lljsbz.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});
 	const ngtools_ysyzjsbz = computed(() => {
 		return (dictRefs.ngtools_ysyzjsbz.value || []).map(item => ({
 			value: item.value,
 			text: item.label
 		}))
 	});

 	// 4. 添加字典加载状态，避免初始空渲染
 	const dictLoaded = computed(() => {
 		// 检查所有必需字典是否已加载（至少有一条数据）
 		return ngtools_lljlx.value.length > 0 && ngtools_jlzzlx.value.length > 0;
 	});

 	// 修复深拷贝函数（确保所有属性被复制）
 	const deepClone = (obj) => {
 		if (obj === null || typeof obj !== 'object') {
 			return obj;
 		}
 		// 处理数组和对象
 		let clone = Array.isArray(obj) ? [...obj] : {
 			...obj
 		};
 		// 递归复制嵌套属性
 		Object.keys(clone).forEach(key => {
 			clone[key] = deepClone(clone[key]);
 		});
 		return clone;
 	};

 	// 简化对象比较（暂时移除复杂判断，优先保证更新）
 	const isObjectEqual = (obj1, obj2) => {
 		// 基础类型直接比较
 		if (obj1 === obj2) return true;
 		// 非对象类型直接返回不等
 		if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
 			return false;
 		}
 		// 简单比较键值对（忽略深层嵌套的复杂比较，避免误判）
 		const keys1 = Object.keys(obj1);
 		const keys2 = Object.keys(obj2);
 		if (keys1.length !== keys2.length) return false;
 		return keys1.every(key => {
 			return obj1[key] === obj2[key]; // 仅比较表层值（适合表单场景）
 		});
 	};

 	// 定义 props
 	const props = defineProps({
 		modelValue: {
 			type: Object,
 			default: () => ({
 				dFlowCalbz: null,
 				dZcalbz: null,
 				dCbtj: null,
 				dpbM: null,
 				dtbM: null,
 				dpbE: null,
 				dtbE: null,
 				dPatm: null,
 				dPatmUnit: null,
 				dngCompents: null,
 				dMeterType: null,
 				dCoreType: null,
 				dPtmode: null,
 				dPipeType: null,
 				dPipeD: null,
 				dLenUnit: null,
 				dPipeDtemp: null,
 				dPileDtempU: null,
 				dPipeMaterial: null,
 				dOrificeD: null,
 				dOrificeUnit: null,
 				dOrificeDtemp: null,
 				dOrificeDtempUnit: null,
 				dOrificeMaterial: null,
 				dOrificeSharpness: null,
 				dOrificeRk: null,
 				dOrificeRkLenU: null,
 				dPf: null,
 				dPfUnit: null,
 				dPfType: null,
 				dTf: null,
 				dTfUnit: null,
 				dDp: null,
 				dDpUnit: null,
 				dVFlowUnit: 0,
 				dVFlowWorkUnit: 0,
 				dMFlowUnit: 0,
 				dEFlowUnit: 6,
 				dCd: null,
 				dCdCalMethod: null,
 				dMeterFactor: null,
 				dPulseNum: null,
 				dVFlowMax: null,
 				dVFlowMin: null,
 				dVFlowCon: null,
 				dPfRangeMin: null,
 				dPfRangeMax: null,
 				dDpRangeMin: null,
 				dDpRangeMax: null,
 				dTfRangeMin: null,
 				dTfRangeMax: null,
 				dVGsc: null,
 				dCalcType: 0, // 0 流量 1  天然气  3 管束车
 				dBqdd: 0 // 0 不计算，1 计算
 			})
 		},
 		elFormWidth: {
 			type: Number,
 			default: 180
 		}
 	});

 	// 定义 emits
 	const emits = defineEmits(['update:modelValue']);

 	// 定义响应式数据
 	const selectWidth = ref(0);
 	const meterPar = ref(deepClone(props.modelValue));
 	const isUpdating = ref(false);

 	// 在挂载后设置 selectWidth
 	onMounted(() => {
 		selectWidth.value = props.elFormWidth;
 		// 挂载后再次同步父组件数据（防止父组件数据延迟）
 		if (!isObjectEqual(props.modelValue, meterPar.value)) {
 			meterPar.value = deepClone(props.modelValue);
 		}
 	});

 	// 对 meterPar 进行深度监听
 	watch(
 		() => meterPar.value,
 		(newVal) => {
 			// console.log(11111, newVal)
 			if (!isObjectEqual(newVal, props.modelValue)) {
 				// console.log('Emit to parent', newVal);
 				emits('update:modelValue', deepClone(newVal));
 			}
 		}, {
 			deep: true
 		}
 	);

 	// 对 elFormWidth 进行监听
 	watch(
 		() => props.elFormWidth,
 		(newVal) => {
 			selectWidth.value = newVal;
 		}, {
 			deep: true
 		}
 	);

 	// 对 value 进行深度监听
 	watch(
 		() => props.modelValue,
 		(newVal) => {
 			if (!isObjectEqual(newVal, meterPar.value)) {
 				console.log('Update from parent', newVal);
 				meterPar.value = deepClone(newVal);
 			}
 		}, {
 			deep: true,
 			immediate: true
 		}
 	);
 </script>

 <style scoped>
 	/* 容器样式 */
 	.form-container {
 		padding: 20rpx;
 		box-sizing: border-box;
 		width: 100%;
 	}

 	/* 网格布局容器 */
 	.form-grid {
 		display: grid;
 		gap: 24rpx;
 		/* 表单项之间的间距 */
 		width: 100%;
 	}

 	/* 表单项基础样式 */
 	.form-item {
 		width: 100%;
 		margin: 0;
 	}

 	/* 响应式布局 - 屏幕宽度小于768px时显示2列 */
 	@media screen and (max-width: 768px) {
 		.form-grid {
 			grid-template-columns: repeat(2, 1fr);
 		}
 	}

 	/* 响应式布局 - 屏幕宽度大于等于768px时显示3列 */
 	@media screen and (min-width: 768px) {
 		.form-grid {
 			grid-template-columns: repeat(3, 1fr);
 		}
 	}

 	/* 优化表单元素样式 */
 	:deep(.uni-forms-item) {
 		margin-bottom: 0 !important;
 	}

 	:deep(.uni-forms-item__label) {
 		font-size: 28rpx;
 		color: #333;
 		margin-bottom: 8rpx;
 		line-height: 1.4;
 	}

 	:deep(.uni-data-select__input),
 	:deep(.uni-easyinput__content),
 	:deep(.a-yjly-inputunit) {
 		width: 100%;
 		min-height: 70rpx;
 		box-sizing: border-box;
 	}

 	:deep(.uni-input-input),
 	:deep(.uni-easyinput__content input) {
 		font-size: 28rpx;
 		padding: 0 20rpx;
 		height: 70rpx;
 		line-height: 70rpx;
 	}

 	/* 确保小屏幕下表单不溢出 */
 	@media screen and (max-width: 480px) {
 		.form-container {
 			padding: 10rpx;
 		}

 		.form-grid {
 			gap: 16rpx;
 		}

 		:deep(.uni-forms-item__label) {
 			font-size: 26rpx;
 		}

 		:deep(.uni-input-input) {
 			font-size: 26rpx;
 		}
 	}
 </style>