<template>
	<view class="pages flex flex_column" v-if="detail">
		<u-read-more toggle close-text="展开全部">
			<view class="uuid-list">
				<view>
					<view class="flex align_center">
						<view class="uuid-info">
							<view><text>产品名称：</text>{{detail.productName}}</view>
							<view style="margin-top: 0.2rem;"><text>产品编码：</text>{{detail.productCode}}</view>
						</view>
						<view v-if="detail.productMsg" class="uuid-img" @click="viewPic(detail.productMsg)">
							<image :src="detail.productMsg"></image>
						</view>
					</view>
					<view class="uuid-info" style="width: 100%;">
						<view class="uuid" style="margin-top: 0.2rem;"><text>唯一码：</text>{{detail.traceCode}}</view>
						<view class="uuid"><view style="display: inline-block;color: #000;" @click.stop="showTip">质保时间<u-icon size="30" color="#ff8100" name="question-circle-fill"></u-icon>：</view>{{detail.warrantyStartDate.split(' ')[0]}}至{{detail.warrantyEndDate.split(' ')[0]}}</view>
					</view>
					<view class="state" :class="detail.state"></view>
				</view>
			</view>
		</u-read-more>
		<view class="forms">
			<view class="forms-tits">门店信息</view>
			<view class="flex align_center">
				<view class="labes">门店名称:</view>
				<view class="inputs">{{detail.storeName||'--'}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">姓名:</view>
				<view class="inputs">{{detail.storeManager||'--'}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">电话:</view>
				<view class="inputs">{{detail.storeTele?detail.storeTele+'/':''}}{{detail.storeMobile||"--"}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">汽配经销商:</view>
				<view class="inputs">{{detail.dealerName||'--'}}</view>
			</view>
		</view>
		<view class="forms">
			<view class="forms-tits">车辆信息</view>
			<view class="flex align_center">
				<view class="labes">车辆品牌:</view>
				<view class="inputs">{{detail.carBrand||'--'}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">车型:</view>
				<view class="inputs">{{detail.carModel||'--'}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">里程数:</view>
				<view class="inputs">{{detail.mileage}}KM</view>
			</view>
			<view class="flex align_center">
				<view class="labes">车牌号:</view>
				<view class="inputs">{{detail.vehicleNumber||'--'}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">客户姓名:</view>
				<view class="inputs">{{detail.customName||'--'}}</view>
			</view>
			<view class="flex align_center">
				<view class="labes">手机号码:</view>
				<view class="inputs">{{detail.customMobile||'--'}}</view>
			</view>
		</view>
		<view class="buttons flex align_center">
			<u-button type="primary" @click="shareCode">保存二维码分享给客户</u-button>
		</view>
	</view>
</template>

<script>
	import { getWarrantyDetail } from "@/api/trace"
	import { sharePic } from "@/libs/tools.js"
	export default {
		data() {
			return {
				detail: null,
				id: ''
			}
		},
		onLoad(opts) {
			this.id = opts.id
			this.getDetail()
		},
		methods: {
			viewPic(img){
				uni.previewImage({
					urls: [img]
				})
			},
			showTip(){
				uni.showModal({
					title: "提示",
					content: "使用超过3年或者行驶超过5万公里则不在质保期内。",
					showCancel: false,
					confirmText: "知道了"
				})
			},
			getDetail(){
				uni.showLoading({
					mask:true,
					title: "正在查询..."
				})
				getWarrantyDetail({id: this.id}).then(res => {
					this.detail = res.data
					uni.hideLoading()
				})
			},
			shareCode(){
				sharePic()
			}
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	background: #f8f8f8;
	padding-bottom: 7rem;
	overflow: auto;
	.uuid-list{
		background: #fff;
		text-indent: 0;
		line-height: normal;
		font-size: 28rpx;
		> view{
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding: 0.6rem 1rem;
			position: relative;
		}
		.state{
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center center;
			position: absolute;
			width: 4.5rem;
			height: 4.5rem;
			z-index: 1000;
			bottom: 0.5rem;
			right: 1rem;
		}
		.RUN{
			background-image: url(/pagesA/static/inhand.png);
		}
		.END{
			background-image: url(/pagesA/static/outof.png);
		}
		color: #666;
		.uuid-info{
			flex-grow: 1;
			line-height: 1.5rem;
			width: 50%;
			> view{
				color: #666;
				> text{
					color: #000;
					width: 70px;
					float: left;
				}
			}
		}
		.uuid-img{
			width: 6rem;
			height: 6rem;
			border: 1px solid #eee;
			overflow: hidden;
			display: flex;
			align-items: center;
			margin-left: 0.5rem;
			image {
				max-width: 100%;
				max-height: 100%;
				background: #eaeaea;
			}
		}
	}
	.buttons{
		padding: 1rem 2rem 2rem;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 10000;
		border-top: 1px solid #eee;
		justify-content: space-around;
		/deep/ .u-btn{
			width: 15rem;
		}
	}
}
.forms{
	background: #fff;
	margin-top: 0.5rem;
	.forms-tits{
		font-weight: bold;
		color: #333;
	}
	> view{
		border-bottom: 1px solid #eee;
		padding: 0.6rem 1rem;
	}
	.labes{
		width: 6rem;
		padding-right: 0.6rem;
		text{
			color: red;
			margin-right: 5px;
		}
	}
	.inputs{
		flex-grow: 1;
	}
}
</style>
