<template>
	<view class="padding-20 background-color-fff height-100vh">
		<u-alert class="margin-bottom-20" description="此页面识别为演示数据,正式环境配置接口即可使用" type="warning" :showIcon="true"></u-alert>
		<view class="ocr">
			<cust-image-upload v-model="imageURl" :maxSize="3" :isShowList="false">
				<template>
					<image :src="picUrl" style="width: 710rpx;height: 210px;"></image>
				</template>
			</cust-image-upload>
		</view>
		<view class="content">
			{{result}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultImageUrl:'https://sancangshop.oss-cn-beijing.aliyuncs.com/frog/ocrbg.png',
				imageURl:this.defaultImageUrl,
				baseUrl:uni.$u.http.config.baseURL,
				result:'暂无识别结果，请在上方区域上传照片'
			}
		},
		computed:{
			picUrl(){
				//连拍传回来的是逗号间隔的图片路径，现在就取最后一个
				let pic = '';
				if(this.imageURl){
					let arr = this.imageURl.split(',');
					if(arr.length>0){
						pic = arr[arr.length-1];
					}else{
						return this.imageURl;
					}
				}
				//区分本地示意图和上传的图片
				if(pic.indexOf('/profile')!=-1){
					return this.baseUrl+pic;
				}else{
					console.log('走这边了吗？',this.imageURl)
					return this.defaultImageUrl;
				}
			}
		},
		watch:{
			//监听上传完成事件
			picUrl:{
				handler:function(n,o){
					this.getApi(n);
				}
			}
		},
		methods: {
			//调取接口
			getApi(url){
				/** 此处是你需要实现业务的地方，大部分识别接口主要参数就是图片路径**/
				
				this.result='棉铃虫'
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top:30rpx;
		border:1px solid #d9e4ff;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color:#d9e4ff;
		font-style: italic;
	}

</style>
