<template>
	<view>
		<uni-card>
			<view class="uni-container">

				<button type="primary" class="uni-button" size="mini" @click="clear">清零</button>
				<button type="primary" class="uni-button" size="mini" @click="copy">复制</button>
				<button type="primary" class="uni-button" size="mini" @click="paste">粘贴</button>

			</view>

			<uni-forms ref="form" label-position="top" :model="formData" err-show-type="toast">
				<view class="uni-container">
					<view class="formItem">
						<uni-forms-item name="sampleNumber" label-width='150px' label="样品编号">
							<yjly-dictItemSelect sql-condition="cyzf" @change="zfchange"></yjly-dictItemSelect>
						</uni-forms-item>
					</view>
					<view class="formItem">
						<uni-forms-item :disabled="true" name="NG_SUM" label-width='150px' label="合计">
							<uni-easyinput placeholder="合计" v-model.number="NG_SUM" trim="both"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<scroll-view scroll-y="true" :style="{height:scrollerHeight+'px'}">
					<view class="uni-container">
						<view class="formItem">
							<uni-forms-item name="NG_C1" label-width='150px' label="甲烷C1">
								<uni-easyinput placeholder="甲烷C1" v-model.number="formData.NG_C1" @change="change()"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_N2" label-width='150px' label="氮气N2">
								<uni-easyinput placeholder="氮气N2" v-model.number="formData.NG_N2"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_CO2" label-width='150px' label="二氧化碳CO2">
								<uni-easyinput placeholder="二氧化碳CO2" v-model.number="formData.NG_CO2"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_C2" label-width='150px' label="乙烷C2">
								<uni-easyinput placeholder="乙烷C2" v-model.number="formData.NG_C2"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_C3" label-width='150px' label="丙烷C3">
								<uni-easyinput placeholder="丙烷C3" v-model.number="formData.NG_C3"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_H2O" label-width='150px' label="水H2O">
								<uni-easyinput placeholder="水H2O" v-model.number="formData.NG_H2O"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_H2S" label-width='150px' label="硫化氢H2S">
								<uni-easyinput placeholder="硫化氢H2S" v-model.number="formData.NG_H2S"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_H2" label-width='150px' label="氢气H2">
								<uni-easyinput placeholder="氢气H2" v-model.number="formData.NG_H2"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_CO" label-width='150px' label="一氧化碳CO">
								<uni-easyinput placeholder="一氧化碳CO" v-model.number="formData.NG_CO"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_O2" label-width='150px' label="氧气O2">
								<uni-easyinput placeholder="氧气O2" v-model.number="formData.NG_O2"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_iC4" label-width='150px' label="异丁烷iC4">
								<uni-easyinput placeholder="异丁烷iC4" v-model.number="formData.NG_iC4"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_nC4" label-width='150px' label="正丁烷nC4">
								<uni-easyinput placeholder="正丁烷nC4" v-model.number="formData.NG_nC4"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_iC5" label-width='150px' label="异戊烷iC5">
								<uni-easyinput placeholder="异戊烷iC5" v-model.number="formData.NG_iC5"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_nC5" label-width='150px' label="正戊烷nC5">
								<uni-easyinput placeholder="正戊烷nC5" v-model.number="formData.NG_nC5"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_C6" label-width='150px' label="己烷C6">
								<uni-easyinput placeholder="己烷C6" v-model.number="formData.NG_C6"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_C7" label-width='150px' label="庚烷C7">
								<uni-easyinput placeholder="庚烷C7" v-model.number="formData.NG_C7"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_C8" label-width='150px' label="辛烷C8">
								<uni-easyinput placeholder="辛烷C8" v-model.number="formData.NG_C8"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">

							<uni-forms-item name="NG_C9" label-width='150px' label="壬烷C9">
								<uni-easyinput placeholder="壬烷C9" v-model.number="formData.NG_C9"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_C10" label-width='150px' label="癸烷C10">
								<uni-easyinput placeholder="癸烷C10" v-model.number="formData.NG_C10"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
							<uni-forms-item name="NG_He" label-width='150px' label="氦气He">
								<uni-easyinput placeholder="氦气He" v-model.number="formData.NG_He"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>


						<view class="formItem">
							<uni-forms-item name="NG_Ar" label-width='150px' label="氩气Ar">
								<uni-easyinput placeholder="氩气Ar" v-model.number="formData.NG_Ar"
									trim="both"></uni-easyinput>
							</uni-forms-item>
						</view>
						<view class="formItem">
						</view>
					</view>
				</scroll-view>

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

<script>
	// import dictItemSelect from '@/pagesPackage/components/dictItemSelect';
	import {
		validator
	} from '@/js_sdk/validator/ngTools_NGComponents.js';

	function getValidator(fields) {
		// console.log(validator)
		let result = {}
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				result[key] = validator[key]
			}
		}
		return result
	}
	export default {
		components: {
			// dictItemSelect
		},
		data() {
			let formData = {
				"NG_C1": 0,
				"NG_N2": 0,
				"NG_CO2": 0,
				"NG_C2": 0,
				"NG_C3": 0,
				"NG_H2O": 0,
				"NG_H2S": 0,
				"NG_H2": 0,
				"NG_CO": 0,
				"NG_O2": 0,
				"NG_iC4": 0,
				"NG_nC4": 0,
				"NG_iC5": 0,
				"NG_nC5": 0,
				"NG_C6": 0,
				"NG_C7": 0,
				"NG_C8": 0,
				"NG_C9": 0,
				"NG_C10": 0,
				"NG_He": 0,
				"NG_Ar": 0,

			}
			return {
				formData,
				formOptions: {},
				scrollerHeight: 0,
				NG_SUM: 0,
				Str_NG_SUM: "",
				rules: {
					...getValidator(Object.keys(formData))
				},

			}

		},
		watch: {
			formData: {
				immediate: true,
				deep: true,
				handler(val) {
					// console.log(val)
					this.sum(val)
				}
			},
		},
		 
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollerHeight = (res.windowHeight - 320)
				}
			});

			this.$refs.form.setRules(this.rules)
		},
		methods: {
			zfchange(e) {
				let data = JSON.parse(e);
				this.formData = Object.assign({}, this.formData, JSON.parse(data))
			},

			sum(val) {
				let sumZf = 0;
				let strZf = ""
				for (var item in val) {
					if (item.toString().substring(0, 2) == "NG") {
						if (val[item] != "") {
							sumZf += parseFloat(val[item]);
							strZf = strZf + val[item] + "_";
						} else {
							strZf = strZf + "0" + "_";
						}
					}
				}
				this.Str_NG_SUM = strZf.slice(0, -1);
				this.NG_SUM = sumZf.toFixed(4);
				var diff = sumZf - 100
				// console.log(diff)
				if (Math.abs(diff) < 0.0001) {

					this.$emit("input", this.Str_NG_SUM);
					this.$emit("calEnable", true);
				} else {
					uni.showToast({
						title: '组分合计不为100%!',
						icon: 'none'

					})

					this.$emit("calEnable", false);

				}




			},
			clear() {
				for (var item in this.formData) {
					if (item.toString().substring(0, 2) == "NG") {
						this.formData[item] = 0;
					}
				}
			},
			copy() {
				uni.setStorageSync("NGCopy", this.formData)


			},
			paste() {
				let data = uni.getStorageSync("NGCopy")
				this.formData = data


			},
			/**
			 * 验证表单并提交
			 */
			submit(val) {
				console.log(val)
				this.$refs.form.validate().then((res) => {
					// this.$emit("input", val);
					this.$emit("calEnable", true);
				}).catch((err) => {}).finally(() => {
					console.log(err)
					this.$emit("calEnable", false);
				})
			},

		}
	}
</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: 22%;
	      padding-right: 10px;
	    }
	}
	
	@media screen and (max-width: 640px) {
	    .formItem {
	      width: 30%;
	      padding-right: 10px;
	    }
	}
	@media screen and (max-width: 480px) {
	    .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: 0px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 80px;
		margin-right: 10px;
	}
</style>