<template>
	<view class="result-container">
		<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }" class="scroll-area">
			<view class="form-content">
				<view class="form-grid">
					<!-- 标况体积流量m³/s -->
					<view class="form-item">
						<view class="form-label">标况体积流量m³/s</view>
						<view class="form-control">
							<a-yjly-inputunit :modelValue="meterResult.dVFlowb" :unit-type="'volumeflow'"
								v-model:unitOrder="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="6"
								:input-disable="true" :width="selectWidth"/>
						</view>
					</view>

					<!-- 工况体积流量 -->
					<view class="form-item">
						<view class="form-label">工况体积流量</view>
						<view class="form-control">
							<a-yjly-inputunit :modelValue="meterResult.dVFlowf" :unit-type="'volumeflow'"
								v-model:unitOrder="meterResult.dVFlowWorkUnit" :show-english-only="true"
								:decimal-places="6" :input-disable="true" :width="selectWidth" />
						</view>
					</view>

					<!-- 标况质量流量 -->
					<view class="form-item">
						<view class="form-label">标况质量流量</view>
						<view class="form-control">
							<a-yjly-inputunit :modelValue="meterResult.dMFlowb" :unit-type="'massflow'"
								v-model:unitOrder="meterResult.dMFlowUnit" :input-disable="true"
								:show-english-only="true" :decimal-places="6" :width="selectWidth"/>
						</view>
					</view>

					<!-- 标况能量流量 -->
					<view class="form-item">
						<view class="form-label">标况能量流量</view>
						<view class="form-control">
							<a-yjly-inputunit :modelValue="meterResult.dEFlowb" :unit-type="'energyflow'"
								v-model:unitOrder="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="6"
								:input-disable="true" :width="selectWidth"/>
						</view>
					</view>

					<!-- 求超压缩因子 E -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">超压缩因子Fz</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dFpv" placeholder=" "
								disabled />
						</view>
					</view>

					<!-- 求渐近速度系数 E -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">求渐近速度系数E</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dE" placeholder=" "
								disabled />
						</view>
					</view>

					<!-- 求相对密度系数 FG -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">求相对密度系数FG</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dFG" placeholder=" "
								disabled />
						</view>
					</view>

					<!-- 求流动温度系数 FT -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">求流动温度系数FT</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dFT" placeholder=""
								disabled />
						</view>
					</view>

					<!-- 求动力粘度dlnd -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">求动力粘度μ</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dDViscosity"
								placeholder="" disabled />
						</view>
					</view>

					<!-- 求可膨胀系数 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">求可膨胀系数ε</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dDExpCoefficient"
								placeholder="" disabled />
						</view>
					</view>

					<!-- 管道雷诺数 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">管道雷诺数ReD</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dRnPipe" placeholder=""
								disabled />
						</view>
					</view>

					<!-- 流出系数 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">流出系数C</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dCd" placeholder=""
								disabled />
						</view>
					</view>

					<!-- 修正后的流出系数 -->
					<view class="form-item" v-if="dMeterType === '3'">
						<view class="form-label">修正后的流出系数</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dCdCorrect"
								placeholder="" disabled />
						</view>
					</view>

					<!-- 喷嘴的流出系数 -->
					<view class="form-item" v-if="dMeterType === '3'">
						<view class="form-label">喷嘴的流出系数C</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dCdNozell" placeholder=""
								disabled />
						</view>
					</view>

					<!-- 管道内天然气流速 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">管道内天然气流速</view>
						<view class="form-control">
							<a-yjly-inputunit :modelValue="meterResult.dVelocityFlow" :unit-type="'speed'"
								v-model:unitOrder="meterResult.dVelocityUnit" :show-english-only="true"
								:decimal-places="5" :input-disable="true" :width="selectWidth"/>
						</view>
					</view>

					<!-- 压力损失 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">压力损失</view>
						<view class="form-control">
							<a-yjly-inputunit :modelValue="meterResult.dPressLost" :unit-type="'pressure'"
								v-model:unitOrder="meterResult.dPressLostUnit" :show-english-only="true"
								:decimal-places="5" :input-disable="true" :width="selectWidth"/>
						</view>
					</view>

					<!-- 直径比 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">直径比β</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dBeta" placeholder=""
								disabled />
						</view>
					</view>

					<!-- 等熵指数 -->
					<view class="form-item" v-if="dMeterType === '0'">
						<view class="form-label">等熵指数</view>
						<view class="form-control">
							<uni-easyinput class="input-result-class" :modelValue="meterResult.dKappa" placeholder=""
								disabled />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped>
	.result-container {
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.scroll-area {
		width: 100%;
	}

	.form-content {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.form-grid {
		display: grid;
		gap: 20rpx;
	}

	.input-result-class {
		color: #000000 !important;
		background-color: #ffffff !important;
	}

	/* 确保输入框内部的文字也是黑色 */
	.input-result-class ::v-deep .uni-easyinput__content {
		color: #000000 !important;
		background-color: #ffffff !important;
	}

	.input-result-class ::v-deep .uni-input-input {
		color: #000000 !important;
		background-color: #ffffff !important;
		-webkit-text-fill-color: #000000 !important;
		opacity: 1 !important;
	}

	.form-item {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.form-label {
		font-size: 12px;
		color: #606266;
		margin-bottom: 8rpx;
		font-weight: 300;
	}

	.form-control {
		width: 100%;
	}

	/* 移动端：2列 */
	@media screen and (max-width: 768px) {
		.form-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* 桌面：3列 */
	@media screen and (min-width: 1200px) {
		.form-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		nextTick
	} 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'
		},
		otherComHeight: {
			type: Number,
			default: 120
		},
	});

	// 定义响应式数据
	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
		}
	);
	watch(
		() => props.otherComHeight,
		(newVal) => {
			calculateScrollViewHeight(newVal)
		})
	// 定义响应式数据
	const scrollViewHeight = ref(0);

	// 获取屏幕高度并计算scroll-view高度
	const calculateScrollViewHeight = (h) => {
		try {
			// 获取系统信息
			let systemInfo = {};
			
			// #ifdef MP-WEIXIN
			// 微信小程序平台
			try {
			  // 获取窗口信息
			  const windowInfo = wx.getWindowInfo();
			  // 获取设备信息
			  const deviceInfo = wx.getDeviceInfo();
			  
			  // 将两个新API获取到的信息合并成一个对象，方便使用
			  systemInfo = {
			    ...windowInfo,
			    ...deviceInfo
			  };
			  
			  // 注意：如果你还需要获取系统设置或授权信息，可以按需添加
			  // const systemSetting = wx.getSystemSetting();
			  // const appAuthorizeSetting = wx.getAppAuthorizeSetting();
			  // systemInfo = { ...systemInfo, ...systemSetting, ...appAuthorizeSetting };
			  
			} catch (e) {
			  console.error("获取微信小程序系统信息失败:", e);
			}
			// #endif
			
			// #ifdef H5 || APP-PLUS
			// H5 或 App 平台
			try {
			  systemInfo = uni.getSystemInfoSync();
			} catch (e) {
			  console.error("获取系统信息失败:", e);
			}
			// #endif
			const screenHeight = systemInfo.windowHeight;
			// 计算scroll-view高度
			scrollViewHeight.value = screenHeight - h - 20;
		} catch (error) {
			console.error('获取系统信息失败:', error);
			// 设置默认高度
			scrollViewHeight.value = 400;
		}
	};
	// 挂载后设置 selectWidth
	onMounted(() => {
		// 在 DOM 更新后获取宽度
		selectWidth.value = props.elFormWidth;

	});
</script>