<template>
	<div class="app-container">
		<el-form :model="meterPar" ref="dataForm" label-position="top" size="small" :inline="true" label-width="160px"
			class="flex-form">
			<el-form-item v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)"
				:style="{ width: selectWidth + 'px' }" label="流量计类别" prop="dMeterType">
				<el-select :key="'meter-type-' + meterPar.dMeterType" v-model="meterPar.dMeterType"
					placeholder="请选择流量计类别 " clearable>
					<el-option v-for="dict in ngtools_lljlx" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="计算标准"
				prop="dFlowCalbz">
				<el-select v-model="meterPar.dFlowCalbz" placeholder="请选择计算标准 " clearable>
					<el-option v-for="dict in ngtools_lljsbz" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="压缩因子计算标准" prop="dZcalbz">
				<el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable>
					<el-option v-for="dict in ngtools_ysyzjsbz" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="计量参比条件压力" prop="dCbtj">
				<el-select v-model="meterPar.dCbtj" placeholder="请选择计量参比条件压力 " clearable>
					<el-option v-for="dict in ngtools_cbtj" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="节流装置类型"
				prop="dCoreType">
				<el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable>
					<el-option v-for="dict in ngtools_jlzzlx" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="取压方式"
				prop="dPtmode">
				<el-select v-model="meterPar.dPtmode" placeholder="请选择取压方式 " clearable>
					<el-option v-for="dict in ngtools_qyfs" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道类型"
				prop="dPipeType">
				<el-select v-model="meterPar.dPipeType" placeholder="请选择管道类型 " clearable>
					<el-option v-for="dict in ngtools_gdlx" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道材料"
				prop="dPipeMaterial">
				<el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable>
					<el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板材料"
				prop="dOrificeMaterial">
				<el-select v-model="meterPar.dOrificeMaterial" placeholder="请选择孔板材料 " clearable>
					<el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'"
				:style="{ width: selectWidth + 'px' }" label="管道内径" prop="dPipeD">
				<unit-converter v-model="meterPar.dPipeD" :unit-type="'length'" v-model:unit-order="meterPar.dLenUnit"
					:show-english-only="false" :decimal-places="5" :width="selectWidth" />
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板孔径"
				prop="dOrificeD">
				<unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'"
					v-model:unit-order="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喉部直径"
				prop="dOrificeD">
				<unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'"
					v-model:unit-order="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>

			<el-form-item :style="{ width: selectWidth + 'px' }" label="压力类型" prop="dPfType">
				<el-select v-model="meterPar.dPfType" placeholder="请选择压力类型 " clearable>
					<el-option v-for="dict in ngtools_yllx" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="meterPar.dPfType === '0'" :style="{ width: selectWidth + 'px' }" label="当地大气压"
				prop="dPatm">
				<unit-converter v-model="meterPar.dPatm" :unit-type="'pressure'" v-model:unit-order="meterPar.dPatmUnit"
					:show-english-only="false" :decimal-places="6" :width="selectWidth" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="输入压力" prop="dPf">
				<unit-converter v-model="meterPar.dPf" :unit-type="'pressure'" v-model:unit-order="meterPar.dPfUnit"
					:show-english-only="false" :decimal-places="5" :width="selectWidth" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="输入温度" prop="dTf">
				<unit-converter v-model="meterPar.dTf" :unit-type="'temperature'" v-model:unit-order="meterPar.dTfUnit"
					:show-english-only="false" :decimal-places="5" :width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="输入差压"
				prop="dDp">
				<unit-converter v-model="meterPar.dDp" :unit-type="'pressure'" v-model:unit-order="meterPar.dDpUnit"
					:show-english-only="false" :decimal-places="5" :width="selectWidth" />
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="流出系数"
				prop="dCd">
				<el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable />
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'"
				:style="{ width: selectWidth + 'px' }" label="仪表系数" prop="dMeterFactor">
				<el-input v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数 " clearable />
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'"
				:style="{ width: selectWidth + 'px' }" label="脉冲数" prop="dPulseNum">
				<unit-converter v-model="meterPar.dPulseNum" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
					:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'个'"
					:enable-convert="false" :width="selectWidth" />
			</el-form-item>

			<el-form-item v-if="meterPar.dMeterType === '8'" :style="{ width: selectWidth + 'px' }" label="管束车容积"
				prop="dVGsc">
				<unit-converter v-model="meterPar.dVGsc" :unit-type="'volume'" v-model:unit-order="meterPar.dVGscUnit"
					:show-english-only="false" :decimal-places="5" :width="selectWidth" />
			</el-form-item>

			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最大体积流量"
				prop="dVFlowMax">
				<unit-converter v-model="meterPar.dVFlowMax" :unit-type="'volumeflow'"
					v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最小体积流量"
				prop="dVFlowMin">
				<unit-converter v-model="meterPar.dVFlowMin" :unit-type="'volumeflow'"
					v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="常用流量"
				prop="dVFlowCon">
				<unit-converter v-model="meterPar.dVFlowCon" :unit-type="'volumeflow'"
					v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
					:enable-convert="true" :width="selectWidth" />
			</el-form-item>

			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程下限"
				prop="dPfRangeMin">
				<unit-converter v-model="meterPar.dPfRangeMin" :unit-type="'pressure'"
					v-model:unit-order="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程上限"
				prop="dPfRangeMax">
				<unit-converter v-model="meterPar.dPfRangeMax" :unit-type="'pressure'"
					v-model:unit-order="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程下限"
				prop="dDpRangeMin">
				<unit-converter v-model="meterPar.dDpRangeMin" :unit-type="'pressure'"
					v-model:unit-order="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程上限"
				prop="dDpRangeMax">
				<unit-converter v-model="meterPar.dDpRangeMax" :unit-type="'pressure'"
					v-model:unit-order="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程下限"
				prop="dTfRangeMin">
				<unit-converter v-model="meterPar.dTfRangeMin" :unit-type="'temperature'"
					v-model:unit-order="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程上限"
				prop="dTfRangeMax">
				<unit-converter v-model="meterPar.dTfRangeMax" :unit-type="'temperature'"
					v-model:unit-order="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
					:width="selectWidth" />
			</el-form-item>
			<!-- 液面深度计算 -->
			<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="常温层深度"
				prop="dVFlowMax">
				<unit-converter v-model="meterPar.dVFlowMax" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
					:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'米'"
					:enable-convert="false" :width="selectWidth" />
			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="测量时间"
				prop="dVFlowMin">

				<unit-converter v-model="meterPar.dVFlowMin" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
					:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'秒'"
					:enable-convert="false" :width="selectWidth" />


			</el-form-item>
			<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="地温梯度"
				prop="dVFlowCon">
				<unit-converter v-model="meterPar.dVFlowCon" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
					:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'度/米'"
					:enable-convert="false" :width="selectWidth" />
			</el-form-item>


		</el-form>
	</div>
</template>
<script setup>
	import {
		ref,
		watch,
		onMounted,
		inject
	} from 'vue';
	import unitConverter from '@/components/inputValueUnit/index';

	// 定义组件名称
	const __name = 'meterParComponents';

	// 1. 导入 useDict（确保路径正确）
	import {
		useDict
	} from '@/utils/dict';
	// 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 取值（可选，但更优雅）
	import {
		computed
	} from 'vue';
	const ngtools_cbtj = computed(() => dictRefs.ngtools_cbtj.value || []);
	const ngtools_jlzzlx = computed(() => dictRefs.ngtools_jlzzlx.value || []);
	const ngtools_lljlx = computed(() => dictRefs.ngtools_lljlx.value || []);
	const ngtools_qyfs = computed(() => dictRefs.ngtools_qyfs.value || []);
	const ngtools_gdcz = computed(() => dictRefs.ngtools_gdcz.value || []);
	const ngtools_lcxsjsff = computed(() => dictRefs.ngtools_lcxsjsff.value || []);
	const ngtools_gdlx = computed(() => dictRefs.ngtools_gdlx.value || []);
	const ngtools_yllx = computed(() => dictRefs.ngtools_yllx.value || []);
	const ngtools_lljsbz = computed(() => dictRefs.ngtools_lljsbz.value || []);
	const ngtools_ysyzjsbz = computed(() => dictRefs.ngtools_ysyzjsbz.value || []);

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

	// 自定义深拷贝函数，替代 lodash.cloneDeep
	const deepClone = (obj) => {
		if (obj === null || typeof obj !== 'object') {
			return obj;
		}

		let clone = Array.isArray(obj) ? [] : {};

		for (let key in obj) {
			if (obj.hasOwnProperty(key)) {
				clone[key] = deepClone(obj[key]);
			}
		}

		return clone;
	};

	// 自定义对象比较函数，替代 lodash.isEqual
	const isObjectEqual = (obj1, obj2) => {
		// 基本类型比较
		if (obj1 === obj2) return true;

		// 类型不同
		if (typeof obj1 !== typeof obj2) return false;

		// 非对象类型
		if (typeof obj1 !== 'object' || obj1 === null || obj2 === null) return false;

		// 数组比较
		if (Array.isArray(obj1) && Array.isArray(obj2)) {
			if (obj1.length !== obj2.length) return false;
			for (let i = 0; i < obj1.length; i++) {
				if (!isObjectEqual(obj1[i], obj2[i])) return false;
			}
			return true;
		}

		// 对象比较
		const keys1 = Object.keys(obj1);
		const keys2 = Object.keys(obj2);

		if (keys1.length !== keys2.length) return false;

		for (let key of keys1) {
			if (!keys2.includes(key) || !isObjectEqual(obj1[key], obj2[key])) {
				return false;
			}
		}

		return true;
	};

	// 定义 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;
	});

	// 对 meterPar 进行深度监听
	watch(
		meterPar,
		(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,
					dMeterType: String(newVal.dMeterType) // 强制类型转换
				});
			}
		}, {
			deep: true,
			immediate: true
		}
	);
</script>

<style scoped>
	.app-container {
		height: 100%;
	}

	.flex-form {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
		gap: 5px;
	}
</style>