<style>
     .passengerHouse{}
	 .passengerHouse>p{border-left: 3px solid #E95252; text-indent: 15px; height: 14px; font-size: 14px; margin: 20px 0 0 0; line-height: 14px; color: #000;}
	 .passengerHouseBg{width: auto; height: 237px; overflow: hidden;}
	 .passengerHouseBg>div{float: left;}
	 .passengerHouseBgLeft{width: 24px; height: 237px;background: url(../../assets/img/bg-house-left.png)no-repeat left center;}
	 .passengerHouseBgMiddle{width: auto; height: 237px;  background: #f1f1f1;}
	 .passengerHouseBgMiddle>div{float: left; width: 100px; height: 200px; margin: 22px 10px; text-align: center; background: #A47B5B; border:2px solid #5C5047; border-radius: 4px;}
	 .passengerHouseBgMiddle>div>i{color: #fff;}
	 .passengerHouseBgMiddle>div>p{width: 54px; height: 22px; line-height: 22px; background: #F7CF4B; border-radius: 4px;font-size: 12px; display: inline-block; margin: 10px 0 5px 0;}
	 .passengerHouseBgMiddle>div>span{display: inline-block; font-size: 12px; margin: 2px 2px 0; overflow: hidden; position: relative;
	  width:16px; height: 52px; line-height: 14px; text-align: center; padding: 4px; color: #fff; box-sizing: content-box;}
	 .passengerHouseBgMiddle>div>span i{display: none; position: absolute; right: 0; top:0; z-index: 5;}
	 .passengerHouseBgMiddle>div>span:hover i{display: inline-block; cursor: pointer;}
	 .passengerHouseBgRight{width: 24px; height: 237px;background: url(../../assets/img/bg-house-right.png)no-repeat left center;}
</style>
<template>
    <div  class='flexOne'>
    	<div class="passengerHouse">
    		<p>
    			<em  class="fnormal">{{$t('ground.fangjianfp')}}</em>
    			<span style="display: inline-block; width: 8px; height: 8px; background: #116799; margin: 0 5px 0 20px;"></span><span class="fz12 color000">{{$t('ground.nanxingzhanchuang')}}</span>
    			<span style="display: inline-block; width: 8px; height: 8px; background: #C62452; margin: 0 5px 0 20px;"></span><span class="fz12 color000">{{$t('ground.nvxingzhanchuang')}}</span>
    			<span style="display: inline-block; width: 8px; height: 8px; background: #11998E; margin: 0 5px 0 20px;"></span><span class="fz12 color000">{{$t('ground.bzhanchuang')}}</span>
    		</p>
    		<div class="fz14 alcenter mt20" v-show="orderHouseList.length==0">{{$t('active.ld_noData')}}</div>
    		<div class="passengerHouseBg">
    			<div class="passengerHouseBgMiddle">
    				<div v-for="(item,index) in orderHouseList">
    					<p>{{item.houseNo}}</p>
    					<div style="clear: both;"></div>
    					<i v-show="item.houseType==1" class="iconfont icon-danjian"></i>
    					<i v-show="item.houseType==2||item.houseType==5" class="iconfont icon-biaojian"></i>
    					<i v-show="item.houseType==3" class="iconfont icon-dachuang"></i>
    					<i v-show="item.houseType==4" class="iconfont icon-sanrenjian"></i>
    					<div style="clear: both;"></div>
    				    <span v-for="o in item.orderGuestHouse" v-if="o.isBed=='0'" style="background:#11998E;">
    				    	<em >{{o.userName}}</em>
    				    </span><span v-for="o in item.orderGuestHouse" v-if="o.isBed=='1'&&o.sex=='1'" style="background:#116799;">
    				    	<em >{{o.userName}}</em>
    				    </span><span v-for="o in item.orderGuestHouse" v-if="o.isBed=='1'&&o.sex=='2'" style="background:#C62452;">
    				    	<em >{{o.userName}}</em>
    				    </span>
		    		</div>
    			</div>
    		</div>
    	</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
          orderHouseList:[],
        }
    },
    methods:{
        getList(){        
        	this.apipost('sellorder_get_GetHouseDetails',{TCIDs:this.$route.query.id},res=>{
        		if(res.data.resultCode == 1) {
        			this.orderHouseList=res.data.data.orderHouseList
        		}else{
        			this.$message.error(res.data.message)
        		}
        	},err=>{})
        },
    },
    mounted(){
     this.getList()
    }
}
</script>