<template>
  <div style="width:1020px;height:428px;">
      <div class="house-detail">
    <div class="title" >
      <span style="float:left;color:#fff;margin-left:30px;">详细信息</span>
      <span style="float:right;color:#fff;cursor:pointer;" @click="$emit('close')">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div class="container">
      权利人信息

      <div v-for="(item,index) in currentHouse.qlrs" :key="index" style="width:100%;height:40px;" class="quanliren">
        <div class="cate"><el-icon :style="iconStyle"><tickets /></el-icon>权利人</div>
        <div class="value" style="width:30%;">{{item.qlrmc}}</div>
        <div class="cate"><el-icon :style="iconStyle"><tickets /></el-icon>证件号</div>
        <div class="value">{{item.zjh}}</div>
        <div class="cate"><el-icon :style="iconStyle"><tickets /></el-icon>电话</div>
        <div class="value" style="border-right:0px;width:10%;">{{item.dh}}</div>
      </div>
    
      
    <p style="margin:6px 0px;">户信息</p>
    <el-descriptions
      class="margin-top"
      :column="3"
      :size="'mini'"
      border
    >

     <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <div style="min-width:100px;"><el-icon :style="iconStyle">
                <tickets />
              </el-icon>不动产单元号
            </div>
          </div>
        </template>
        {{currentHouse.bdcdyh}}
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            层号
          </div>
        </template>
        {{currentHouse.ch}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            户号
          </div>
        </template>
        {{currentHouse.hh}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            坐落
          </div>
        </template>
        {{currentHouse.zl}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            用途名称
          </div>
        </template>
        {{currentHouse.ytmc}}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            房屋类型名称
          </div>
        </template>
        {{currentHouse.fwlxmc}}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            房屋性质
          </div>
        </template>
        {{currentHouse.fwxzmc}}
      </el-descriptions-item>


            <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            实测套内建筑
          </div>
        </template>
        {{currentHouse.sctnjzmj}}(m²)
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            实测建筑面积
          </div>
        </template>
        {{currentHouse.scjzmj}}(m²)
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            实测分摊建筑
          </div>
        </template>
        {{currentHouse.scftjzmj}}(m²)
      </el-descriptions-item>

    </el-descriptions>
    </div>
  </div>
  </div>

</template>
<script>
export default {
  name:"HouseDetail",
  props:["currentHouse"],
  watch:{
    'currentHouse':function(e){

    }
  },
  created(){
    console.log("currentHouse",this.currentHouse);
  },
  data(){
    return {

    }
  },
  methods:{

  }
}
</script>
<style scoped>
.house-detail{
  width:1000px;
  height:400px;
  padding:12px;
  background:url(/images/cim/leftbg.png);
  background-size:1026px 522px;
}

.title{
  cursor:move;
  width:1000px;height:40px;
  background:url(/images/cim/titlebg.png);
  background-repeat: no-repeat;
}

.container{
  max-height:340px;
  overflow:auto;
  color:#fff;
  font-weight:400;
  border:1px solid #0893FF;
  padding:8px;
  text-align: left;

}
td{
   color:#fff;
  font-weight:400;
  font-size:13px;
}
::v-deep .el-descriptions{

}
::v-deep .el-descriptions__body{
  background:none;
  color:#fff;
  font-weight: 400;
}
::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label{
  background:none;
  color:#fff;
  font-weight: 400;
}
::v-deep .el-button{
	padding:0px 6px;
	line-height:12px;
	font-size:12px;
}

::v-deep .el-descriptions__cell{
	color:#fff!important;
} 
::v-deep .el-descriptions__content{
	color:#fff!important;
}

::v-deep .is-bordered-content{
	color:#fff!important;
}

::v-deep .el-descriptions__content .el-descriptions__cell .is-bordered-content{
	color:#fff!important;
}
.quanliren{
  width:100%;
  height:40px;
  font-size:14px;
  line-height: 40px;
  border:1px solid #fff;
  text-indent: 12px;
  margin:6px 0px;
}
.quanliren .cate{
  width:8%;
  height:40px;
  float:left;
  text-overflow: ellipsis;
  overflow: hidden; 
  white-space: nowrap;
}
.quanliren .value{
  width:23.13%;
  height:40px;
  float:left;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
}
</style>