<template>
	<view>
		<uni-card>
			<uni-forms class="uniRow" ref="form" label-position="top" :model="formData" validate-trigger="submit"
				err-show-type="toast">

				<scroll-view scroll-y="true" :style="{height:scrollerHeight+'px'}">
					<uni-row>
						<uni-col>
							<uni-tag text="GB/T 17747.2 算法" :inverted="true" type="primary"
								v-if="meterType==3"></uni-tag>
						</uni-col>
					</uni-row>
					<view class="uni-container">


						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dMrx" label-width='150px' label="分子量">
								<uni-title color="blue" type="h3" placeholder="分子量" :title="formData.dMrx"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dZb" label-width='150px' label="标况压缩因子">
								<uni-title color="blue" type="h3" placeholder="标况压缩因子" :title="formData.dZb"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dZf" label-width='150px' label="工况压缩因子">
								<uni-title color="blue" type="h3" placeholder="工况压缩因子" :title="formData.dZf"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dFpv" label-width='150px' label="超压缩系数">
								<uni-title color="blue" type="h3" placeholder="超压缩系数" :title="formData.dFpv"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
					</view>

					<uni-row>
						<uni-col>
							<uni-tag text="AGA No.10" :inverted="true" type="primary" v-if="meterType==3"></uni-tag>
						</uni-col>
					</uni-row>
					<view class="uni-container">

						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dHo" label-width='150px' label="理想气体的比焓">
								<uni-title color="blue" type="h3" placeholder="理想气体的比焓" :title="formData.dHo"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dH" label-width='150px' label="真实气体的焓">
								<uni-title color="blue" type="h3" placeholder="真实气体的焓" :title="formData.dH"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>



						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dS" label-width='150px' label="真实气体的熵">
								<uni-title color="blue" type="h3" placeholder="真实气体的熵" :title="formData.dS"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dCpi" label-width='150px' label="理想气体定压热容">
								<uni-title color="blue" type="h3" placeholder="理想气体定压热容" :title="formData.dCpi"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dCp" label-width='150px' label="定压热容">
								<uni-title color="blue" type="h3" placeholder="定压热容" :title="formData.dCp"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dCv" label-width='150px' label="定容积热容">
								<uni-title color="blue" type="h3" placeholder="定容积热容" :title="formData.dCv"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dk" label-width='150px' label="比热比">
								<uni-title color="blue" type="h3" placeholder="比热比" :title="formData.dk"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dKappa" label-width='150px' label="等熵指数">
								<uni-title color="blue" type="h3" placeholder="等熵指数" :title="formData.dKappa"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dSOS" label-width='150px' label="声速(m/s)">
								<uni-title color="blue" type="h3" placeholder="声速" :title="formData.dSOS"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==3" name="dCstar" label-width='150px' label="临界流函数">
								<uni-title color="blue" type="h3" placeholder="临界流函数" :title="formData.dCstar"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
					</view>
					<uni-row>
						<uni-col>
							<uni-tag text="GB/T 17747.2 算法" :inverted="true" type="primary"
								v-if="meterType==4"></uni-tag>
						</uni-col>
					</uni-row>
					<view class="uni-container">
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dDb" label-width='150px' label="标况摩尔密度(kg/mol)">
								<uni-title color="blue" type="h3" placeholder="标况摩尔密度" :title="formData.dDb"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dDf" label-width='150px' label="工况摩尔密度(kg/mol)">
								<uni-title color="blue" type="h3" placeholder="工况摩尔密度" :title="formData.dDf"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRhob" label-width='150px' label="标况质量密度(kg/m³)">
								<uni-title color="blue" type="h3" placeholder="标况质量密度" :title="formData.dRhob"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRhof" label-width='150px' label="工况质量密度(kg/m³)">
								<uni-title color="blue" type="h3" placeholder="工况质量密度" :title="formData.dRhof"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>



						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRD_Ideal" label-width='150px' label="理想气体的相对密度">
								<uni-title color="blue" type="h3" placeholder="理想气体的相对密度" :title="formData.dRD_Ideal"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRD_Real" label-width='150px' label="真实气体的相对密度">
								<uni-title color="blue" type="h3" placeholder="真实气体的相对密度" :title="formData.dRD_Real"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
					</view>

					<uni-row>
						<uni-col>
							<uni-tag text="GB/T 11062 算法" :inverted="true" type="primary" v-if="meterType==4"></uni-tag>

						</uni-col>
					</uni-row>
					<view class="uni-container">
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dHhvMol" label-width='150px'
								label="摩尔高位发热量(MJ/mol)">
								<uni-title color="blue" type="h3" placeholder="摩尔高位发热量" :title="formData.dHhvMol"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dLhvMol" label-width='150px'
								label="摩尔低位发热量(MJ/mol)">
								<uni-title color="blue" type="h3" placeholder="摩尔低位发热量" :title="formData.dLhvMol"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dHhvv" label-width='150px' label="体积高位发热量(MJ/m³)">
								<uni-title color="blue" type="h3" placeholder="体积高位发热量" :title="formData.dHhvv"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dLhvv" label-width='150px' label="体积低位发热量(MJ/m³)">
								<uni-title color="blue" type="h3" placeholder="体积低位发热量" :title="formData.dLhvv"
									trim="both"></uni-title>
							</uni-forms-item>

						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dHhvm" label-width='150px' label="质量高位发热量(MJ/kg)">
								<uni-title color="blue" type="h3" placeholder="质量高位发热量" :title="formData.dHhvm"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dLhvm" label-width='150px' label="质量低位发热量(MJ/kg)">
								<uni-title color="blue" type="h3" placeholder="质量低位发热量" :title="formData.dLhvm"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRhob11062" label-width='150px'
								label="标况质量密度(kg/m³)">
								<uni-title color="blue" type="h3" placeholder="标况质量密度" :title="formData.dRhob11062"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRhof11062" label-width='150px'
								label="工况质量密度(kg/m³)">
								<uni-title color="blue" type="h3" placeholder="工况质量密度" :title="formData.dRhof11062"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dRD_Ideal11062" label-width='150px'
								label="理想气体的相对密度">
								<uni-title color="blue" type="h3" placeholder="理想气体的相对密度"
									:title="formData.dRD_Ideal11062" trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">

							<uni-forms-item v-if="meterType==4" name="dRD_Real11062" label-width='150px'
								label="真实气体的相对密度">
								<uni-title color="blue" type="h3" placeholder="真实气体的相对密度"
									:title="formData.dRD_Real11062" trim="both"></uni-title>
							</uni-forms-item>
						</view>

						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dMrx" label-width='150px' label="分子量">
								<uni-title color="blue" type="h3" placeholder="分子量" :title="formData.dMrx"
									trim="both"></uni-title>
							</uni-forms-item>

						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==4" name="dWobbeIndex" label-width='150px'
								label="真实气体的沃泊指数">
								<uni-title color="blue" type="h3" placeholder="真实气体的沃泊指数" :title="formData.dWobbeIndex"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="Pc" label-width='150px' label="临界压力(MPa)">
								<uni-title color="blue" type="h3" placeholder="临界压力" :title="formData.Pc"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="TC" label-width='150px' label="临界温度(℃)">
								<uni-title color="blue" type="h3" placeholder="临界温度" :title="formData.TC"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="Bzsx" label-width='150px' label="爆炸上限%">
								<uni-title color="blue" type="h3" placeholder="爆炸上限" :title="formData.Bzsx"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="Bzxx" label-width='150px' label="爆炸下限%">
								<uni-title color="blue" type="h3" placeholder="爆炸下限" :title="formData.Bzxx"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="TotalC" label-width='150px' label="总炭含量">
								<uni-title color="blue" type="h3" placeholder="总炭含量" :title="formData.TotalC"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="C2" label-width='150px' label="C2组分含量">
								<uni-title color="blue" type="h3" placeholder="C2组分含量" :title="formData.C2"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="C2j" label-width='150px' label="C2以上组分含量">
								<uni-title color="blue" type="h3" placeholder="C2以上组分含量" :title="formData.C2j"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="C3j" label-width='150px' label="C3以上组分含量">
								<uni-title color="blue" type="h3" placeholder="C3以上组分含量" :title="formData.C3j"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">

							<uni-forms-item v-if="meterType==5" name="C4j" label-width='150px' label="C4以上组分含量">
								<uni-title color="blue" type="h3" placeholder="C4以上组分含量" :title="formData.C4j"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="C5j" label-width='150px' label="C5以上组分含量">
								<uni-title color="blue" type="h3" placeholder="C5以上组分含量" :title="formData.C5j"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="C6j" label-width='150px' label="C6以上组分含量">
								<uni-title color="blue" type="h3" placeholder="C6以上组分含量" :title="formData.C6j"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==5" name="C3C4" label-width='150px' label="C3C4组分含量">
								<uni-title color="blue" type="h3" placeholder="C3C4组分含量" :title="formData.C3C4"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>



						<view class="formItem">
							<uni-forms-item v-if="meterType==6 " name="dVCNG" label-width='150px' label="CNG标况体积(m³)">
								<uni-title color="blue" type="h3" placeholder="C6管束车CNG标况体积" :title="formData.dVCNG"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="meterType==6 " name="dMCNG" label-width='150px' label="CNG质量(kg)">
								<uni-title color="blue" type="h3" placeholder="管束车CNG标况体积" :title="formData.dMCNG"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item v-if="  meterType==7" name="dVCNG" label-width='150px' label="CNG标况体积(m³)">
								<uni-title color="blue" type="h3" placeholder="C6管束车CNG标况体积" :title="formData.dVCNG"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item v-if="  meterType==7" name="dMCNG" label-width='150px' label="CNG质量(kg)">
								<uni-title color="blue" type="h3" placeholder="管束车CNG标况体积" :title="formData.dMCNG"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>



						<view class="formItem">
							<uni-forms-item v-if="  meterType==8" name="dVLNG" label-width='150px' label="气化标况体积(m³)">
								<uni-title color="blue" type="h3" placeholder="LNG气化标况体积m³" :title="formData.dVLNG"
									trim="both"></uni-title>
							</uni-forms-item>
						</view>


					</view>

				</scroll-view>
			</uni-forms>
		</uni-card>
	</view>
</template>

<script>
	export default {

		props: {
			formData: {
				type: Object,
				default: {}
			},
			meterType: {
				type: Number,
				default: 0
			}

		},
		data() {
			return {
				formOptions: {},
				scrollerHeight: 0
			}
		},
		mounted() {
			let that = this;

			// #ifdef APP

			uni.getSystemInfo({
				success: function(res) {

					if (this.meterType == 7) {
						that.scrollerHeight = (res.windowHeight - 260)
					} else {
						that.scrollerHeight = (res.windowHeight - 200)
					}
				}
			});
			// #endif
			// #ifdef H5			

			uni.getSystemInfo({
				success: function(res) {

					if (this.meterType == 7) {
						that.scrollerHeight = (res.windowHeight - 260)
					} else {
						that.scrollerHeight = (res.windowHeight - 200)
					}
				}
			});
			// #endif
			// #ifdef  MP-WEIXIN
			wx.getSystemInfo({
				success: function(res) {

					if (this.meterType == 7) {
						that.scrollerHeight = (res.windowHeight - 260)
					} else {
						that.scrollerHeight = (res.windowHeight - 200)
					}
				}
			})
			// #endif


		},
		methods: {

			/**
			 * 验证表单并提交
			 */

		}
	}
</script>

<style>
	.uni-container {
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
	}

	@media screen and (min-width: 1024px) {
		.formItem {
			width: 18%;
			padding-right: 10px;
		}
	}

	@media screen and (max-width: 1024px) {
		.formItem {
			width: 18%;
			padding-right: 10px;
		}
	}

	@media screen and (max-width: 768px) {
		.formItem {
			width: 30%;
			padding-right: 10px;
		}
	}



	@media screen and (max-width: 640px) {
		.formItem {
			width: 45%;
			padding-right: 10px;
		}
	}

	@media screen and (max-width: 320px) {
		.formItem {
			width: 90%;
			padding-right: 10px;
		}
	}


	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
	}

	.uniRow {
		padding: 1px;
	}
</style>