<template>
	<div class="app-container" ref="queryRef">
		<!-- 1. 标况体积流量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">
				<unit-converter v-model="meterResult.dVFlowb" :unit-type="'volumeflow'"
					v-model:unit-order="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="6"
					:width="selectWidth" :input-disable="true" />
			</el-col>
		</el-row>

		<!-- 2. 工况体积流量 -->
		<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="meterResult.dVFlowf" :unit-type="'volumeflow'"
					v-model:unit-order="meterResult.dVFlowWorkUnit" :show-english-only="true" :decimal-places="5"
					:input-disable="true" :width="selectWidth" />
			</el-col>
		</el-row>

		<!-- 3. 标况质量流量 -->
		<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="meterResult.dMFlowb" :unit-type="'massflow'"
					v-model:unit-order="meterResult.dMFlowUnit" :input-disable="true" :show-english-only="true"
					:decimal-places="6" :width="selectWidth" />
			</el-col>
		</el-row>

		<!-- 4. 标况能量流量 -->
		<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="meterResult.dEFlowb" :unit-type="'energyflow'"
					v-model:unit-order="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="6"
					:width="selectWidth" :input-disable="true" />
			</el-col>
		</el-row>

		<!-- 5. 求渐近速度系数 E（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
			<el-col :span="10" class="label-col">
				<label class="form-label">求渐近速度系数 E</label>
			</el-col>
			<el-col :span="14" class="control-col">
				<el-input class="el-input" readonly v-model="meterResult.dE" placeholder=" "
					:style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 6. 求相对密度系数 FG（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
			<el-col :span="10" class="label-col">
				<label class="form-label">求相对密度系数 FG</label>
			</el-col>
			<el-col :span="14" class="control-col">
				<el-input readonly v-model="meterResult.dFG" placeholder=" " :style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 7. 求流动温度系数 FT（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
			<el-col :span="10" class="label-col">
				<label class="form-label">求流动温度系数 FT</label>
			</el-col>
			<el-col :span="14" class="control-col">
				<el-input readonly v-model="meterResult.dFT" placeholder="" :style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 8. 求动力粘度dlnd（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
			<el-col :span="10" class="label-col">
				<label class="form-label">求动力粘度dlnd</label>
			</el-col>
			<el-col :span="14" class="control-col">
				<el-input readonly v-model="meterResult.dDViscosity" placeholder=""
					:style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 9. 求可膨胀系数（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" 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="meterResult.dDExpCoefficient" placeholder=""
					:style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 10. 管道雷诺数（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" 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="meterResult.dRnPipe" placeholder=""
					:style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 11. 修正后的流出系数（仅dMeterType='3'显示） -->
		<el-row v-if="dMeterType === '3'" 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="meterResult.dCdCorrect" placeholder=""
					:style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 12. 喷嘴的流出系数（仅dMeterType='3'显示） -->
		<el-row v-if="dMeterType === '3'" 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="meterResult.dCdNozell" placeholder=""
					:style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 13. 管道内天然气流速（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" 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="meterResult.dVelocityFlow" :unit-type="'speed'"
					v-model:unit-order="meterResult.dVelocityUnit" :show-english-only="true" :decimal-places="5"
					:input-disable="true" :width="selectWidth" />
			</el-col>
		</el-row>

		<!-- 14. 压力损失（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" 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="meterResult.dPressLost" :unit-type="'pressure'"
					v-model:unit-order="meterResult.dPressLostUnit" :show-english-only="true" :decimal-places="5"
					:input-disable="true" :width="selectWidth" />
			</el-col>
		</el-row>

		<!-- 15. 直径比（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" 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="meterResult.dBeta" placeholder="" :style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 16. 等熵指数（仅dMeterType='0'显示） -->
		<el-row v-if="dMeterType === '0'" 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="meterResult.dKappa" placeholder="" :style="{ width: selectWidth + 'px' }" />
			</el-col>
		</el-row>

		<!-- 注释的字段：保留结构，如需启用可取消注释 -->
		<!-- <el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
      <el-col :span="10" class="label-col">
        <label class="form-label">孔板锐利度系数Bk</label>
      </el-col>
      <el-col :span="14" class="control-col">
        <el-input 
          readonly 
          v-model="meterResult.dBk" 
          placeholder=""
          :style="{ width: selectWidth + 'px' }"
        />
      </el-col>
    </el-row>
    <el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
      <el-col :span="10" class="label-col">
        <label class="form-label">管道粗糙度系数 Gme</label>
      </el-col>
      <el-col :span="14" class="control-col">
        <el-input 
          readonly 
          v-model="meterResult.dRoughNessPipe" 
          placeholder=""
          :style="{ width: selectWidth + 'px' }"
        />
      </el-col>
    </el-row> -->
	</div>
</template>

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

	// 定义 props
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({
				dE: 0,
				dFG: 0,
				dFT: 0,
				dDViscosity: 0,
				dDExpCoefficient: 0,
				dRnPipe: 0,
				dBk: 0,
				dRoughNessPipe: 0,
				dCdCorrect: 0,
				dCdNozell: 0,
				dVFlowb: 0,
				dVFlowf: 0,
				dVFlowUnit: 0,
				dMFlowb: 0,
				dMFlowUnit: 0,
				dEFlowb: 0,
				dEFlowUnit: 0,
				dVelocityFlow: 0,
				dVelocityUnit: 0,
				dPressLost: 0,
				dPressLostUnit: 0,
				dBeta: 0,
				dKappa: 0
			})
		},
		elFormWidth: {
			type: Number,
			default: 180
		},
		dMeterType: {
			type: String,
			default: '0'
		}
	});

	// 定义响应式数据
	const meterResult = ref({
		dE: 0,
		dFG: 0,
		dFT: 0,
		dDViscosity: 0,
		dDExpCoefficient: 0,
		dRnPipe: 0,
		dBk: 0,
		dRoughNessPipe: 0,
		dCdCorrect: 0,
		dCdNozell: 0,
		dVFlowb: 0,
		dVFlowf: 0,
		dVFlowUnit: 0,
		dMFlowb: 0,
		dMFlowUnit: 0,
		dEFlowb: 0,
		dEFlowUnit: 0,
		dVelocityFlow: 0,
		dVelocityUnit: 0,
		dPressLost: 0,
		dPressLostUnit: 0,
		dBeta: 0,
		dKappa: 0
	});
	const selectWidth = ref(0);

	// 监听 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));
					}
				}
			}
			meterResult.value = JSON.parse(JSON.stringify(processedValue));
		}, {
			deep: true
		}
	);

	// 挂载后设置 selectWidth
	onMounted(() => {
		// 在 DOM 更新后获取宽度
		selectWidth.value = props.elFormWidth;
	});
</script>


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

	/* 每行间距与垂直居中 */
	.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;
	}

	/* 小屏幕适配：标签和控件堆叠显示 */
	@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>