<style>
	.PAL_CONT>div{float:left;margin:20px 20px 0 0;  padding:20px; font-size:12px;}
	.PAL_CONT>div.add{width:235px; height:310px; padding-top: 90px; background: #ccc; border-radius: 4px; text-align: center; cursor: pointer;}
	.PAL_CONT>div.add i{font-size: 110px; color: #999;}
    .PAL_List{width:235px; height:310px; border-radius:4px; color:#fff; background: -webkit-gradient( linear, 0% 0%,0% 100%, from(#3cbc6d), to(#11998E) ); }
    .PAL_Name{margin:auto;border-bottom:1px solid #038B6A;text-align: left; min-height: 30px;font-size:14px;font-weight: bold;}
    .PAL_phoneNum{min-width:120px;height:20px;background-color: #16A082;margin:10px 0;font-size:12px;line-height: 20px;}
    .PAL_phoneNum i{color:#28BF9B;margin-left:10px;font-size:12px;transform: scale(0.833333)}
    .PAL_comdiv{margin-bottom:10px;}
    .PAL_left{margin-right:12px;display: inline-block;width:40px;text-align: right;}
    .PAL_LeftAge{float:left;}
    .PAL_RightHeader{float:right;line-height: 30px;margin-top:-5px;}
    .PAL_hderImg{width:30px;height:30px;border-radius:50%;display: inline-block;float:left;margin-right:5px;}
    .PAL_hderImg img{width:100%;height:100%;border-radius:50%;}
    .passengerListSaleMsg{height: 30px; line-height: 30px; background: #d2d2d2;border-radius: 4px; padding: 0 10px 0 20px;}
    .passengerListSaleMsg>span{color: #333; font-weight: bold; margin-right: 5px; display: inline-block; border-right: 1px dashed #fff; padding-right: 10px;}
    .passengerListSaleMsg>span:last-child{border-right: none;}
    
</style>
<template>
    <div  class='flexOne'>
        <div class='query-box'>
			<ul>
				<li>
                  <div class="passengerListSaleMsg">
                  	订单号：<span>{{data.VoId}}</span>
                  	业务员：<span>{{data.EmName}}</span>
                  	人数：<span>{{data.PeopleNum}}</span>
                  </div>
                </li>             
				<li>
                </li>
			</ul>
		</div>
		  
		  <div class="PAL_CONT">
	            <div class="PAL_List" v-for="(item,index) in list" :draggable="item.isDrag" @dragstart="drag(item)" :key='index'>
	                <div class="PAL_Name">
	                	{{item.SurName}}{{item.Name}}/{{item.ESurName}}{{item.EName}}
	                </div>
	                <div class="PAL_phoneNum">
	                    <i class="iconfont icon-dianhua"></i>
	                    {{item.MobilePhone}}
	                </div>
	                <div class="PAL_comdiv">
	                    <span class="PAL_left">护照号</span>{{item.PassportNo}}
	                </div>
	                <div class="PAL_comdiv">
	                    <span class="PAL_left">签发地</span>{{item.PassportAddress}}
	                </div>
	                <div class="PAL_comdiv">
	                    <span class="PAL_left">出生地</span>{{item.BirthdayAddress}}
	                </div>
	                <div class="PAL_comdiv">
	                    <span class="PAL_left">有效期</span>{{item.PassportExpiry}}
	                </div>
	                <div class="PAL_comdiv">
	                    <span class="PAL_left">身份证</span>{{item.IdCard}}
	                </div>
	                <div class="PAL_comdiv">
	                    <span class="PAL_left">性别</span>{{item.Sex=='1'?'男':'女'}}
	                </div>
	                <div class="PAL_comdiv clearfix">
	                    <div class="PAL_LeftAge">
	                        <span class="PAL_left">年龄</span>{{item.Age}}
	                    </div>
						<div class="PAL_RightHeader" style="margin-left: 10px;">
							<i class="iconfont icon-shanchu" @click="pal_del(item)"></i>
						</div>
	                    <div class="PAL_RightHeader">
	                        <i class="iconfont icon-bianji-smal" @click="goUrl('VisaAddGuest',0,data.VoId,item.Id,data.VisaPlanId)"></i>
	                    </div>
	                </div>
	            </div>
	            
	            <div v-show="list.length<data.PeopleNum" class="add" @click="goUrl('VisaAddGuest',0,data.VoId,0,data.VisaPlanId)">
	            	<i class="el-icon-plus"></i>
	            	<br/>
	            	添加名单
	            </div>
	          
            </div>
            
    </div>
</template>
<script>
export default {
    data(){
        return{
          data:{},
          list:[],
        }
    },
 
    methods:{
		pal_del: function (item) {
			this.$confirm('是否删除该旅客?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.apipost('sellorder_post_DelTravelGuestInfo',{GuestId: item.Id},res=>{
					if(res.data.resultCode == 1) {
						this.$message.success('删除成功！')
						this.getList()
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
        	})
		},
       goUrl(path,id,orderId,guestId,VisaPlanId){
            this.$router.push({name: path,query:{'VisaPlanId':VisaPlanId,"TCID":id,"orderId":orderId,'guestId':guestId}});
        },
        getList(){        
        	this.apipost('dmc_get_visa_GetVisaGuestList',{voId:this.$route.query.id},res=>{
        		if(res.data.resultCode == 1) {
        			console.log(res.data.data)
        			this.data=res.data.data
        			this.list=res.data.data.GuestList
        		}else{
        			this.$message.error(res.data.message)
        		}
        	},err=>{})
        },
    },
    mounted(){
     this.getList()
     this.getAccessToken() 
     this.TNumber=this.$route.query.tcmun
  
    }
}
</script>