<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';
	import unitConverter from '@/components/inputValueUnit/index';

	// 定义 props
	const props = defineProps({
		elFormWidth: {
			type: Number,
			default: 180
		},
		dMeterType: {
			type: String,
			default: '0'
		},
		modelValue: {
			type: Object,
			default: () => ({
				dMrx: 0,
				dZb: 0,
				dZf: 0,
				dFpv: 0,
				dDb: 0,
				dDf: 0,
				dRhob: 0,
				dRhof: 0,
				dRD_Ideal: 0,
				dRD_Real: 0,
				dHo: 0,
				dH: 0,
				dS: 0,
				dCpi: 0,
				dCp: 0,
				dCv: 0,
				dk: 0,
				dKappa: 0,
				dSOS: 0,
				dCstar: 0,
				dHhvMol: 0,
				dLhvMol: 0,
				dHhvv: 0,
				dLhvv: 0,
				dHhvm: 0,
				dLhvm: 0,
				dZb11062: 0,
				dRhob11062: 0,
				dRhof11062: 0,
				dRD_Ideal11062: 0,
				dRD_Real11062: 0,
				dWobbeIndex: 0,
				dPc: 0,
				dTC: 0,
				dBzsx: 0,
				dBzxx: 0,
				dTotalC: 0,
				dC2: 0,
				dC2j: 0,
				dC3j: 0,
				dC4j: 0,
				dC5j: 0,
				dC6j: 0,
				dC3C4: 0
			})
		}
	});

	// 定义响应式数据
	const NGResult = ref({
		dMrx: 0,
		dZb: 0,
		dZf: 0,
		dFpv: 0,
		dDb: 0,
		dDf: 0,
		dRhob: 0,
		dRhof: 0,
		dRD_Ideal: 0,
		dRD_Real: 0,
		dHo: 0,
		dH: 0,
		dS: 0,
		dCpi: 0,
		dCp: 0,
		dCv: 0,
		dk: 0,
		dKappa: 0,
		dSOS: 0,
		dSOSUnit: 0,
		dCstar: 0,
		dHhvMol: 0,
		dLhvMol: 0,
		dHhvv: 0,
		dLhvv: 0,
		dHhvm: 0,
		dLhvm: 0,
		dZb11062: 0,
		dRhob11062: 0,
		dRhof11062: 0,
		dRD_Ideal11062: 0,
		dRD_Real11062: 0,
		dWobbeIndex: 0,
		dPc: 0,
		dTC: 0,
		dBzsx: 0,
		dBzxx: 0,
		dTotalC: 0,
		dC2: 0,
		dC2j: 0,
		dC3j: 0,
		dC4j: 0,
		dC5j: 0,
		dC6j: 0,
		dC3C4: 0
	});
	const selectWidth = ref(180);

	// 监听 elFormWidth 的变化
	watch(
		() => props.elFormWidth,
		(newVal) => {
			selectWidth.value = newVal;
		}, {
			deep: true
		}
	);

	// 监听 value 的变化
	watch(
		() => props.modelValue,
		(newVal) => {
			console.log(newVal);
			const processedValue = {
				...newVal
			};
			for (const key in processedValue) {
				if (processedValue.hasOwnProperty(key)) {
					const value = processedValue[key];
					// 判断是否为有效的数值
					if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
						// 使用 toFixed 方法设置小数点位数
						processedValue[key] = parseFloat(value.toFixed(6));
					}
				}
			}
			NGResult.value = JSON.parse(JSON.stringify(processedValue));
		}, {
			deep: true
		}
	);

	// 挂载后设置 selectWidth
	onMounted(() => {
		selectWidth.value = props.elFormWidth;
	});
</script>

<template>
	<div class="app-container" ref="queryRef">
		<!-- 调试信息（如需启用可取消注释） -->
		<!-- <div>当前 dMeterType 的值: {{ dMeterType }}</div>
    <div>NGResult 数据: {{ NGResult }}</div> -->

		<!-- 1. dMeterType === '4'：GB/T 17747 -->
		<h3 v-if="dMeterType === '4'">GB/T 17747</h3>
		<div v-if="dMeterType === '4'" class="form-section">
			<!-- 分子量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">分子量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dMrx" placeholder="请输入分子量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 标况压缩因子 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">标况压缩因子</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dZb" placeholder="请输入标况压缩因子"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 工况压缩因子 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">工况压缩因子</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dZf" placeholder="请输入工况压缩因子"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 超压缩系数 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">超压缩系数</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dFpv" placeholder="请输入超压缩系数"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 标况摩尔密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">标况摩尔密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dDb" placeholder="请输入标况摩尔密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 工况摩尔密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">工况摩尔密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dDf" placeholder="请输入工况摩尔密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 标况质量密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">标况质量密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRhob" placeholder="请输入标况质量密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 工况质量密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">工况质量密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRhof" placeholder="请输入工况质量密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 理想气体的相对密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">理想气体的相对密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRD_Ideal" placeholder="请输入理想气体的相对密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 真实气体的相对密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">真实气体的相对密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRD_Real" placeholder="请输入真实气体的相对密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
		</div>

		<!-- 2. dMeterType === '5'：AGA No10 -->
		<h3 v-if="dMeterType === '5'">AGA No10</h3>
		<div v-if="dMeterType === '5'" class="form-section">
			<!-- 理想气体的比焓 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">理想气体的比焓</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dHo" placeholder="请输入理想气体的比焓"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 真实气体的焓 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">真实气体的焓</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dH" placeholder="请输入真实气体的焓"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 真实气体的熵 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">真实气体的熵</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dS" placeholder="请输入真实气体的熵"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 理想气体定压热容 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">理想气体定压热容</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 定压热容 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">定压热容</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dCp" placeholder="请输入定压热容"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 定容积热容 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">定容积热容</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dCv" placeholder="请输入定容积热容"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 比热比 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">比热比</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dk" placeholder="请输入比热比"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 等熵指数 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">等熵指数</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dKappa" placeholder="请输入等熵指数"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 声速 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">声速</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<unit-converter v-model="NGResult.dSOS" :unit-type="'speed'" v-model:unit-order="NGResult.dSOSUnit"
						:show-english-only="true" :decimal-places="5" :input-disable="true" :width="selectWidth" />
				</el-col>
			</el-row>
			<!-- 临界流函数 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">临界流函数</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dCstar" placeholder="请输入临界流函数"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
		</div>

		<!-- 3. dMeterType === '6'：GB/T 11062 -->
		<h3 v-if="dMeterType === '6'">GB/T 11062</h3>
		<div v-if="dMeterType === '6'" class="form-section">
			<!-- 摩尔高位发热量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">摩尔高位发热量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 摩尔低位发热量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">摩尔低位发热量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 体积高位发热量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">体积高位发热量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 体积低位发热量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">体积低位发热量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 质量高位发热量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">质量高位发热量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 质量地位发热量 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">质量地位发热量</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 标况压缩因子 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">标况压缩因子</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 标况质量密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">标况质量密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 工况质量密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">工况质量密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 理想气体的相对密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">理想气体的相对密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRD_Ideal11062" placeholder="请输入理想气体的相对密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 真实气体的相对密度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">真实气体的相对密度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dRD_Real11062" placeholder="请输入真实气体的相对密度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 真实气体的沃泊指数 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">真实气体的沃泊指数</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
		</div>

		<!-- 4. dMeterType === '7'：其他 -->
		<h3 v-if="dMeterType === '7'">其他</h3>
		<div v-if="dMeterType === '7'" class="form-section">
			<!-- 临界压力 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">临界压力</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dPc" placeholder="请输入临界压力"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 临界温度 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">临界温度</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dTC" placeholder="请输入临界温度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 爆炸上限 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">爆炸上限</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dBzsx" placeholder="请输入爆炸上限"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 爆炸下限 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">爆炸下限</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dBzxx" placeholder="请输入爆炸下限"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 总炭含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">总炭含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C2组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C2组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C2以上组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C2以上组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C3以上组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C3以上组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C4以上组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C4以上组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C5以上组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C5以上组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C6以上组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C6以上组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- C3C4组分含量(kg/m3) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">C3C4组分含量(kg/m3)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
		</div>

		<!-- 5. dMeterType === '20'：井下液面深度 -->
		<h3 v-if="dMeterType === '20'">井下液面深度</h3>
		<div v-if="dMeterType === '20'" class="form-section">
			<!-- 井口声速(m/s) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">井口声速(m/s)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.initialSOS" placeholder="井口声速"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 粗算深度(m) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">粗算深度(m)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.initialEstimate" placeholder="粗算深度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 修正深度(m) -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">修正深度(m)</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.correctedDepth" placeholder="修正深度"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
			<!-- 迭代次数 -->
			<el-row class="form-row" :gutter="10" align="middle">
				<el-col :span="10" class="label-col">
					<label class="form-label">迭代次数</label>
				</el-col>
				<el-col :span="14" class="control-col">
					<el-input readonly v-model="NGResult.iterations" placeholder="迭代次数"
						:style="{ width: selectWidth + 'px' }" />
				</el-col>
			</el-row>
		</div>

		<!-- 数据段列表 -->
		<ul class="data-list">
			<li v-for="(item, index) in NGResult.dataSegment" :key="index" class="data-item">
				{{ item }}
			</li>
		</ul>
	</div>
</template>

<style scoped>
	/* 整体容器样式 */
	.app-container {
		padding: 10px;
	}

	/* 每个分类表单区域的间距 */
	.form-section {
		margin-bottom: 20px;
	}

	/* 每行间距与垂直居中 */
	.form-row {
		margin-bottom: 12px;
		align-items: center;
	}

	/* 标签列样式：右对齐、统一字号/颜色 */
	.label-col {
		text-align: right;
		padding-right: 10px;
	}

	.form-label {
		font-size: 12px;
		color: #606266;
		/* 匹配Element UI默认标签色 */
		font-weight: 300;
		line-height: 32px;
		/* 匹配输入框高度，垂直居中 */
	}

	/* 控件列样式：左间距 */
	.control-col {
		padding-left: 10px;
	}

	/* 只读输入框样式优化 */
	.el-input[readonly] {
		background-color: #f5f7fa;
		color: #606266;
	}

	/* 数据列表样式 */
	.data-list {
		margin-top: 20px;
		padding-left: 20px;
		width: 100%;
	}

	.data-item {
		width: 100%;
		line-height: 24px;
		color: #606266;
	}

	/* 小屏幕适配：标签和控件堆叠显示 */
	@media (max-width: 768px) {
		.form-row .el-col {
			span: 24 !important;
		}

		.label-col {
			text-align: left;
			margin-bottom: 4px;
			padding-right: 0;
		}

		.control-col {
			padding-left: 0;
		}
	}
</style>