<template>
	<div class="app-container">
		<el-form :model="meterResult" 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="dVFlowb">
				<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-form-item>
			<el-form-item label="工况体积流量" prop="dVFlowf">
				<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-form-item>
			<el-form-item label="标况质量流量" prop="dMFlowb">
				<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-form-item>
			<el-form-item label="标况能量流量" prop="dEFlowb">
				<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-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求渐近速度系数 E" prop="dE">
				<el-input class="el-input" readonly v-model="meterResult.dE" placeholder=" " />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求相对密度系数 FG" prop="dFG">
				<el-input readonly v-model="meterResult.dFG" placeholder=" " />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求流动温度系数 FT" prop="dFT">
				<el-input readonly v-model="meterResult.dFT" placeholder="" />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求动力粘度dlnd" prop="dDViscosity">
				<el-input readonly v-model="meterResult.dDViscosity" placeholder="" />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求可膨胀系数" prop="dDExpCoefficient">
				<el-input readonly v-model="meterResult.dDExpCoefficient" placeholder="" />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道雷诺数" prop="dRnPipe">
				<el-input readonly v-model="meterResult.dRnPipe" placeholder="" />
			</el-form-item>

			<el-form-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="修正后的流出系数" prop="dCdCorrect">
				<el-input readonly v-model="meterResult.dCdCorrect" placeholder="" />
			</el-form-item>
			<el-form-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喷嘴的流出系数" prop="dCdNozell">
				<el-input readonly v-model="meterResult.dCdNozell" placeholder="" />
			</el-form-item>

			<el-form-item v-if="dMeterType === '0'" label="管道内天然气流速" prop="dVelocityFlow">
				<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-form-item>
			<el-form-item v-if="dMeterType === '0'" label="压力损失" prop="dPressLost">
				<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-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="直径比" prop="dBeta">
				<el-input readonly v-model="meterResult.dBeta" placeholder="" />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="等熵指数" prop="dKappa">
				<el-input readonly v-model="meterResult.dKappa" placeholder="" />
			</el-form-item>
			<!-- <el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板锐利度系数Bk" prop="dBk">
				<el-input readonly v-model="meterResult.dBk" placeholder="" />
			</el-form-item>
			<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道粗糙度系数 Gme" prop="dRoughNessPipe">
				<el-input readonly v-model="meterResult.dRoughNessPipe" placeholder="" />
			</el-form-item> -->
		</el-form>
	</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 {
	height: 100%;
}
.flex-form {
	display: grid;
	/* 优化后的自适应规则 */
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 10px;
}
</style>
