<template>
	<div>
		<back :title="titlename"></back>
		<div class="content">
			<div class="sm">
				<van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />
				<img src="../assets/user/sm.png" alt="" @click="wxScanCode()">
			</div>
			<!-- 快件查询列表 -->
			<div class="jjlist" v-for="item in resultList">
				<div class="listinfo">
					<div class="list_top" @click="goInfo(item.expressNo,item.type)">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>{{item.expressCompany}} {{item.expressNo}}</p>
								<p>{{item.recordDate}}</p>
							</div>
						</div>
						<!-- 收件 -->
            <template v-if="item.type == 1">
							<p v-if="item.status == 0" class="staus1">待签收</p>
							<p v-if="item.status == 1" class="staus1">已签收</p>
							<p v-if="item.status == 2" class="staus1">已代收</p>
							<p v-if="item.status == 3" class="staus1">拒收</p>
							<p v-if="item.status == 4" class="staus1">延迟派送</p>
              <p v-if="item.status == 5" class="staus1">无人收件</p>
              <p v-if="item.status == 6" class="staus1">重新分拣</p>
            </template>
						<!-- 寄件 -->
						<template v-if="item.type == 2">
							<p v-if="item.status == 0" class="staus2">待审核</p>
							<p v-if="item.status == 1" class="staus2">待揽件</p>
							<p v-if="item.status == 2" class="staus2">已揽件</p>
							<p v-if="item.status == 3" class="staus2">待寄出</p>
							<p v-if="item.status == 4" class="staus2">已寄出</p>
							<p v-if="item.status == 5" class="staus2">待取件</p>
							<p v-if="item.status == 6" class="staus2">已取件</p>
							<p v-if="item.status == 7" class="staus2">审核拒绝</p>
						</template>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {Toast,Dialog} from 'vant'
	export default{
		data(){
			return{
				titlename:"首页查询",
				value:"",
				expressNo:"",//快递单号
				resultList:[],
        searchType:""//1.搜索全部 2.搜索快件 3.搜索寄件
			}
		},
		created:function(){
			this.isLogin();
			this.expressNo = this.$route.query.expressNo
      this.searchType = this.$route.query.searchType
			this.value = this.expressNo
		},
		methods:{
			//微信扫码
			wxScanCode() {
				this.$http.post(this.$store.state.host + "/weixin/getWxConfig", {
						url: window.location.href.split("#")[0]
					}, {
						emulateJSON: true
					})
					.then(res => {
						//发送成功
						var timestamp = res.body.wxConfig.timestamp;
						var noncestr = res.body.wxConfig.nonceStr;
						var signature = res.body.wxConfig.signature;
						var appId = res.body.wxConfig.appId;
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							//                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: appId, // 必填，公众号的唯一标识
							timestamp: timestamp, // 必填，生成签名的时间戳
							nonceStr: noncestr, // 必填，生成签名的随机串
							signature: signature, // 必填，签名，见附录1
							jsApiList: [
								"scanQRCode",
							] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						wx.ready(()=> {
							wx.scanQRCode({
								needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
								scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
								success:(res)=> {
									var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
									// location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
									// alert(result);
									// location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
									// sessionStorage.setItem('saomiao_result',result);
									//其它网页调用二维码扫描结果：
									// var result = sessionStorage.getItem("saomiao_result");
									//result=this.expressNo
									if(result.indexOf(",") != -1){
										let result1 = res.resultStr.split(",");
										this.value = result1[result1.length-1];
									}
									this.onSearch(this.value)
									// this.getData()
								},
								error: function(res) {
									console.log(res);
								}
							});
						});
					}, res => {
						//发送失败
						Toast("网络错误!")
					})

			},

			//跳转详情
			goInfo(expressNo,type){
        //收件查询
				if(type == 1){
					this.$router.push({path:'/Kjsearchinfo',query:{expressNo:expressNo,type:type}})
				}
				//寄件查询
				if(type == 2){
					this.$router.push({path:'/Jjsearch',query:{expressNo:expressNo,type:type}})
				}
			},
			//搜索
			onSearch(val){
				this.expressNo = val
				this.getData()
			},
			//后端获取数据
			getData(){
        localStorage.getItem("userId")
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
        console.log("后端获取数据:expressNo = " + this.expressNo);
				this.$http.post(this.$store.state.host+"/solic/getExpressListByNo",{
          expressNo:this.expressNo,
          searchType:this.searchType,
          mailRoomId:localStorage.getItem('roomId'),
          userId:localStorage.getItem('userId'),
          },{emulateJSON:true})
					.then(res=>{
            if(res.body.msg == "success"){
            	//发送成功
            	this.resultList = res.body.resultList
            }else if(res.body.msg == "查无此单号"){
              Toast("查无此快递单号!")
            }
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},

		},
		mounted:function(){

		}
	}
</script>

<style scoped lang="less">
	.content{
		padding: 0.25rem .37rem;
		.sm{
			display: flex;
			margin-bottom: .2rem;
			justify-content: space-between;
			/deep/.van-search{
				width: 6.2rem;
				height: .76rem;
				border-radius: 25px;
				overflow: hidden;
				padding: 0rem;
				background-color: white;
				.van-search__content{
					background-color: white;
				}
				input{
					background-color: white;
				}
			}
			img{
				width:.4rem;
				height: .4rem;
				position: relative;
				top: .18rem;
			}
		}
		.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: .87rem;
							height: .87rem;
							position: relative;
						}

						div {
							width: 4rem;
							margin-left: .2rem;
							display: inline-block;
							line-height: 150%;
							position: relative;
							top: -.1rem;
							p:nth-of-type(1) {
								font-size: .28rem;
								color: #333;
								font-weight: bold;
							}
							p:nth-of-type(2) {
								font-size: .22rem;
							}
						}
					}
					>p {
						font-size: .23rem;
						font-weight: bold;
						display: flex;
						align-items: center;
					}
					.staus1{
						color: #f5693d;
					}
					.staus2{
						color: #3d82f5;
					}
				}
			}
		}
	}
</style>
