<template>
	<view class="app-container">
		<uni-forms :modelValue="meterResult" ref="queryRef" label-position="top" :label-width="160"  >
		<!-- 响应式网格容器 -->
		<view class="form-grid">
		
			<!-- 标况体积流量m³/s -->
			<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况体积流量m³/s" name="dVFlowb">
				<a-yjly-inputunit
					:modelValue="meterResult.dVFlowb"
					:unit-type="'volumeflow'"
					:unitOrder.sync="meterResult.dVFlowUnit"
					:show-english-only="true"
					:decimal-places="5"
					:width="selectWidth"
					:input-disable="true"
				/>
			</uni-forms-item>

			<!-- 工况体积流量 -->
			<uni-forms-item :style="{ width: selectWidth + 'px' }" label="工况体积流量" name="dVFlowf">
				<a-yjly-inputunit
					:modelValue="meterResult.dVFlowf"
					:unit-type="'volumeflow'"
					:unitOrder.sync="meterResult.dVFlowWorkUnit"
					:show-english-only="true"
					:decimal-places="5"
					:input-disable="true"
					:width="selectWidth"
				/>
			</uni-forms-item>

			<!-- 标况质量流量 -->
			<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况质量流量" name="dMFlowb">
				<a-yjly-inputunit
					:modelValue="meterResult.dMFlowb"
					:unit-type="'massflow'"
					:unitOrder.sync="meterResult.dMFlowUnit"
					:input-disable="true"
					:show-english-only="true"
					:decimal-places="5"
					:width="selectWidth"
				/>
			</uni-forms-item>

			<!-- 标况能量流量 -->
			<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况能量流量" name="dEFlowb">
				<a-yjly-inputunit
					:modelValue="meterResult.dEFlowb"
					:unit-type="'energyflow'"
					:unitOrder.sync="meterResult.dEFlowUnit"
					:show-english-only="true"
					:decimal-places="5"
					:width="selectWidth"
					:input-disable="true"
				/>
			</uni-forms-item>
	<!-- 求超压缩因子 E -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="超压缩因子Fz" name="dE">
				<uni-easyinput :modelValue="meterResult.dFpv" placeholder=" " disabled />
			</uni-forms-item>
			<!-- 求渐近速度系数 E -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求渐近速度系数 E" name="dE">
				<uni-easyinput :modelValue="meterResult.dE" placeholder=" " disabled />
			</uni-forms-item>

			<!-- 求相对密度系数 FG -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求相对密度系数 FG" name="dFG">
				<uni-easyinput :modelValue="meterResult.dFG" placeholder=" " disabled />
			</uni-forms-item>

			<!-- 求流动温度系数 FT -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求流动温度系数 FT" name="dFT">
				<uni-easyinput :modelValue="meterResult.dFT" placeholder="" disabled />
			</uni-forms-item>

			<!-- 求动力粘度dlnd -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求动力粘度dlnd" name="dDViscosity">
				<uni-easyinput :modelValue="meterResult.dDViscosity" placeholder="" disabled />
			</uni-forms-item>

			<!-- 求可膨胀系数 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求可膨胀系数" name="dDExpCoefficient">
				<uni-easyinput :modelValue="meterResult.dDExpCoefficient" placeholder="" disabled />
			</uni-forms-item>

			<!-- 管道雷诺数 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道雷诺数" name="dRnPipe">
				<uni-easyinput :modelValue="meterResult.dRnPipe" placeholder="" disabled />
			</uni-forms-item>
			<!-- 流出系数 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="流出系数" name="dCdCorrect">
				<uni-easyinput :modelValue="meterResult.dCd" placeholder="" disabled />
			</uni-forms-item>

			<!-- 修正后的流出系数 -->
			<uni-forms-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="修正后的流出系数" name="dCdCorrect">
				<uni-easyinput :modelValue="meterResult.dCdCorrect" placeholder="" disabled />
			</uni-forms-item>

			<!-- 喷嘴的流出系数 -->
			<uni-forms-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喷嘴的流出系数" name="dCdNozell">
				<uni-easyinput :modelValue="meterResult.dCdNozell" placeholder="" disabled />
			</uni-forms-item>

			<!-- 管道内天然气流速 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道内天然气流速" name="dVelocityFlow">
				<a-yjly-inputunit
					:modelValue="meterResult.dVelocityFlow"
					:unit-type="'speed'"
					:unitOrder.sync="meterResult.dVelocityUnit"
					:show-english-only="true"
					:decimal-places="5"
					:input-disable="true"
					:width="selectWidth"
				/>
			</uni-forms-item>

			<!-- 压力损失 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="压力损失" name="dPressLost">
				<a-yjly-inputunit
					:modelValue="meterResult.dPressLost"
					:unit-type="'pressure'"
					:unitOrder.sync="meterResult.dPressLostUnit"
					:show-english-only="true"
					:decimal-places="5"
					:input-disable="true"
					:width="selectWidth"
				/>
			</uni-forms-item>

			<!-- 直径比 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="直径比" name="dBeta">
				<uni-easyinput :modelValue="meterResult.dBeta" placeholder="" disabled />
			</uni-forms-item>

			<!-- 等熵指数 -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="等熵指数" name="dKappa">
				<uni-easyinput :modelValue="meterResult.dKappa" placeholder="" disabled />
			</uni-forms-item>

			<!-- 孔板锐利度系数Bk -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板锐利度系数Bk" name="dBk">
				<uni-easyinput :modelValue="meterResult.dBk" placeholder="" disabled />
			</uni-forms-item>

			<!-- 管道粗糙度系数 Gme -->
			<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道粗糙度系数 Gme" name="dRoughNessPipe">
				<uni-easyinput :modelValue="meterResult.dRoughNessPipe" placeholder="" disabled />
			</uni-forms-item>
			</view>
		</uni-forms>
	</view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
 

// 定义 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>
/* 容器样式 */
 	.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>