<template>
	<view class="pages flex flex_column" :style="{paddingBottom:showCarKeyborde?'40vh':'6rem'}">
		<uniNavBar title="创建质保单-车辆信息" statusBar :shadow="false" fixed @click-left="toBack"></uniNavBar>
		<u-read-more toggle close-text="展开全部">
			<view class="uuid-list">
				<view class="flex align_center" v-for="item in uuid" :key="item.id">
					<view class="uuid-info">
						<view><text>产品名称：</text>{{item.productName}}</view>
						<view><text>产品编码：</text>{{item.productCode}}</view>
						<view class="uuid" style="margin-top: 0.2rem;"><text>唯一码：</text>{{item.traceCode}}</view>
					</view>
					<view v-if="item.productMsg" class="uuid-img" @click="viewImg(item.productMsg)">
						<image :src="item.productMsg"></image>
					</view>
				</view>
			</view>
		</u-read-more>
		<view class="forms">
			<view class="forms-tits">车辆信息</view>
			<view class="flex align_center">
				<view class="labes"><text>*</text>扫描VIN码:</view>
				<view class="inputs"><image style="width: 100%;height: 35px;background: #eaeaea;" :src="tempImg"></image></view>
				<view class="btns" @click="openCamera"><image src="../../static/tab/tab_scan_normal.png"></image></view>
			</view>
			<view class="flex align_center">
				<view class="labes"><text>*</text>识别VIN码:</view>
				<view class="inputs"><u-input :focus="focusInput" @focus="hideCarinput" @blur="getCarInfo" v-model="form.vin" maxlength="17" border clearable type="text" placeholder="请输入VIN码"></u-input></view>
			</view>
			<view class="flex align_center">
				<view class="labes" style="width: 4.5rem;"><text>*</text>里程数:</view>
				<view class="inputs"><u-input v-model="form.mileage" @focus="hideCarinput" type="number" border maxlength="99999999" clearable placeholder="请输入里程数"></u-input></view>
				<view class="btns">KM</view>
			</view>
			<view class="flex align_center">
				<view class="labes" style="width: 4.5rem;">车牌号:</view>
				<view class="inputs">
					<car-number-input ref="carInput" @numberInputResult="vehicleNumberResult" @show="showCarInput" :defaultStr="form.vehicleNumber"></car-number-input>
				</view>
			</view>
		</view>
		 
		<view class="buttons flex align_center">
			<u-button type="default" @click="toBack">上一步</u-button>
			<u-button type="primary" :loading="loading" @click="saveForm">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import { getVehicleInfoByVin } from '@/api/car'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				tempImg: '',
				form:{
					vin: '',
					mileage: '',
					vehicleNumber: '',
					carBrand: '',
					carModel: '',
					// icon:'',
					// year:'',
					// text:''
				},
				uuid: [],
				focusInput: false,
				loading: false,
				showCarKeyborde: false
			}
		},
		 
		onUnload() {
			this.$store.state.vuex_uuidTempData.carInfo = this.form
		},
		onLoad() {
			const tempData = this.$store.state.vuex_uuidTempData
			this.uuid = tempData&&tempData.traceCodeList ? tempData.traceCodeList : []
			this.form = Object.assign(this.form,tempData&&tempData.carInfo ? tempData.carInfo : {})
		},
		onShow() {
			const ret = this.$store.state.vuex_tempData
			if(ret&&ret.retCode){
				this.tempImg = ret.filePath
				this.form.vin = ret.retCode
				if(ret.retCode){
					this.getCarInfo()
				}
			}
			this.focusInput = ret&&ret=="inputCode"
		},
		onHide() {
			this.tempImg = ''
			this.$store.state.vuex_tempData = null
		},
		methods: {
			toBack(){
				uni.redirectTo({
					url: "/pagesA/qualityPolicy/creatOrder"
				})
			},
			viewImg(img){
				uni.previewImage({
					urls: [img]
				})
			},
			hideCarinput(){
				this.$refs.carInput.showOrHidePop(-1)
			},
			showCarInput(v){
				this.showCarKeyborde = v
			},
			vehicleNumberResult(e){
				this.form.vehicleNumber = e
			},
			openCamera(){
				uni.navigateTo({
					url: "/pages/scan-frame/scan-frame?pageType=UUID"
				})
			},
			//获取车辆信息
			async getCarInfo(){
				this.loading = true
				const ret = await getVehicleInfoByVin({vin: this.form.vin})
				if(ret.data){
					this.form.carBrand = ret.data.brand_name
					this.form.carModel = ret.data.model_name
					// this.form.icon = ret.data.icon
					// this.form.year = ret.data.year
					// this.form.text = ret.data.text
				}else{
					uni.showToast({
						icon: 'none',
						title: ret.message
					})
				}
				this.loading = false
			},
			saveForm(){
				if(this.form.vin == ''){
					uni.showToast({
						icon: 'none',
						title: '请扫描或手动输入VIN码'
					})
					return
				}
				if(this.form.mileage == ''){
					uni.showToast({
						icon: 'none',
						title: '请输入里程数'
					})
					return
				}
				if(this.form.vehicleNumber.length>0 && this.form.vehicleNumber.length < 7){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的车牌号码'
					})
					return
				}
				
				this.$store.state.vuex_uuidTempData.carInfo = this.form
				uni.redirectTo({
					url: "/pagesA/qualityPolicy/creatCustomInfo"
				})
			}
		}
	}
</script>

<style lang="less">
.pages{
	background: #f8f8f8;
	padding-bottom: 6rem;
	overflow: auto;
	.uuid-list{
		background: #fff;
		text-indent: 0;
		line-height: normal;
		font-size: 28rpx;
		> view{
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding: 0.6rem 1rem;
		}
		color: #666;
		.uuid-info{
			flex-grow: 1;
			line-height: 1.5rem;
			width: 50%;
			> view{
				color: #666;
				text{
					color: #000;
					width: 70px;
					float: left;
				}
			}
		}
		.uuid-img{
			width: 6rem;
			height: 6rem;
			border: 1px solid #eee;
			overflow: hidden;
			display: flex;
			align-items: center;
			margin-left: 0.5rem;
			image {
				max-width: 100%;
				max-height: 100%;
				background: #eaeaea;
			}
		}
		margin-bottom: 0.5rem;
	}
	.buttons{
		padding: 1rem 2rem 2rem;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 90;
		border-top: 1px solid #eee;
		justify-content: space-around;
		/deep/ .u-btn{
			width: 7rem;
		}
	}
}
.forms{
	background: #fff;
	.forms-tits{
		font-weight: bold;
		color: #333;
	}
	> view{
		border-bottom: 1px solid #eee;
		padding: 0.6rem 1rem;
	}
	.labes{
		width: 6rem;
		text-align: right;
		padding-right: 0.6rem;
		text{
			color: red;
			margin-right: 5px;
		}
	}
	.inputs{
		flex-grow: 1;
	}
	.btns{
		width: 3rem;
		text-align: center;
		image{
			width: 1.6rem;
			height: 1.6rem;
		}
	}
}
</style>
