<template>
	<view style="width: 100%;">
		<view class="confirm-text" v-if="vinImg">
			<view>请核对VIN识别是否正确?</view>
			<view>如果有误,请修改</view>
		</view>
		<view class="confirm-text" v-else>
			<view>请正确输入17位VIN码</view>
		</view>
		<view class="vin-img" v-if="vinImg">
			<u-image :src="vinImg" width="100%" height="165"></u-image>
		</view>
		<!-- <xt-verify-code v-model="verifyCode" inputType='text' size="17" @confirm="confirm"></xt-verify-code> -->
		<view style="padding: 30rpx 60rpx;margin-top: 20rpx;">
			<u-input v-model="verifyCode" :custom-style="{fontSize:'40rpx'}" type="text" height="90" :maxlength='17' input-align="center" placeholder="请输入VIN" :border="true" />
		</view>
		<view class="confirm-button">
			<u-button @click="submitForm" :loading="loading" :custom-style="{background:'#1283d4'}" type="primary" shape="circle">确认</u-button>
		</view>
		<view class="share-list flex align_center">
			<view @click="toScan">
				<view><u-icon name="scan" size="60" color="##d5d5d5"></u-icon></view>
				<view>重新扫描</view>
			</view>
			<view v-if="verifyCode.length>=17">
				<view>
					<button open-type="share"><u-icon name="chat" size="60" color="##d5d5d5"></u-icon></button>
				</view>
				<view>分享给好友</view>
			</view>
			<view @click="toCopy">
				<view><u-icon name="file-text" size="60" color="##d5d5d5"></u-icon></view>
				<view>复制VIN</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js'
	export default {
		data() {
			return {
				loading: false,
				verifyCode: '',
				vinImg: ''
			}
		},
		computed: {
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			hasShelf(){
				return this.$store.state.vuex_storeShelf
			}
		},
		onLoad(opts) {
			this.verifyCode = opts.verifyCode || ''
			this.vinImg = opts.filePath || ''
		},
		// 分享
		onShareAppMessage(e){
			return {
			  title: '修配易码通车架号(VIN)分享',
			  path: '/pages/vinInput/share?userName='+this.userInfo.userNameCN+'&vinNo='+this.verifyCode,
			  imageUrl:'/static/share.png',
			  type: '1',
			}
		},
		methods: {
			// 重新扫描
			toScan(){
				uni.redirectTo({
					url: "/pages/scan-frame/scan-frame"
				})
			},
			// 复制
			toCopy(){
				if(this.verifyCode.length>=17){
					uni.setClipboardData({
						data: this.verifyCode,
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请输入正确的VIN码'
					})
				}
			},
			// 创建扫描记录
			creatRecord(data){
				scanVinLog({
					vinCode: this.verifyCode.toUpperCase(),
					brandName: data.brand_name,
					brandId: data.brand_id,
					modelName: data.model_name,
					modelId:data.model_id,
					modelInfo: data.text,
					seriesId:data.series_id,
					seriesName:data.series_name,
					subId:data.sub_id,
					subName:data.sub_name,
					icon: data.icon,
					year: data.year
				}).then(res => {
					console.log(res)
					uni.$emit("refashHome")
				})
			},
			// 提交并匹配车型
			submitForm(){
				if(!this.hasShelf){
					uni.showToast({
						icon:'none',
						title: '门店没有关联数字货架,无法使用此功能!'
					})
					return
				}
				const _this = this
				const vinNo = this.verifyCode.toUpperCase()
				if(vinNo.length>=17){
					this.loading = true
					getVehicleInfoByVin({
						vin:vinNo
					}).then(res => {
						if (res.status == 200&&res.data) {
							// 生成vin记录
							_this.creatRecord(res.data)
							// 打开选择配件页面
							uni.redirectTo({
								url: "/pages/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data))
							})
						} else {
							uni.showModal({
								title: '匹配错误',
								content: '此VIN码没有匹配的车型,请检查VIN码是否正确',
								showCancel: false,
								confirmText: '知道了'
							})
						}
						this.loading = false
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请输入正确的VIN码'
					})
				}
			}
		}
	}
</script>

<style lang="less">
.confirm-button{
	padding: 50rpx;
}
.confirm-text{
	text-align: center;
	padding: 60rpx 30rpx 0;
	line-height: 45rpx;
	color: #999;
}
.vin-img{
	padding: 30rpx 20rpx;
}
.share-list{
	padding: 30rpx;
	justify-content: space-around;
	> view{
		text-align: center;
		>view{
			&:first-child{
				margin: 10rpx auto;
				border:2rpx solid #aaa;
				border-radius: 200rpx;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #aaa;
				button{
					background: none;
					border: 0;
					color: #aaa;
					line-height: normal;
					margin: 0;
					padding: 0;
					&:after{
						border: 0;
					}
				}
			}
		}
	}
}
</style>