<template>
	<view class="content">
		<image class="logo" src="/static/img/logo.png"></image>
		<view class="text-area" @click="codeClick">
			<text class="title">{{title}}</text>
		</view>
		<view class="input-text">
			<input type="text" :value="inputValue" placeholder="扫码内容"/>
			<!-- <input focus :adjust-position='false'  class="uni-input" @confirm="search" confirm-type="search" v-model="nvalue" :selection-start="50" :selection-end="-50" placeholder-class='ddd' placeholder="外设扫描" /> -->
		</view>
		<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit" :loadMake="loadMake" :lv="lv" :usingComponents="true"
		 :showLoading="true" loadingText="二维码生成中" @result="qrR" />
	</view>
</template>

<script>
	import tkiQrcode from "../../components/tki-qrcode/qrcode.js"
	export default {
		data() {
			return {
				title: '点击扫码',
				inputValue:'',
				val: '/pages/pda-flow/index?eyeType=025&operaName=269&patientCentreId=269&patientIdNumber=269', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onLoad() {
			
		},
		methods: {
			codeClick(){
				uni.scanCode({
				    onlyFromCamera: true,
				    success: (res)=> {
						uni.navigateTo({
							url:res.result
						});
						this.inputValue = res.result
				    }
				});
			},
			qrR(res) {
				this.src = res
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 150rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	uni-input{
		border: 1rpx solid #ccc;
		width: 550rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.uni-input-placeholder {
		color: #c2c2c7;
	}
	.uni-input-placeholder,.uni-input-input {
		padding-left: 10px;
	}
	
</style>
