<template>
	<view style="width: 100%;">
		<view class="confirm-text">
			<view>请核对VIN识别是否正确？</view>
			<view>如果有误，请修改</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 class="confirm-button">
			<u-button @click="ok" :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>
				<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>
	export default {
		data() {
			return {
				verifyCode: '',
				vinImg: ''
			}
		},
		onLoad(opts) {
			this.verifyCode = opts.verifyCode
			this.vinImg = opts.filePath || ''
		},
		onShareAppMessage(e){
			console.log(e)
			return {
			  title: '修配一码通车架号（VIN）分享',
			  path: '/pages/vinIput/share?userId=123&vin='+this.verifyCode,
			  imageUrl:'/static/share.png',
			  type: '1',
			  success(res){
				  console.log(res)
			  },
			  fail(err){
				  console.log(err)
			  }
			}
		},
		methods: {
			toScan(){
				uni.navigateTo({
					url: "/pages/scan-frame/scan-frame"
				})
			},
			toCopy(){
				uni.setClipboardData({
					data: this.verifyCode,
				})
			},
			confirm(code){
				console.log(code)
				this.verifyCode = code
			},
			ok(){
				if(this.verifyCode==''){
					uni.showToast({
						title: "请输入VIN码",
						icon:"none"
					})
				}else{
					// 到选择配件页面
					// uni.navigateTo({
					// 	url: "/pages/vinInput/confirmVin"
					// })
				}
			}
		}
	}
</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>
