<template>
	<view class="scan-code">
		<uni-nav-bar dark :fixed="true" :border="false"
			background-color="#002648" status-bar title="扫码查看手术状态">
			<block slot="right">
				<logout></logout>
			</block>
		</uni-nav-bar>
		
		<view class="scan-code-content">
			<view class="content-text">
				<text>请扫描</text>
				<text>确认患者信息</text>
			</view>
			<view class="content-img">
				<image src="../../static/img/scan-code.png" mode=""></image>
			</view>
		</view>
		<view class="buttons" @click="scanCodeHandle">
			<uni-icons type="scan" size="30" color="#fff"></uni-icons>
			<text class="button-code-text">点击扫码</text>
		</view>
		<scan></scan>
	</view>
</template>

<script>
	import logout from '@/components/logout.vue'
	import scan from '@/components/scan.vue';
	export default {
		components: {
			scan,
			logout
		},
		data() {
			return {
				scanCodeValue: {},
				content: '',
				patientInfo:{}
			}
		},
		onShow() {
			let that = this
			uni.$off('scan') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scan', (data) => {
				//扫码成功后的回调，你可以写自己的逻辑代码在这里
				this.content = data.code
				// 二维码内容:operaId手术id
				console.log('扫码 结果：', data.code);
				uni.showLoading({
					title: '获取患者信息中'
				})
				this.getPatientInfo(data.code)
			})
		},
		methods: {
			// 确认状态
			scanCodeHandle() {
				uni.scanCode({
					// onlyFromCamera: true,
					success: (res) => {
						console.log('扫码成功',res)
						uni.showLoading({
							title: '获取患者信息中'
						})
						this.getPatientInfo(res.result)
					}
				});
			},
			// 获取患者信息
			async getPatientInfo(result) {
				// 0:等待呼叫，1:呼叫中，2:术前，3:术中，4:术后，5离开
				const res = await this.$baseAPI.request(`${this.$portAdress.pda}/${result}`)
				console.log(res);
				if(res.code===0) {
					uni.hideLoading()
					this.patientInfo = res.data
					uni.setStorageSync('patientInfo',JSON.stringify(this.patientInfo))
					if(res.data.status===0) {
						uni.showModal({
							title: '提示',
							content: '请呼叫患者后再执行',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
					if(res.data.status === 1) {
						uni.navigateTo({
							url: '/pages/safetyChecklist/beforeOperation'
						})
					}
					if(res.data.status === 2) {
						uni.showModal({
							title: '提示',
							content: '术中核查表还未填写',
							showCancel:false,
							confirmText:'返回',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
					if(res.data.status===3) {
						uni.navigateTo({
							url: '/pages/safetyChecklist/leaveOperat'
						})
					}
					if(res.data.status===4) {
						uni.showModal({
							title: '提示',
							content: '该患者已完成手术核查',
							showCancel:false,
							confirmText:'返回',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
					
				} else {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.scan-code {
		height: 100vh;
		background-color: #002648;
		display: flex;
		flex-direction: column;

		.scan-code-content {
			height: 100%;
			margin-top: 50rpx;
			background-color: #fff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			padding: 64rpx 0 0 52rpx;
			padding-left: 20rpx;

			.content-text {
				text {
					display: block;
					text-align: center;
					color: #002648;
					font-size: 40rpx;
				}

				text:nth-child(1) {
					margin-bottom: 16rpx;
				}
			}

			.content-img {
				margin-top: 98rpx;
				text-align: center;

				image {
					width: 256*2rpx;
					height: 256*2rpx;
				}
			}
		}

		.buttons {
			width: 90%;
			height: 98rpx;
			line-height: 98rpx;
			background-color: #1e79ff;
			color: #fff;
			text-align: center;
			position: fixed;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;

			.button-code-text {
				padding-left: 16rpx;
			}
		}
	}
</style>
<style lang="less">

</style>
