<template>
  <div style="width:600px;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"  v-loading="isLoading">
      <el-descriptions
        class="margin-top"
        :column="2"
        :size="'mini'"
        border
        >
         <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              不动产单元号
            </div>
          </template>
          <div style="font-size:10px!important;">
            {{buildBaseInfo.bdcdyh}}
          </div>
          <!-- <span v-for="(item,index) in currentHouse.qlrs" :key="index">
          <span v-show="index == 0">{{item.bdcqzh}}</span>
          </span> -->
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              项目名称
            </div>
          </template>
          {{buildBaseInfo.xmmc}}
          <!-- <span v-for="(item,index) in currentHouse.qlrs" :key="index">
          <span v-show="index == 0">{{item.bdcqzh}}</span>
          </span> -->
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              建筑物名称
            </div>
          </template>
        <!-- <div style="max-width:240px">
            <span v-for="(item,index) in currentHouse.qlrs" :key="index">
            {{item.qlrmc}}<span>、</span>
            </span>
        </div> -->
        {{buildBaseInfo.jzwmc}}
        </el-descriptions-item>

      
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              幢占地面积
            </div>
          </template>
        {{buildBaseInfo.zzdmj}}平方米
        </el-descriptions-item>

         <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              总套数
            </div>
          </template>
        {{buildBaseInfo.zts}}套
        </el-descriptions-item>

         <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              竣工日期
            </div>
          </template>
        {{buildBaseInfo.jgrq}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              实际用途
            </div>
          </template>
        {{buildBaseInfo.ytmc}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              规划用途
            </div>
          </template>
          <!-- {{buildBaseInfo.ghyt}} -->
          {{useTo}}
        </el-descriptions-item>
      

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              总层数
            </div>
          </template>
          {{buildBaseInfo.zcs}}层
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              地上层数
            </div>
          </template>
          {{buildBaseInfo.dscs}}层
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              地下层数
            </div>
          </template>
          {{buildBaseInfo.dxcs}}层
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <tickets />
              </el-icon>
              房屋结构
            </div>
          </template>
          {{houseStructure[buildBaseInfo.fwjg]}}
        </el-descriptions-item>
      </el-descriptions>
      <p style="text-align:right;padding:15px 0px;"> 
        <el-button size="small" type="primary" @click="getBuildInfo" v-if="buildBaseInfo.bdcdyh">查看房屋信息</el-button>
      </p>
      </div>
    </div>
    
  </div>

</template>
<script>
import { postMethodCommon } from '../../../api/common'

export default {
  name:"HouseDetail",
  props:["BuildBaseInfoId"],
  data(){
    return {
      buildBaseInfo:{},
      useList:[
        {id:10,value:"住宅"},
        {id:11,value:"成套住宅"},
        {id:111,value:"别墅"},
        {id:112,value:"高档公寓"} ,
        {id:12,value:"非成套住宅"} ,{id:13,value:"集体宿舍"} ,{id:20,value:"工业、交通、仓储"} ,{id:21,value:"工业"},{id:22,value:"公共设施"},{id:23,value :"铁路"},{id:24,value:"民航"},{id:25 ,value:"航运"},{id:26,value: "公共运输"},{id:27,value: "仓储"},{id:30,value: "商业、金融、信息"},{id:31,value: "商业服务"},{id:32,value:"经营"},{id:33,value:"旅游"}, {id:34 ,value:"金融保险"}, {id:35,value :"电讯信息"}, {id:40,value :"教育、医疗、卫生、科研"} ,{id:41,value: "教育"} ,{id:42,value: "zz"} ,{id:50,value: "文化、娱乐、体育"} ,{id:51,value: "文化"} ,{id:52,value: "新闻"}, {id:53,value: "娱乐"} ,{id:54,value: "园林绿化"}, {id:55,value: "体育"} ,{id:60,value: "办公"}, {id:70,value: "军事"}, {id:80,value: "其它"} ,{id:81,value: "涉外"}, {id:82,value: "宗教"} ,{id:83,value: "监狱"}, {id:84,value: "物管用房"},{id:85,value: "车库/车位"}
      ],
      houseStructure:["钢结构","钢和钢筋混凝土结构","钢筋混凝土结构","混合结构","砖木结构","其它结构"],
      useTo:null,
    }
  },
  components:{
    
  },
  created(){
    // this.getBuildBaseInfo();
  },
  computed:{
  
  },
  watch:{
    'BuildBaseInfoId':{
        handler(value) {
          this.getBuildBaseInfo(value);
        },
        immediate:true,// 这个属性是重点啦
        deep:true // 深度监听的参数
      },
      // "BuildBaseInfoId":{
      //   handler(value1,value){
      //     alert(value1+"-"+value);
      //   } 
      // }
  },
  

  methods:{
    close(){
      this.$emit("close");
    },
    getBuildBaseInfo(buildId){
      this.isLoading=true;
      // let buildId = "371325101013GB00008F00240000" // 城镇 
      // let buildId = "371325101024GB00001F00120000" // 农村 
      postMethodCommon("/CimBuildInfo/GetZrzByDYH?bdcdyh="+buildId).then(res=>{
        if(res.code == 200){
          this.buildBaseInfo = res.result;
          console.log("buildBaseInfo",this.buildBaseInfo);
          let obj = this.useList.find((item,index)=>{
            return item.id == this.buildBaseInfo.ghyt;
          })
        
          if(obj){
            this.useTo = obj.value
          }
          this.isLoading = false;
        }
      })
    },
    getBuildInfo(){
      if(this.buildBaseInfo.hs.length == 0){
        this.$message({
          type:"warning",
          message:"没有房屋信息",
        })
      }else if(this.buildBaseInfo.hs.length == 1){
        // this.$emit("getBuildBaseInfo",this.buildBaseInfo);
        this.houseDetail(this.buildBaseInfo.hs[0]);
        console.log(this.buildBaseInfo.hs[0]);
      }else{
        this.$emit("getBuildInfo",this.buildBaseInfo);
      }
    },
    houseDetail(houseinfo){
			houseinfo.qlrs = [];
			this.buildBaseInfo.qlrs.forEach((item,index)=>{
				if(item.bdcdyh == houseinfo.bdcdyh){
					houseinfo.qlrs.push(item);
				}
			})
			this.$emit("getHouseDetail",houseinfo);
		},
  }
}
</script>
<style scoped>
.house-detail{
  width:600px;
  height:328px;
  padding:12px;
  background:url(/images/cim/leftbg.png);
  background-size:624px 522px;
}

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

.container{
  max-height:340px;
  overflow:auto;
  color:#fff;
  font-weight:400;

}
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-loading-mask{
  /* background:rgba(0,0,0,0.3); */
  background:rgba(10, 23, 136, 0.6)
}

::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 .cell-item{
  font-size:12px !important;
}

::v-deep .el-descriptions__content .el-descriptions__cell .is-bordered-content{
	color:#fff!important;
  font-size:12px !important;

}
::v-deep .is-bordered-content{
  font-size:12px !important;
}
</style>