<template>
	<div>
		<!-- <back :title="titlename"></back> -->
		<van-nav-bar
		  :title="titlename"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<div class="content">
			<p>收件查询</p>
			<div class="jjlist">
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>派单号 {{expressInfo.dispatchNo}}</p>
								<p><template v-if="expressInfo.expressCompany == 1">顺丰</template>
								<template v-if="expressInfo.expressCompany == 2">中通</template>
								<template v-if="expressInfo.expressCompany == 3">DHL</template>
								<template v-if="expressInfo.expressCompany == 4">EMS</template>
								<template v-if="expressInfo.expressCompany == 5">同城</template>
								<template v-if="expressInfo.expressCompany == 6">京东</template> {{expressInfo.expressNo}}</p>
								<p>{{expressInfo.recordDate}}</p>
							</div>
						</div>
						<p>
							<template v-if="expressInfo.expressStatus == 1">未派送</template>
							<template v-if="expressInfo.expressStatus == 2">已派送</template>
						</p>
					</div>
					<!-- <div class="fast">
						<p>同城急送</p>
					</div> -->
				</div>
			</div>
			<div class="info">
				<img style="width: 4rem;height: 4rem;margin: 0 auto;display: block;" id="image" :src="qrcode">
				<p>收件人：{{expressInfo.recipient}}</p>
				<p>公司：{{expressInfo.company}}</p>
				<p>座位：{{expressInfo.sendSeat}}</p>
				<p>手机：{{expressInfo.phone}}</p>
				<p>智能柜：{{expressInfo.cabinet}}</p>
				<p>快件类型：{{expressInfo.expressType}}</p>
				<p>是否私人件：
					<template v-if="expressInfo.isCompany == '否'">是</template>
					<template v-else>否</template>
				</p>
				<p>是否问题件：{{expressInfo.isProblem}}</p>
				<p>是否已派件：<template v-if="expressInfo.expressStatus == 1">否</template><template v-if="expressInfo.expressStatus == 2">是</template>
				</p>
				<p>备注：{{expressInfo.remark}}</p>
				<div class="pjinfo">
					<p>{{expressInfo.modifyDate}}　　<!-- 派件中，收派员【{{expressInfo.solicitor}}】 --></p>
				</div> 
			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcode'
	import {Toast,Dialog} from 'vant'
	export default {
		data() {
			return {
				titlename: "查快递",
				openid:'',
				id:'',
				expressInfo:{},
				qrcode:''
			}
		},
		created:function(){
			this.isLogin();
			this.openid = this.$store.state.openId
			//获取参数
			this.id = this.$route.query.id
			this.getData();
		},
		methods:{
			makeQRCode(obj) {
			    QRCode.toDataURL(obj).then(imgData => {
			        if(imgData) {
			           //console.log(imgData)
					   this.qrcode=imgData
			        }
			    });
			},
			onClickLeft(){
			  this.$router.push({path:"/Search",query:{type:2}})
			},
			getData(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
				this.$http.post(this.$store.state.host+"/sendMail/getExpressDetailById.do",{id:this.id},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.expressInfo = res.body.expressInfo
							console.log(this.expressInfo)
							this.makeQRCode(this.expressInfo.expressNo)
							//console.log(res.body)
						}
						Toast.clear()
				},res=>{
						 //发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			}	
		}
	}
</script>

<style scoped lang="less">
	.content {
		padding: .2rem .33rem;
		font-size: .3rem;
		>p{
			font-size: .3rem;
			text-align: center;
			margin-bottom: .2rem;
		}
		.info {
			padding: .4rem;
			background: white;
			line-height: 200%;
			color: #666666;

			.pjinfo {
				margin-top: .1rem;
				border-top: .01rem solid #f0efef;
				padding-top: .1rem;
			}
		}

		.jjlist {
			font-size: .3rem;
			color: #999999;

			.listinfo {
				background: white;
				padding: .33rem .33rem .2rem;
				border-radius: .05rem;
				margin-bottom: .2rem;
				position: relative;
				.list_top {
					display: flex;
					justify-content: space-between;

					.list_top_left {
						img {
							display: inline-block;
							width: .9rem;
							height: .9rem;
							position: relative;
							top: -.1rem;
						}

						div {
							width: 4rem;
							margin-left: .2rem;
							display: inline-block;
							line-height: 150%;

							p:nth-of-type(1) {
								font-size: .3rem;
								font-weight: bold;
								color: #333;
							}

							

							p:nth-of-type(3) {
								font-size: .2rem;
							}
						}
					}

					>p {
						font-size: .24rem;
						color: #f5693d;
						font-weight: bold;
					}
				}
                .fast{
				  background: url(../assets/images/status.png) no-repeat center;
				  background-size: 100% 100%;
				  color: white;
				  position: absolute;
				  bottom: 0px;
				  right: 0px;
				  width: 1rem;
				  height: .4rem;
				  text-align: center;
				  line-height: .4rem;
				  font-size: .2rem;
			  }				
				
			}
		}
	}
	
	/deep/ .van-nav-bar__content{
	    .van-nav-bar__title{
	      font-size: 16px;
	    }
	  }
	/deep/.van-icon-arrow-left::before{
	  color: #333;
	  font-size: 16px;
	}
	/deep/.van-nav-bar__text{
	  color: #333 !important;
	  font-size: 16px;
	}
</style>
