<template>
  <div class="window-container">
      <div class="title">
        详细信息
        <span class="close-btn" @click="$emit('closeAttributeWindow')">
          &times;
        </span>
      </div>
      <div class="info">
        <div class="item-header">
          {{datainfo.dwmc}}
        </div>
        <!-- <div class="item" v-for="(val, key , i) in detailData" :key="i">
          <div class="item-title">{{key}}</div>
          <div class="item-value">{{val!='' && val != null  && val != 'null' ? val :"暂无数据"}}</div>
        </div> -->
        <div class="item" v-for="(item,index) in detailDataArr" :key="index" v-show="item.name && item.value">
          <div class="item-title">{{item.name != "" && item.name != null && item.name != "nulll" ? item.name : "暂无属性"}}</div>
          <div class="item-value">{{item.value != "" && item.value != null && item.value != "nulll" ? item.value : "暂无数据"}}</div>
        </div>
        <!--
        <div class="item">
          <div class="item-title">办学类型</div>
          <div class="item-value">基础教育，九年一贯制学校</div>
        </div>
        <div class="item">
          <div class="item-title">占地面积</div>
          <div class="item-value">7374.00m²</div>
        </div>
        <div class="item">
          <div class="item-title">校舍占地面积</div>
          <div class="item-value">365.00m²</div>
        </div>
        <div class="item">
          <div class="item-title">万元以上设备台数</div>
          <div class="item-value">112</div>
        </div>
        <div class="item">
          <div class="item-title">是否含文物保护单位或历史建筑</div>
          <div class="item-value">否</div>
        </div>
        <div class="item">
          <div class="item-title">教职工数</div>
          <div class="item-value">512</div>
        </div>
        <div class="item">
          <div class="item-title">在校生数</div>
          <div class="item-value">2312</div>
        </div>
        <div class="item">
          <div class="item-title">寄宿生数</div>
          <div class="item-value">1112</div>
        </div>
        <div class="item">
          <div class="item-title">教室数</div>
          <div class="item-value">196</div>
        </div>
        <div class="item">
          <div class="item-title">安保人员数量</div>
          <div class="item-value">32</div>
        </div>
        <div class="item">
          <div class="item-title">应急通信保障</div>
          <div class="item-value">移动电话</div>
        </div>
        <div class="item">
          <div class="item-title">联系电话</div>
          <div class="item-value">17861857725</div>
        </div> -->
      </div>
  </div>
</template>
<script>
import { getMethodCommon, postMethodCommon } from '../api/common'
export default {
  props:["targetObj"],
  data(){
    return {
      detailData:{},
      datainfo:{},
      dictionaries:[],
      detailDataArr:[],
    }
  },
  created(){
    this.getDictionaries();
  },
  watch:{
    targetObj:{
      handler(){
        this.getDetail();
      },
      deep:true
    }
  },
  methods:{
    getDictionaries(){
      postMethodCommon("/CimEncndesc/Load",{page:1,limit:999}).then(res=>{
        if(res.code == 200){
          this.dictionaries = res.data;
          this.getDetail();
        }
      })
    },
    getDetail(){
      getMethodCommon("/LayerManager/GetNodeinfo",this.targetObj).then(res=>{
        if(res.code == 200){
          this.detailData = res.result;
          this.detailDataArr = [];
          for(let key in this.detailData){
            let detail = {}
            let enObj  = this.dictionaries.find((item)=>{
              return item.en_name == key
            })
            if(enObj){
              detail.name = enObj.cn_name ? enObj.cn_name : null;
            }else{
              detail.name = "暂无属性"
            }
            detail.value = this.detailData[key];
            this.detailDataArr.push(detail);
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.window-container{
  width:100%;height:100%;
  /* box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7); */
}
.title{
  width:100%;
  height:32px;
  line-height: 32px;
  color:#fff;
  text-indent:8px;
}
.info{
  width:100%;
  padding:12px;
  box-sizing: border-box;
  height:460px;
  overflow: auto;
  background: rgba(6,16,64,0.7);
}
.info::-webkit-scrollbar{
  width:10px;
  background:rgba(0,0,0,0);
  border-radius:5px;
  display:none;
}

.item-header{
  width:100%;
  height:30px;
  background:rgba(0,157,255,0.4);
  line-height:30px;
  color:#fff;
  text-indent: 8px;
  border-bottom:1px solid #088EDA;
}
.item{
  width: calc( 100% - 2px);
  height:30px;
  line-height: 30px;
  color:#fff;
  border-bottom:1px solid #088EDA;
  /* border-top:1px solid #088EDA; */
  border-left:1px solid #088EDA;
  text-indent: 6px;
}
.item .item-title{
  width:40%;
  float:left;
  font-size:12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.item .item-value{
  width: calc( 60% - 2px);
  float:left;
  font-size:12px;
  border-left:1px solid #088EDA;
  border-right:1px solid #088EDA;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.close-btn{
  float:right;font-size:24px;margin-right:10px;cursor:pointer;
}
.close-btn:hover{
  color:#cecece;
}
</style>