<template>
	<div class="app-container">
		<!--  <div>当前 dMeterType 的值: {{ dMeterType }}</div>
    <div>NGResult 数据: {{ NGResult }}</div> -->
		<h3 v-if="dMeterType === '4'">GB/T 17747</h3>
		<el-form v-if="dMeterType === '4'" :model="NGResult" label-position="top" ref="queryRef" size="small"
			:inline="false" label-width="160px" class="flex-form">
			<el-form-item :style="{ width: selectWidth + 'px' }" label="分子量" prop="dMrx">
				<el-input readonly v-model="NGResult.dMrx" placeholder="请输入分子量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="标况压缩因子" prop="dZb">
				<el-input readonly v-model="NGResult.dZb" placeholder="请输入标况压缩因子" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="工况压缩因子" prop="dZf">
				<el-input readonly v-model="NGResult.dZf" placeholder="请输入工况压缩因子" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="超压缩系数" prop="dFpv">
				<el-input readonly v-model="NGResult.dFpv" placeholder="请输入超压缩系数" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="标况摩尔密度" prop="dDb">
				<el-input readonly v-model="NGResult.dDb" placeholder="请输入标况摩尔密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="工况摩尔密度" prop="dDf">
				<el-input readonly v-model="NGResult.dDf" placeholder="请输入工况摩尔密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="标况质量密度" prop="dRhob">
				<el-input readonly v-model="NGResult.dRhob" placeholder="请输入标况质量密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="工况质量密度" prop="dRhof">
				<el-input readonly v-model="NGResult.dRhof" placeholder="请输入工况质量密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体的相对密度" prop="dRD_Ideal">
				<el-input readonly v-model="NGResult.dRD_Ideal" placeholder="请输入理想气体的相对密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的相对密度" prop="dRD_Real">
				<el-input readonly v-model="NGResult.dRD_Real" placeholder="请输入真实气体的相对密度" />
			</el-form-item>
		</el-form>

		<h3 v-if="dMeterType === '5'">AGA No10</h3>
		<el-form v-if="dMeterType === '5'" :model="NGResult" label-position="top" ref="queryRef" size="small"
			:inline="false" label-width="160px" class="flex-form">
			<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体的比焓" prop="dHo">
				<el-input readonly v-model="NGResult.dHo" placeholder="请输入理想气体的比焓" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的焓" prop="dH">
				<el-input readonly v-model="NGResult.dH" placeholder="请输入真实气体的焓" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的熵" prop="dS">
				<el-input readonly v-model="NGResult.dS" placeholder="请输入真实气体的熵" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体定压热容" prop="dCpi">
				<el-input readonly v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="定压热容" prop="dCp">
				<el-input readonly v-model="NGResult.dCp" placeholder="请输入定压热容" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="定容积热容" prop="dCv">
				<el-input readonly v-model="NGResult.dCv" placeholder="请输入定容积热容" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="比热比" prop="dk">
				<el-input readonly v-model="NGResult.dk" placeholder="请输入比热比" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="等熵指数" prop="dKappa">
				<el-input readonly v-model="NGResult.dKappa" placeholder="请输入等熵指数" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="声速" prop="dSOS">
				<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-input readonly v-model="NGResult.dSOS" placeholder="请输入声速" /> -->
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="临界流函数" prop="dCstar">
				<el-input readonly v-model="NGResult.dCstar" placeholder="请输入临界流函数" />
			</el-form-item>
		</el-form>

		<h3 v-if="dMeterType === '6'">GB/T 11062</h3>
		<el-form v-if="dMeterType === '6'" :model="NGResult" label-position="top" ref="queryRef" size="small"
			:inline="false" label-width="160px" class="flex-form">
			<el-form-item :style="{ width: selectWidth + 'px' }" label="摩尔高位发热量" prop="dHhvMol">
				<el-input readonly v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="摩尔低位发热量" prop="dLhvMol">
				<el-input readonly v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="体积高位发热量" prop="dHhvv">
				<el-input readonly v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="体积低位发热量" prop="dLhvv">
				<el-input readonly v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="质量高位发热量" prop="dHhvm">
				<el-input readonly v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="质量地位发热量" prop="dLhvm">
				<el-input readonly v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="标况压缩因子" prop="dZb11062">
				<el-input readonly v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="标况质量密度" prop="dRhob11062">
				<el-input readonly v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="工况质量密度" prop="dRhof11062">
				<el-input readonly v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体的相对密度" prop="dRD_Ideal11062">
				<el-input readonly v-model="NGResult.dRD_Ideal11062" placeholder="请输入理想气体的相对密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的相对密度" prop="dRD_Real11062">
				<el-input readonly v-model="NGResult.dRD_Real11062" placeholder="请输入真实气体的相对密度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的沃泊指数" prop="dWobbeIndex">
				<el-input readonly v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数" />
			</el-form-item>
		</el-form>

		<h3 v-if="dMeterType === '7'">其他</h3>
		<el-form v-if="dMeterType === '7'" :model="NGResult" label-position="top" ref="queryRef" size="small"
			:inline="false" label-width="160px" class="flex-form">
			<el-form-item :style="{ width: selectWidth + 'px' }" label="临界压力" prop="dPc">
				<el-input readonly v-model="NGResult.dPc" placeholder="请输入临界压力" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="临界温度" prop="dTC">
				<el-input readonly v-model="NGResult.dTC" placeholder="请输入临界温度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="爆炸上限" prop="dBzsx">
				<el-input readonly v-model="NGResult.dBzsx" placeholder="请输入爆炸上限" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="爆炸下限" prop="dBzxx">
				<el-input readonly v-model="NGResult.dBzxx" placeholder="请输入爆炸下限" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="总炭含量(kg/m3)" prop="dTotalC">
				<el-input readonly v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C2组分含量(kg/m3)" prop="dC2">
				<el-input readonly v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C2以上组分含量(kg/m3)" prop="dC2j">
				<el-input readonly v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C3以上组分含量(kg/m3)" prop="dC3j">
				<el-input readonly v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C4以上组分含量(kg/m3)" prop="dC4j">
				<el-input readonly v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C5以上组分含量(kg/m3)" prop="dC5j">
				<el-input readonly v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C6以上组分含量(kg/m3)" prop="dC6j">
				<el-input readonly v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="C3C4组分含量(kg/m3)" prop="dC3C4">
				<el-input readonly v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)" />
			</el-form-item>
		</el-form>

		<h3 v-if="dMeterType === '20'">井下液面深度</h3>
		<el-form v-if="dMeterType === '20'" :model="NGResult" label-position="top" ref="queryRef" size="small"
			:inline="false" label-width="160px" class="flex-form">

			<el-form-item :style="{ width: selectWidth + 'px' }" label="井口声速(m/s)" prop="dPc">
				<el-input readonly v-model="NGResult.initialSOS" placeholder="井口声速" />
			</el-form-item>

			<el-form-item :style="{ width: selectWidth + 'px' }" label="粗算深度(m)" prop="dPc">
				<el-input readonly v-model="NGResult.initialEstimate" placeholder="粗算深度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="修正深度(m)" prop="dTC">
				<el-input readonly v-model="NGResult.correctedDepth" placeholder="修正深度" />
			</el-form-item>
			<el-form-item :style="{ width: selectWidth + 'px' }" label="迭代次数" prop="dBzsx">
				<el-input readonly v-model="NGResult.iterations" placeholder="迭代次数" />
			</el-form-item>
		</el-form>
		<ul>
			<view v-for="item,index in NGResult.dataSegment" style="width: 100%;">
				<li>{{item}}</li>
			</view>
		</ul>
	</div>
</template>

<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>

<style scoped>
	/* 可按需添加样式 */
	.app-container {
		height: 100%;
	}

	.flex-form {
		display: grid;
		/* 优化后的自适应规则 */
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
		gap: 5px;
	}
</style>