<template>
	<view class="container">
    <VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <camera device-position="back" flash="auto" @error="error" style="width: 100%; height: 500upx;">
        <cover-image src="@/static/images/scan-img.png" class="scan-img"></cover-image>
      </camera>
      <view class="scan-text">请将行驶证放置白色框内</view>
      <button type="primary" @click="takePhoto">识别</button>
      <view class="scan-img-box"><image mode="widthFix" class="photos-box" :src="src"></image></view>
    </view>
	</view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import request from "@/utils/request";
import config from '@/config'
import upload from '@/utils/upload'
	export default {
    components: {
      VNavigationBar
    },
		data() {
			return {
				src: "",
        imgUrl:"",
			}
		},
		methods: {
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.src = res.tempImagePath
            uni.showLoading({
              title: 'OCR自动识别中...'
            });
            //上传服务器
            upload({
              url:'/app-api/infra/file/upload',
              filePath: res.tempImagePath
            }).then((res)=>{
              this.imgUrl = config.baseImageUrl+res.data
              //识别内容
              request({
                url: '/app-api/base/user-car/vehicleLicenseOCR',
                method: 'POST',
                data: this.imgUrl,
                tenantIdFlag: false
              }).then((res)=>{
                res.data['imgUrl'] = this.imgUrl
                uni.hideLoading();
                let pages = getCurrentPages();
                let prevPage = pages[pages.length - 2];
                prevPage.setData({
                  "driveLicense": res.data,
                })
                uni.navigateBack();
                console.log(res)
              })
            })
					}
				});
			},
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style lang="less" scoped>


.container {
  box-sizing: border-box;
  height: 100%;
  background-color: #f3f5f7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .scan-img {
      opacity: 0.4;
      width: 100%;
      height: 500 upx;
    }

    .scan-text {
      font-size: 20px;
      text-align: center;
      line-height: 60 upx;
    }

    .scan-img-box{
      text-align: center;
    }
  }
}
</style>
