<template>
	<div>
		<back :title="titlename"></back>
		<div class="content">
			<!-- 快件查询列表 -->
			<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.expressCompany}} {{expressInfo.expressNo}}</p>
								<p>2021-09-12 10:31</p>
							</div>
						</div>
						<p class="staus1">
              <template v-if="expressInfo.signinStatus == 0">待签收</template>
              <template v-if="expressInfo.signinStatus == 1">已签收</template>
              <template v-if="expressInfo.signinStatus == 2">已代收</template>
              <template v-if="expressInfo.signinStatus == 3">拒收</template>
              <template v-if="expressInfo.signinStatus == 4">滞留件</template>
              <template v-if="expressInfo.signinStatus == 5">问题件</template>
              <!-- <template v-if="expressInfo.signinStatus == 7">转寄</template>
              <template v-if="expressInfo.signinStatus == 8">重新分拣</template>
              <template v-if="expressInfo.signinStatus == 9">已转寄</template> -->
            </p>
					</div>
				</div>
			</div>
			<div class="info">
				<p>收件人：{{expressInfo.recipient}}</p>
				<p>公司：{{expressInfo.company}}</p>
				<p>座位：{{expressInfo.sendSeat}}</p>
				<p>手机：{{expressInfo.phone}}</p>

        <template v-show="expressInfo.phoneOne != '' || expressInfo.phoneOne != NULL">
          <p>备用手机1：{{expressInfo.phoneOne}}</p>
        </template>

        <template v-show="expressInfo.phoneTwo != '' || expressInfo.phoneTwo != NULL">
          <p>备用手机2：{{expressInfo.phoneTwo}}</p>
        </template>

        <template v-show="expressInfo.phoneThree != '' || expressInfo.phoneThree != NULL">
          <p>备用手机3：{{expressInfo.phoneThree}}</p>
        </template>

				<p>智能柜：{{expressInfo.cabinet}}</p>
				<p>快件类型：{{expressInfo.expressType}}</p>
				<p>是否公司件：{{expressInfo.isCompany}}</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>3-27 17:27　　派件中，收派员【杨柳青】</p>
				</div> -->
			</div>
      <template v-if="expressInfo.signinStatus == 0">
      <!--签收-->
			<button :disabled="buttonDis" @click="showYesPopup()" style="width: 45%;background: rgb(0, 196, 184);font-size: 0.3rem;border: none;padding: 0.2rem 0rem;margin-top: 0.5rem;color: white;">签收</button>
      <van-popup v-model="showYes" position="bottom">
        <van-picker title="签收原因" show-toolbar :columns="yeslist" @confirm="onConfirmYes" @cancel="showYes=false"/>
      </van-popup>
      <!--拒收-->
      <button :disabled="buttonDis" @click="showNoPopup()" style="width: 45%;background: rgb(255, 0, 0);font-size: 0.3rem;border: none;padding: 0.2rem 0rem;margin-top: 0.5rem;color: white;margin-left: 29px;">拒签</button>
      <van-popup v-model="showNo" position="bottom">
        <van-picker title="拒收原因" show-toolbar :columns="nolist" @confirm="onConfirmNo" @cancel="showNo=false"/>
      </van-popup>
      <!--底部备注弹窗-->
      <van-popup round v-model="remarkShow" position="bottom" closeable>
        <div class="tcshow">
         <p>备注</p >
         <textarea name="" v-model="sendRemark" id="sendRemark" placeholder="请输入原因"></textarea>
         <van-button type="primary" size="large" @click="save()">确定</van-button>
        </div>
      </van-popup>

      </template>
    </div>
	</div>
</template>

<script>
	import {Toast,Dialog} from 'vant'
	export default{
		data(){
			return{
				titlename:"收件查询",
				expressNo:'',//快递单号
        signinStatus:'',//签收状态：0-待签收 1-已签收、2-已代收、3-拒收、4-延迟
				type:'',//寄件/收件
				expressInfo:{},
				buttonDis: false,
        yeslist:["本人签收","他人代收"],
        showYes: false,
        nolist:["拒收","滞留件","问题件"],
        showNo: false,
        remarkShow: false,
        sendRemark:"",
        why:"",//拒收原因
        //noPeoplelist:["号码错误","位置更换"],
        // showNoPeople: false,
        //noPlacelist:["转寄","重新分拣"],
        // showNoPlace: false
			}
		},
		created:function(){
			this.isLogin();
			this.expressNo = this.$route.query.expressNo
			this.type = this.$route.query.type
			this.getData()
		},
		methods:{
      save(){
        console.log(this.why);
       if(this.why == "拒收"){
         this.sign(3)
       }else if(this.why == "滞留件"){
         this.sign(4)
       }else if(this.why == "问题件"){
         this.sign(5)
       }
      },
      //拒收原因
      onConfirmNo(e){
      	if(e == "拒收"){
          this.remarkShow = true;
          this.why = e;
        }else if(e == "滞留件"){
          this.remarkShow = true;
          this.why = e;
        }else if(e == "问题件"){
          this.remarkShow = true;
          this.why = e;
        }
      	this.showNo = false;
      },
      //签收人员
      onConfirmYes(e){
      	if(e == "本人签收"){
          this.sign(1)
        }else{
          this.sign(2)
        }
      	this.showYes = false;
      },
      // //无人签收
      // onConfirmNoPeople(e){
      // 	if(e == "号码错误"){
      //     this.sign(5)
      //   }else{
      //     this.sign(6)
      //   }
      // 	this.showNoPeople = false;
      // },
      // //分拣错误转寄
      // onConfirmNoPlace(e){
      // 	if(e == "转寄"){
      //     this.sign(7)
      //   }else{
      //     this.sign(8)
      //   }
      // 	this.showNoPlace = false;
      // },



      //显示拒收弹窗
      showNoPopup(){
        this.showNo = true;
      },
      //显示签收弹窗
      showYesPopup(){
        this.showYes = true;
      },
      //显示无人签收弹窗
      showNoPeoplePopup(){
        this.showNoPeople = true;
      },
      //显示分拣错误转寄弹窗
      showNoPlacePopup(){
        this.showNoPlace = true;
      },



			//签收
			sign(e){
				this.buttonDis = true
				this.$http.post(this.$store.state.host+"/solic/signForExpress",{expressNo:this.expressNo,signinStatus:e,sendRemark:this.sendRemark},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							//签收成功
							Toast.success('操作成功')

							setTimeout(() => {
								this.$router.push({path:'/Sign',query:{expressNo:this.expressNo}});
								this.buttonDis = false
							}, 2000)
						}else{
							Toast.fail('操作失败')
							this.buttonDis = false
						}
				},res=>{
						//发送失败
					Toast("网络错误!")
					this.buttonDis = false
				})

			},
			//后端获取数据
			getData(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});

				this.$http.post(this.$store.state.host+"/solic/getExpressDetail",{expressNo:this.expressNo,type:this.type},{emulateJSON:true})
					.then(res=>{
						//发送成功
            console.log(res.body.msg);
            console.log(res.body.expressInfo);
						if(res.body.msg=='success'){
							this.expressInfo = res.body.expressInfo
						}
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
		},
		mounted:function(){

		}
	}
</script>

<style scoped lang="less">
  .tcshow{
    padding: .3rem;
    font-size: .26rem;
    textarea{
     width: 95%;
     padding: 2.5%;
     border:1px solid #dedede;
     border-radius: .1rem;
     margin: .3rem 0rem;
     min-height: 1.5rem;
    }
    button{
     background: #00c4b8;
     border: none;
     font-size: .26rem;
     height: .8rem;
     line-height: .8rem;
     border-radius: .1rem;
    }
   }
	.content{
		padding: 0.25rem .37rem;
		font-size: .3rem;
		.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: .24rem;
						font-weight: bold;
						display: flex;
						align-items: center;
					}
					.staus1{
						color: #f5693d;
					}
					.staus2{
						color: #3d82f5;
					}
				}
			}
		}
		.info {
			padding: .4rem;
			background: white;
			line-height: 200%;
			color: #666666;

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