<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>
		<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:'#066cff'}" 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 {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js'
	export default {
		data() {
			return {
				loading: false,
				verifyCode: '',
				vinImg: ''
			}
		},
		computed: {
			...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			hasShelf(){
				return this.$store.state.vuex_storeShelf
			}
		},
		onLoad(opts) {
			this.verifyCode = opts.verifyCode || ''
			this.vinImg = opts.filePath || ''
			
			// 不是手动输入
			if(opts.type == 'carmen'){
				// 游客需要记录扫描记录
				if(this.userInfo.sysUserFlag == '0' && this.verifyCode){
					this.creatRecord(null)
				}
				// 如果识别返回空
				if(!this.verifyCode){
					uni.showToast({
						icon: 'none',
						title: 'VIN识别失败，请重新扫描或手动输入VIN'
					})
				}
			}
		},
		// 分享
		onShareAppMessage(e){
			return {
			  title: '修配易码通车架号（VIN）分享',
			  path: '/pages/vinInput/share?userName='+this.userInfo.userNameCN+'&vinNo='+this.verifyCode,
			  imageUrl:'/static/share.png',
			  type: '1',
			}
		},
		methods: {
			// 重新扫描
			toScan(){
				if(this.userInfo.sysUserFlag == '0'){
					if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
						uni.redirectTo({
							url: "/pages/scan-frame/scan-frame"
						})
					}else{
						uni.showModal({
							title: '提示',
							content: '个人用户扫描VIN仅限10次，您的次数已用完！',
							confirmText: '好的',
							showCancel: false,
							success(res) {}
						})
					}
				}else{
					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?data.brand_name:'',
					brandId: data?data.brand_id:'',
					modelName: data?data.model_name:'',
					modelId:data?data.model_id:'',
					modelInfo: data?data.text:'',
					seriesId:data?data.series_id:'',
					seriesName:data?data.series_name:'',
					subId:data?data.sub_id:'',
					subName:data?data.sub_name:'',
					icon: data?data.icon:'',
					year: data?data.year:'',
					identifyType: this.userInfo.identifyType
				}).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) {
							_this.creatRecord(_this.userInfo.sysUserFlag == '1' ? res.data : null)
							// 打开选择配件页面
							uni.redirectTo({
								url: "/pagesA/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data))+'&type=news'
							})
						} 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>
