<template>
  <div class="detail-info">
      <div class="eq-top">
           <img src="./static/img/backIcon.jpg" alt="" @click="back">
           <span>返回 </span>
      </div>
      <div class="detail-content">
          <div class="content-top">
              <p>{{roomInfo.infos.RoomLocalName}}的详情</p>
              <div><Checkbox v-model="isData" label="只显示有数据的信息" name="type" @on-change="onChange"></Checkbox>只显示有数据的信息</div>
          </div>
          <hr>
          <div class="content-bottom">
              <div class="content-left">
                  <div>
                      <ul>
                          <li v-for="(list,index) in mainInfo" :key='index' :class="{changeStyle:changeColor == index}"
                          @click="change(index)"><a :href="`#${list.href}`">{{list.name}}</a></li>
                      </ul>
                  </div>
              </div>
              <div class="content-right"  @scroll="handleScroll">
                  <p id="baseInfo" class="group"><span></span>基本信息</p>
                  <ul>
                      <li><span>空间ID</span>{{roomInfo.infos.RoomID}}</li>
                      <li><span>空间名称</span>{{roomInfo.infos.RoomName || '--'}}</li>
                      <li><span>空间本地编码</span>{{roomInfo.infos.RoomLocalID || '--'}}</li>
                      <li><span>空间本地名称</span>{{roomInfo.infos.RoomLocalName || '--'}}</li>
                      <li><span>空间二维码图片</span><i v-if="roomInfo.infos.RoomQRCode" @click="lookAt">查看</i></li>
                      <li><span>BIM模型中编码</span>{{roomInfo.infos.BIMID || '--'}}</li>
                      <li><span>空间功能区类型</span>{{roomInfo.infos.RoomFuncType || '--'}}</li>
                      <li><span>进深</span>{{roomInfo.infos.Depth || '--'}} m</li>
                      <li><span>面宽</span>{{roomInfo.infos.Width || '--'}} m</li>
                      <li><span>建筑面积</span>{{roomInfo.infos.BuildArea || '--'}} m²</li>
                      <li><span>使用面积</span>{{roomInfo.infos.NetArea || '--'}} m²</li>
                      <li><span>高度</span>{{roomInfo.infos.Height || '--'}} m</li>
                      <li><span>配电容量</span>{{roomInfo.infos.ElecCap || '--'}} A</li>
                      <li><span>备注文字</span>{{roomInfo.infos.Intro || '--'}}</li>
                  </ul>
                  <p id="lesseeInfo" class="group"><span></span>租户信息</p>
                  <ul>
                      <li><span>租赁业态类型</span>{{roomInfo.infos.TenantType || '--'}}</li>
                      <li><span>所属租户</span>{{roomInfo.infos.Tenant || '--'}}</li>
                  </ul>
                  <p id="peoplesInfo" class="group"><span></span>人员信息</p>
                  <ul>
                      <li><span>空间常驻人数</span>{{roomInfo.infos.PermanentPeopleNum || '--'}}</li>
                      <li><span>逐时流出人数</span>{{roomInfo.infos.OutPeopleFlow || '--'}}</li>
                  </ul>
                  <p id="enviromentInfo" class="group"><span></span>环境参数</p>
                   <ul>
                        <enviroment-params v-show="roomInfo" :roomInfo='roomInfo' :isShowChange='isShowChange'></enviroment-params>
                   </ul>
                  <p id="eneryInfo" class="group"><span></span>能耗信息</p>
                   <ul style="min-height: 590px">
                        <enery-params v-show="roomInfo" :roomInfo='roomInfo' :isShowChange='isShowChange'></enery-params>
                   </ul>
              </div>
          </div>
      </div>
       <div class="mask-bg"></div>
     <div class="mask">
       <message-modal @close='close' :isQR="isQR"></message-modal>
     </div>
  </div>
</template>

<script>
import enviromentParams from './EnvirmentParams'
import eneryParams from './EneryParams'
import messageModal from '../spread/MessageModal'
// import { log } from 'util'
export default {
  components: {
    enviromentParams,
    eneryParams,
    messageModal
  },

  mixins: [],

  props: {
  },

  data () {
    return {
      isData: false,
      changeColor: 0,
      isShowChange: false, // 控制表格是否显示没数据的那一行
      roomInfo: {
        infos: {
          RoomLocalName: '--',
          RoomLocalID: '--',
          RoomQRCode: '--',
          BIMID: '--',
          RoomFuncType: '--',
          BIMLocation: '--',
          Depth: '--',
          Width: '--',
          Height: '--',
          BuildArea: '--',
          NetArea: '--',
          ElecCap: '--',
          TenantType: '--',
          Tenant: '--'
        },
        location: {
          building: '--',
          floor: '--'
        }
      },
      isQR: "",
      mainInfo: [
        {name: "基本信息", href: "baseInfo"},
        {name: "租户信息", href: "lesseeInfo"},
        {name: "人员信息", href: "peoplesInfo"},
        {name: "环境参数", href: "enviromentInfo"},
        {name: "能耗信息", href: 'eneryInfo'}
      ],
      groups: [],
      box: null // 滚动盒子
    }
  },

  computed: {

  },

  mounted () {
    this.getRouteParams()
    this.$nextTick(() => {
      this.box = document.querySelector(".content-right")
      this.groups = document.querySelectorAll(".content-right .group")
    })
  },

  methods: {
    // 滚动触发事件
    handleScroll () {
      let top = this.box.scrollTop
      let i = this.groups.length - 1
      for (; i >= 0; i--) {
        if (this.groups[i].offsetTop <= top) {
          this.changeColor = i
          break
        }
      }
    },
    change (index) {
      this.changeColor = index
    },
    back () {
      history.go(-1)
    },
    // 接受来自父组件路由传过来的参数
    getRouteParams () {
      this.roomInfo = JSON.parse(this.$route.query.obj)
    },
    // 下载弹框
    lookAt () {
      this.isQR = this.roomInfo.infos.RoomQRCode
      document.querySelector('body').style.overflow = 'hidden'
      document.querySelector('.mask-bg').style.display = 'block'
      document.querySelector('.mask').style.display = 'block'
    },
    close () {
      document.querySelector('body').style.overflow = 'auto'
      document.querySelector('.mask-bg').style.display = 'none'
      document.querySelector('.mask').style.display = 'none'
    },
    onChange (val) {
      if (val) {
        this.hiddenNoData()
      } else {
        this.showAllData()
      }
    },
    hiddenNoData () {
      this.isShowChange = true
      let arr = document.querySelectorAll('.content-right li')
      arr.forEach(i => {
        if (i.innerHTML.includes('--')) {
          i.style.display = 'none'
        }
      })
    },
    // 只显示有数据的
    showAllData () {
      this.isShowChange = false
      let arr = document.querySelectorAll('.content-right li')
      arr.forEach(i => {
        i.style.display = 'block'
      })
    }
  }
}
</script>

<style scoped lang="less" >
.detail-info {
    .eq-top {
        margin-bottom: 20px;
        margin-left: 20px;
        font-size: 7px;
        color: #212830;
        >img {
            //vertical-align: middle;
            cursor: pointer;
            border: 1px solid #CACACA;
            border-radius: 2px;
        }
        >span {
            font-size: 16px;
            color: #212830;
        }
    }
    .detail-content {
        box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
        border-radius: 2px;
        background: #fff;
        padding-left:20px;
        .content-top {
            p {
                font-size: 18px;
                color: #212830;
                font-weight: bold;
                padding: 24px 0 20px 0;
            }
        }
        hr {
            margin-bottom: 0;
        }
        .content-bottom {
            padding-left: 10px;
            display: flex;
            margin-bottom: 20px;
            .content-left {
                width: 264px;
                border-radius: 2px;
                margin-right: 70px;
                padding-top: 10px;
                background: #FAFAFA;
                margin-bottom: 20px;
                div {
                    li{
                        font-size: 16px;
                        padding:8px 0 8px 40px;
                        font-weight: bold;
                        cursor: pointer;
                        &:hover {
                            color:#6682E6;
                            background: #fff;
                        }
                        a {
                             color: #212830;
                             &:hover {
                                color:#6682E6;
                                background: #fff;
                            }
                           }
                       }
                   }
                .active{
                    color:#6682E6;
                    background: #fff;
                    }
            }
            .content-right {
                width: 1450px;
                height: 700px;
                overflow-y:auto;
                padding-top: 10px;
                position: relative;
                p {
                    span {
                        display: inline-block;
                        width: 4px;
                        height: 16px;
                        background: #728DEE;
                        margin-right: 10px;
                        margin-bottom: -3px;
                    }
                }
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    margin-left: 10px;
                    margin-top: 20px;
                    li {
                        width: 50%;
                        padding-bottom: 15px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        span {
                            font-size: 14px;
                            color: #6D747C;
                            display: inline-block;
                            width: 98px;
                            margin-right: 20px;
                        }
                        i{
                            color:#6682E6;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
     .mask-bg{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background:rgba(0, 0, 0, .6);
        display: none;
    }
    .mask {
        width: 860px;
        height: 458px;
        background: #fff;
        position: fixed;
        z-index: 999;
        top: 120px;
        left: 30%;
        display: none;
    }
    .changeStyle{
        color: #6682E6!important;
        background: #fff;
        >a{
            color: #6682E6!important;
        }
    }
}
</style>
<style lang="less">
.detail-info {
    .ivu-table-wrapper {
        border: none;
    }
    .ivu-table td,
    .ivu-table th {
        border: none;
    }
    .ivu-table:before{
        height: 0;
    }
    .ivu-table:after{
        width:0;
    }
    .ivu-table-row .description-td>.ivu-table-cell>span{
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
            max-height: 100px;
            display: inline-block;
    }
}
</style>
