<template>
	<view class="share-body">
		<view class="share-head">
			<u-image src="@/static/def_personal_avatar.png" width='750' height="253"></u-image>
		</view>
		<view class="share-info">
			<view class="userinfo">
				<view>
					好友 {{userName}}
				</view>
				<view>给您分享了一个车架号（VIN）</view>
			</view>
			<view class="carinfo flex flex_column align_center">
				<view>
					<u-image shape="circle" :src="carInfo.icon||'@/static/def_imgs.png'" width='150' height="150"></u-image>
				</view>
				<view>VIN：{{carInfo.vinNumber}}</view>
				<view>{{carInfo.modelLabel}}</view>
			</view>
			<view class="cbutton flex align_center justify_between">
				<u-button @click="copyVin" shape="circle">复制VIN</u-button>
				<u-button @click="copyCar" shape="circle">复制车型</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getVehicleInfoByVin } from '@/api/car.js'
	export default {
		data() {
			return {
				carInfo: null,
				userName: null,
				vinNo: ''
			}
		},
		onShareAppMessage(){},
		onLoad() {
			this.vinNo = opts.vinNo
			this.userName = opts.userName || ''
		},
		methods: {
			// 复制vin
			copyVin(){
				uni.setClipboardData({
					data: this.vinNo||'',
				})
			},
			// 复制车型
			copyCar(){
				uni.setClipboardData({
					data: this.carInfo.modelLabel||'',
				})
			},
			getInfo(){
				getVehicleInfoByVin({
					vin:this.vinNo
				}).then(res => {
					if (res.status == 200&&res.data) {
						 this.carInfo = res.data
					} else {
						uni.showModal({
							title: '匹配错误',
							content: '此VIN码没有匹配的车型，请检查VIN码是否正确',
							showCancel: false,
							confirmText: '知道了',
							success() {
								uni.reLaunch({
									url: "/pages/index/index"
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
.share-info{
	background-image: linear-gradient(#bceafa 0%,#ffffff 60%);
	padding: 30rpx;
	text-align: center;
	.userinfo{
		padding: 30rpx;
		>view{
			padding: 10rpx 0;
		}
	}
	.carinfo{
		padding: 30rpx;
		>view{
			padding: 15rpx 0;
		}
	}
	.cbutton{
		padding: 30rpx;
		button{
			width: 260rpx;
		}
	}
}
</style>
