<template>
	<view class="page-wraper">
		<view class="page-header flex"
			style="font-size: 35rpx; padding-left: 20rpx; padding-top: 20rpx; flex-direction: column;">
			<view class="flex u-col-center space-between">
				<view class="">
					设备编号 : {{deviceCode}}
					<text v-if="deviceName!=''">({{deviceName}})</text>

				</view>
				<view class="">
					<button type="primary" size="mini" @click="openScanPopup">扫描</button>
				</view>
			</view>
			<view class="" style="width: 100%;background-color: gray;height: 2rpx;" />

		</view>
		<view class="page-main">
			<scroll-view scroll-y="true" class="page-main-scroll" >
				<view style="padding-bottom: 80rpx;">
					<customerFrom ref="customerFrom" :formData="formData"> </customerFrom>
				</view>
			</scroll-view>
		</view>
		<view class="page-footer">
			<view class="uni-flex u-col-center space-between padding_10"
				style="background-color:ghostwhite; width: 100%; ">
				<view class="">
					<button class="btn_single_reset" hover-class="btn_single_after" @click="reset">重置</button>
				</view>
				<view class=" uni-flex uni-row">
					<button class="btn_single_commit" hover-class="btn_commit_after" @click="submit">提交</button>
				</view>
			</view>
		</view>
		<winScanNormal ref="scanPopup" title="设备编号" @getResult='getScanResult'></winScanNormal>
	</view>


</template>

<script>
	import customerFrom from "@/mycomponents/form/customerFrom.vue"
	import winScanNormal from "@/mycomponents/scan/winScanNormal.vue"

	export default {
		components: {
			customerFrom,
			winScanNormal
		},
		data() {
			return {
				deviceCode: "",
				deviceName: "",
				formData: [{
						type: "inputAndSelect",
						position: "PB",
						content: "检查各个管路及接头",
						methond: "目视野无液体渗出",
						placeholder: "请输入点检状态",
						name: '',
						value: "",
					},
					{
						type: "inputAndSelect",
						position: "PB",
						content: "电机检查",
						methond: "倾听无异响",
						placeholder: "请输入点检状态2",
						name: '',
						value: "",
					},
					{
						type: "inputAndSelect",
						position: "PB",
						content: "检查气源气压",
						methond: "倾听无异响",
						placeholder: "请输入点检状态",
						name: '',
						value: "",
					},
					{
						type: "inputRange",
						position: "PB",
						content: "检查气袋气压",
						methond: "压力表示数范围2.5bar-4.5bar",
						inputLow:{
							name: "",
							value: "",
							placeholder: "请输入最低压力",
							lower:"2.5",
							upper:"4.5"
						},
						inputHigh:{
							name: "",
							value: "",
							placeholder: "请输入最高压力",
							lower:"2.5",
							upper:"4.5"
						}
					},
					{
						type: "select",
						content: "选择班组",
						placeholder: "请选择班组",
						name: '',
						value: "",
					}
				],


			}
		},
		computed: {},
		onLoad() {},
		onReady() {

		},
		methods: {
			getScanResult(result) {
				this.deviceCode = result;
				this.deviceName = "自配料系统"
				console.log(result)
				this.reset();
				this.closeScanPopup();
			},
			submit() {
				this.$refs.customerFrom.submit(callBack => {
					console.log("提交", JSON.stringify(callBack))

				})
			},
			reset() {
				this.$refs.customerFrom.reset()
			},
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},

			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},

		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>