<template>
	<view class="share-body">
		<view class="share-head">
			<view class="back-icon" @click="toHome">
				<u-icon name="home"></u-icon>
				<text>首页</text>
			</view>
			<u-image src="@/static/share1.jpg" width='750' height="253"></u-image>
		</view>
		<view class="share-info">
			<view class="userinfo">
				<view>
					好友 <text v-if="userName">{{userName||''}}</text>
				</view>
				<view>给您分享了一个车架号（VIN）</view>
			</view>
			<view class="carinfo flex flex_column align_center">
				<view>
					<u-image shape="circle" :src="carInfo?carInfo.icon : '@/static/def_imgs.png'" width='150' height="150"></u-image>
				</view>
				<view>VIN：{{vinNo}}</view>
				<view>{{carInfo?carInfo.text:'暂无匹配车型'}}</view>
			</view>
			<view class="cbutton flex align_center justify_center">
				<u-button @click="copyVin" style="margin: 0 10rpx;" v-if="vinNo" shape="circle">复制VIN</u-button>
				<u-button @click="copyCar" style="margin: 0 10rpx;" v-if="carInfo&&carInfo.text" 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(opts) {
			this.vinNo = opts.vinNo
			this.userName = (opts.userName == 'undefined' || !opts.userName) ? '' : opts.userName
			this.getInfo()
		},
		methods: {
			toHome(){
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			// 复制vin
			copyVin(){
				uni.setClipboardData({
					data: this.vinNo||'',
				})
			},
			// 复制车型
			copyCar(){
				uni.setClipboardData({
					data: this.carInfo.text||'',
				})
			},
			getInfo(){
				getVehicleInfoByVin({
					vin:this.vinNo
				}).then(res => {
					if (res.status == 200&&res.data) {
						 this.carInfo = res.data
						 this.carInfo.icon = this.carInfo.icon ? 'https:'+this.carInfo.icon : ''
					} else {
						uni.showModal({
							title: '匹配错误',
							content: '此VIN码没有匹配的车型，请检查VIN码是否正确',
							showCancel: false,
							confirmText: '知道了',
							success() {
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
page{
	background-color: #ffffff;
}
.share-head{
	position: relative;
	.back-icon{
		position: absolute;
		left: 30rpx;
		top: 90rpx;
		color: #333;
		z-index: 10000;
	}
}
.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>
