<template>
	<view class="app">
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				设备序列号
			</view>
			<image src="@/static/pagesC/ScanAdd.png" mode="" @click="scanning"></image>
		</view>
		<view class="uptext">
			<input placeholder="请输入设备序列号" v-model="data.sn"></input>
		</view>
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				设备类型
			</view>
		</view>
		<view class="types">
			<view @tap='data.deviceType=1' :class="data.deviceType==1?'type':'type2'">血压计</view>
			<view @tap='data.deviceType=2' :class="data.deviceType==2?'type':'type2'">血糖仪</view>
			<view @tap='data.deviceType=3' :class="data.deviceType==3?'type':'type2'">动态血压仪</view>
		</view>
		<view class="submit" @click="submit">
			保存
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		binding
	} from '@/api/examinationapi/add.js'
	export default {
		data() {
			return {
				data: {
					deviceType: undefined,
					identity: uni.getStorageSync('userinfo').cardNo,
					sn: '',
					bindTime: undefined, //绑定时间
					state: 1,
				}
			};
		},
		onLoad() {
			this.data.bindTime = this.timeFormat()
		},
		methods: {
			scanning() {
				const that = this
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						that.data.sn = res.result
					}
				})
			},
			timeFormat() {
				let time = parseInt(new Date().getTime() / 1000)
				time = time * 1000 //（后端为秒，则转为 毫秒再格式化）
				var x = new Date(time)
				var z = {
					y: x.getFullYear(),
					M: x.getMonth() + 1,
					d: x.getDate(),
					h: x.getHours(),
					m: x.getMinutes(),
					s: x.getSeconds(),
				}
				if (z.M < 10) {
					z.M = '0' + z.M
				}
				if (z.d < 10) {
					z.d = '0' + z.d
				}
				if (z.h < 10) {
					z.h = '0' + z.h
				}
				if (z.m < 10) {
					z.m = '0' + z.m
				}
				if (z.s < 10) {
					z.s = '0' + z.s
				}
				return z.y + '-' + z.M + '-' + z.d + ' ' + z.h + ':' + z.m + ':' + z.s
			},
			submit() {
				if (!this.data.sn) {
					this.$refs.uToast.show({
						title: '请输入设备序列号',
						type: 'error',
					})
					return
				}
				if (!this.data.deviceType) {
					this.$refs.uToast.show({
						title: '请选择设备类型',
						type: 'error',
					})
					return
				}
				binding(this.data).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '绑定成功',
							type: 'success',
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.app {
		margin-top: 40rpx;

		.submit {
			width: 60%;
			height: 98rpx;
			margin: 60rpx auto;
			background-color: #4AC4AB;
			border-radius: 10rpx;
			border: solid 0rpx #0c0c0c;
			color: #ffffff;
			text-align: center;
			line-height: 98rpx;
		}

		.types {
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			margin-top: 30rpx;
			display: flex;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #f0f1f6;
			;

			.type2 {
				margin-left: 50rpx;
				color: #999999;
				width: 144rpx;
				height: 60rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 1rpx #d0d0d0;
			}

			.type {
				margin-left: 50rpx;
				width: 144rpx;
				height: 60rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 1rpx #4AC4AB;
				color: #4AC4AB;
			}
		}


		.uptext {
			width: 100%;

			input {
				width: 580rpx;
				height: 88rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 1rpx #d0d0d0;
				text-align: center;
				font-size: 40rpx;
				margin: 40rpx auto;
			}
		}

		.title {
			display: flex;
			padding: 30rpx 0 30rpx 30rpx;
			font-size: 30rpx;

			image {
				width: 160rpx;
				height: 40rpx;
				margin-left: 40%;
			}

			.right {
				line-height: 34rpx;
				padding-left: 20rpx;
				color: #666666;
			}

			.left {
				width: 8rpx;
				height: 32rpx;
				background-color: #4AC4AB;
				border-radius: 4rpx;
			}
		}
	}
</style>