<template>
  <div class="my-vr">
     <div class="vr-left">
       <p class="left-title">{{Info.infos.RoomLocalName || Info.infos.RoomName}}-{{Info.infos.RoomLocalID || Info.infos.RoomID}}<span> 业务空间类型：{{Info.business_type || '--'}}</span></p>
       <p class="left-remark">所在位置：{{bdObjName}}-{{flObjName}}</p>
       <div class="box-content">
         <div class="box-left">
           <table>
              <tr class="RQ">
                <td>空间二维码</td>
                <td class="qr-code">
                  <img :src="Info.infos.RoomQRCode?`/data-platform-3/image-service/common/file_get?systemId=dataPlatform&key=${Info.infos.RoomQRCode}`:'/static/img/noimg.png'">
                  <p class="download" v-if="Info.infos.RoomQRCode"  @click="downloadFile(Info.infos.RoomQRCode)">下载</p>
                </td>
              </tr>
              <tr>
                <td>BIM模型中编码：</td>
                <td>{{Info.infos.BIMID || '--'}}</td>
              </tr>
              <tr>
                <td>空间功能区类型：</td>
                <td>{{Info.infos.RoomFuncType || '--'}}</td>
              </tr>
              <tr>
                <td>空间本地编码：</td>
                <td>{{Info.infos.RoomLocalID || '--'}}</td>
              </tr>
              <tr>
                <td>BIM模型中坐标：</td>
                <td>{{Info.infos.BIMLocation || '--'}}</td>
              </tr>
              <tr>
                <td>进深：</td>
                <td>{{Info.infos.Depth || '--'}} m</td>
              </tr>
              <tr>
                <td>面宽：</td>
                <td>{{Info.infos.Width || '--'}} m</td>
              </tr>
              <tr>
                <td>高度：</td>
                <td>{{Info.infos.Height || '--'}} m</td>
              </tr>
              <tr>
                <td>建筑面积：</td>
                <td>{{Info.infos.BuildArea || '--'}} m²</td>
              </tr>
              <tr>
                <td>使用面积</td>
                <td>{{Info.infos.NetArea || '--'}} m²</td>
              </tr>
              <tr>
                <td>配电容量：</td>
                <td>{{Info.infos.ElecCap || '--'}} A</td>
              </tr>
              <tr>
                <td>租赁业态类型：</td>
                <td>{{Info.infos.TenantType || '--'}}</td>
              </tr>
              <tr>
                <td>所属租户：</td>
                <td>{{Info.infos.Tenant || '--'}}</td>
              </tr>
          </table>
          <p class="more" @click="getMoreInfo(Info)">查看更多<img src="/static/img/more.png"></p>
         </div>
          <div class="box-right" >
           <div class="pic-con">
              <div id="container"  v-if="Info.infos.Pic">
              </div>
               <div class="no-right" v-else>
                  <img src="/static/img/no_pic.png" alt="">
                  <p>暂无图片</p>
              </div>
           </div>
            <div class="swip-container" v-if="Info.infos.Pic && Info.infos.Pic.length>0" >
              <pic-swipe :list='Info.infos.Pic' @onClick="draw">
              </pic-swipe>
            </div>
            <div class="swip-container" v-else>
               <div>
                  <img src="/static/img/no_pic.png" alt="">
                  <br/><br/>
                  <p>暂无图片</p>
               </div>
            </div>
          </div>

       </div>
       <div class="box-bottom">
          <Collapse v-model="panelValue" accordion @on-change='getTableData'>
              <Panel name="1" >
                  空间内设备
                  <p slot="content" v-if="tableData">
                    <eq-table :tableData='tableData'></eq-table>
                  </p>
              </Panel>
              <Panel name="2">
                  服务于空间设备
                  <p slot="content" v-if="serveData">
                    <serve-table :serveData='serveData'></serve-table>
                  </p>
              </Panel>
          </Collapse>`
       </div>
     </div>
     <div class="vr-right">
      <eq-right :Info='Info' :envData='envData' :noAlarmNum='noAlarmNum' :ElecConsumPData='ElecConsumPData'
      :AccElecConsumData="AccElecConsumData" :orderCount='orderCount' :moniData='moniData'></eq-right>
     </div>
     <div class="mask-bg"></div>
     <div class="mask">
       <message-modal @close='close' :isQR='isQR'></message-modal>
     </div>
  </div>
</template>

<script>
import PicSwipe from './PicSwipe'
import eqTable from './EqTable'
import eqRight from './EqRight'
import messageModal from '../spread/MessageModal'
import {formatCodetoClass} from '../../tools/formatData.js'
import {currentTime} from '../../tools/currentDate.js'
import serveTable from './serveTable'
import axios from 'axios'
export default {
  components: {
    PicSwipe,
    eqTable,
    eqRight,
    messageModal,
    serveTable
  },

  mixins: [],

  props: {

  },

  data () {
    return {
      panelValue: '',
      tableData: [],
      serveData: [],
      Info: {
        business_type: "--",
        infos: {
          RoomLocalName: '--',
          RoomLocalID: '--',
          RoomQRCode: '',
          BIMID: '--',
          RoomFuncType: '--',
          BIMLocation: '--',
          Depth: '--',
          Width: '--',
          Height: '--',
          BuildArea: '--',
          NetArea: '--',
          ElecCap: '--',
          TenantType: '--',
          Tenant: '--',
          Pic: []
        },
        location: {
          building: '--',
          floor: '--'
        }
      },
      bdObjName: "--",
      flObjName: "--",
      isQR: '',
      objectId: 'Sp1101080001001003001',
      ElecConsumPData: "", // 耗电功率
      AccElecConsumData: "", // 累计用电量
      orderCount: 0, // 工单
      moniData: 0, // 摄像头的数量
      envData: {
        Tdb: "--",
        RH: "--",
        CO: "--",
        PM: "--"
      },
      noAlarmNum: 0
    }
  },

  computed: {

  },

  mounted () {
    this.getEqNameAndId()
    // this.initData()
    // this.searchBuildingName()
    // this.noRecoverAlarm()
    // this.envInfo()
    // this.getCurrentData()
    // this.underwayOrder()
    // this.getMoniCount()
  },

  methods: {
    getEqNameAndId () {
      let hostUrl = location.search
      this.objectId = hostUrl.split("&")[0].toString().split("=")[1]
      let pid = hostUrl.split("&")[1].toString().split("=")[1]
      let secret =  hostUrl.split("&")[2].toString().split("=")[1]
      console.log(pid, this.$store.state.projId)
      this.$store.commit('setProId', pid)
      this.$store.commit(`setSecret`, secret)
      this.initData(this.objectId)
      this.searchBuildingName(this.objectId)
      this.noRecoverAlarm(this.objectId)
      this.envInfo(this.objectId)
      this.getCurrentData(this.objectId)
      this.underwayOrder(this.objectId)
      this.getMoniCount(this.objectId)
    },
    // 右侧耗电功率和累计用电量的统计
    getCurrentData (objectId) {
      let params = {
        criterias: [
          {
            id: objectId,
            code: "ElecConsumP"
          },
          {
            id: objectId,
            code: "AccElecConsum"
          }
        ]
      }
      axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          let content = data.Content
          content.forEach(el => {
            if (el.code == 'ElecConsumP') {
              this.ElecConsumPData = el.data
            }
            if (el.code == 'AccElecConsum') {
              this.AccElecConsumData = el.data
            }
          })
        }
      })
    },
    // 右侧进行中的工单
    underwayOrder (objectId) {
      let params = {
        order_state: "5",
        space_ids: [objectId],
        user_id: "systemId",
        project_id: this.$store.state.projId,
        start_time: "20180101000000",
        end_time: currentTime(new Date())
      }
      axios.post(`/workorder/workorder/restWorkOrderService/queryWorkOrderList`, params).then(res => {
        let data = res.data
        this.orderCount = data.Count
      })
    },
    // 摄像头数量
    getMoniCount (objectId) {
      let params = {
        id: objectId
      }
      axios.post(`/api/front-api/monitor/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.moniData = data.count
        }
      })
    },
    // 空间建筑的名称查询
    searchBuildingName (objectId) {
      let params = {
        keywords: [],
        category: ['SpObj'],
        limit: 1,
        ids: [objectId]
      }
      axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          if (data.Content.length > 0) {
            this.bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : "--"
            this.flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : "--"
          } else {
            this.bdObjName = '--'
            this.this.flObjName = '--'
          }
        }
      })
    },
    // 未恢复的报警条数
    noRecoverAlarm (objectId) {
      let params = {
        criteria: {
          objectId: objectId,
          status: 'alalrm'
        }
      }
      axios.post(`/alarm-system/alarm-system/alarm/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.noAlarmNum = data.Count
        }
      })
    },
    // c02等信息
    envInfo (objectId) {
      let params = {
        criterias: [
          { id: objectId, code: 'Tdb' },
          { id: objectId, code: 'RH' },
          { id: objectId, code: 'CO2' },
          { id: objectId, code: 'PM2.5' }
        ]
      }
      axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          let info = data.Content
          info.forEach(el => {
            if (el.code == 'Tdb') {
              this.envData.Tdb = el.data ? el.data.toFixed(2) : '--'
            }
            if (el.code == 'RH') {
              this.envData.RH = el.data ? el.data.toFixed(2) : '--'
            }
            if (el.code == 'CO2') {
              this.envData.CO = el.data ? el.data.toFixed(2) : '--'
            }
            if (el.code == 'PM2.5') {
              this.envData.PM = el.data ? el.data.toFixed(2) : '--'
            }
          })
        }
      })
    },
    // 获取数据信息
    initData (objectId) {
      let params = {
        criterias: [
          {id: objectId}
        ]
      }
      axios.post(`/data-platform-3/data-platform-3/object/batch_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.Info = data.Content[0]
          console.log(this.Info)
          if (this.Info.infos.Pic) {
            this.draw(this.Info.infos.Pic[0].key)
          }
        }
      })
    },
    // 设备建筑查询
    searchEqBuild (idArr) {
      let params = {
        keywords: [],
        category: ['EqObj'],
        limit: idArr.length,
        ids: idArr
      }
      axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          let bdObjName, flObjName
          if (data.Content.length > 0) {
            bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : "--"
            flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : "--"
          } else {
            bdObjName = '--'
            flObjName = '--'
          }
          this.serveData.forEach(el => {
            el.eqName = el.infos.EquipLocalName || '--'
            el.eqId = el.infos.EquipLocalID || '--'
            // el.category = (el.category) // youwenti
            el.category = formatCodetoClass(this.$store.state.equipmentAll, el.category) // youwenti
            el.location = bdObjName + flObjName
            el.alarmLength = el.alarmLength ? el.alarmLength : 0
          })
        }
      })
    },

    // 空间内设备
    getTableData (key) {
      let params = {
        criteria: {
          graphType: 'EquipinSpace',
          relType: '1',
          toId: this.objectId, // 空间id
          side: 'fromId'
        }
      }
      if (key[0] == 1) {
        params.criteria.graphType = 'EquipinSpace'
        axios.post(`/data-platform-3/data-platform-3/object/rel_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
          let data = res.data
          if (data.Result == 'success') {
            this.tableData = data.Content
            this.equipInSpace()
          }
        })
      } else {
        params.criteria.graphType = 'EquipforSpace'
        axios.post(`/data-platform-3/data-platform-3/object/rel_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
          let data = res.data
          if (data.Result == 'success') {
            this.serveData = data.Content
            if (this.serveData.length > 0) {
              let idArr = []
              this.serveData.forEach(el => {
                idArr.push(el.id)
              })
              this.equipForSpace()
              this.searchEqBuild(idArr)
            }
          }
        })
      }
    },
    // 服务于空间设备未恢复的报警条数
    equipInSpace () {
      let params = {
        spaceId: this.objectId // 空间id
      }
      axios.post(`/alarm-system/alarm-system/alarm/equipInSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          let alarm = data.Content
          if (alarm.length > 0) {
            alarm.map(j => {
              this.tableData.map(i => {
                if (i.infos.EquipID == j.equipmentId) {
                  i.alarmLength = j.alarmList ? j.alarmList.length : 0
                }
              })
            })
          }
          this.tableData.forEach(el => {
            el.eqName = el.infos.EquipLocalName || '--'
            el.eqId = el.infos.EquipLocalID || '--'
            // el.category = (el.category) // youwenti
            el.category = formatCodetoClass(this.$store.state.equipmentAll, el.category) // youwenti
            el.location = el.location ? el.location.building : '--' // youwenti
            el.alarmLength = el.alarmLength ? el.alarmLength : 0
          })
        }
      })
    },
    //
    equipForSpace () {
      let params = {
        spaceId: this.objectId // 空间id
      }
      axios.post(`/alarm-system/alarm-system/alarm/equipForSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          let alarm = data.Content
          if (alarm.length > 0) {
            this.serveData = this.serveData.map(i => {
              alarm.map(j => {
                if (i.infos.EquipID == j.equipmentId) {
                  i.alarmLength = j.alarmList ? j.alarmList.length : 0
                }
              })
            })
          }
        }
      })
    },
    // 查看更多的点击事件
    getMoreInfo (Info) {
      this.$router.push({path: 'detail', query: {obj: JSON.stringify(Info)}})
    },
    // 查看全景图
    draw (key) {
      var div = document.getElementById('container')
      // let baseUrl = this.$store.state.baseUrl
      // eslint-disable-next-line
      var PSV = new PhotoSphereViewer({
        panorama: `/data-platform-3/image-service/common/image_get?systemId=dataPlatform&key=${key}`,
        container: div,
        time_anim: false,
        navbar: true,
        size: {
          width: '100%',
          height: '440px'
        }
      })
    },
    // 下载弹框
    downloadFile (isQR) {
      this.isQR = isQR
      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'
    }

  }

}
</script>

<style scoped lang="less" >
.my-vr {
        font-size: 16px;
        margin: 0;
        display: flex;
        .vr-left {
          width: 78%;
          min-width: 900px;
          background: #fff;
          box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
          border-radius: 2px;
          margin-right: 20px;
          padding:20px 20px 0 20px;
          .left-title {
            font-size: 18px;
            font-weight: bold;
            color: #212830;
            >span {
              font-size: 14px;
              display: inline-block;
              color: #6D747C;
              width: 248px;
              height: 28px;
              line-height: 28px;
              padding-left: 20px;
              margin-left: 34px;
            }
          }
          .left-remark {
            font-size: 14px;
            display: inline-block;
            color: #6D747C;
            background: #F4F6FE;
            height: 28px;
            line-height: 28px;
            padding-left: 20px;
            margin: 10px 0;
          }
          .box-content {
            width: 100%;
            display: flex;
            .box-left {
              width:30%;
              min-width: 250px;
              background: #F5F5F5;
              border-radius: 2px;
              margin-right: 20px;
              display: inline-block;
              position: relative;
              .more {
                position: absolute;
                font-size: 16px;
                color: #6682E6;
                bottom: 13px;
                right: 20px;
                cursor: pointer;
              }
              tr {
                td {
                  padding-left:20px;
                  padding-top: 8px;
                  font-size: 14px;
                  color: #6D747C;
                  line-height: 24px;
                  word-break: break-word;
                  >img{
                     width:90px;
                     height: 90px;
                  }
                  .download {
                    font-size: 14px;
                    color: #6682E6;
                    cursor: pointer;
                    padding-left:10px;
                  }
                }
              }
              .RQ {
                >td {
                  vertical-align: top;
                }
                .qr-code {
                  position: relative;
                  >img:hover + .download {
                    opacity: 1;
                  }
                  .download {
                    position: absolute;
                    bottom: 0;
                    background: rgba(255, 255, 255, .9);
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    z-index: 10;
                    text-align: center;
                    color: #6682E6;
                    font-size: 14px;
                    cursor: pointer;
                    opacity: 0;
                  }
                }
              }
            }
            .no-right{
              width: 100%;
              background: #F5F5F5;
              border-radius: 2px;
              height: 440px;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
            }
            .box-right {
              display: inline-block;
              width: 70%;
              background: #fff;
              border-radius: 2px;
              .pic-con {
                background: #F5F5F5;
                color:#6D747C;
                #container {
                  width: 100%;
                  height: 500px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  cursor: pointer;
                }
              }
              .swip-container{
                margin-top: 20px;
                >div{
                  width:180px;
                  height: 152px;
                  background: #F5F5F5;
                  border-radius: 2px;
                  text-align: center;
                  padding-top: 35px;
                  color: #6D747C;
                }
              }
            }
          }
          .box-bottom{
            margin:40px 0;
          }
        }
        .vr-right{
          width:21%;
          border-radius: 2px;
          display: inline-block;
        }
        .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;
        }
    }

</style>
<style lang="less">
 .my-vr {
    .box-bottom{
      // .ivu-collapse-content{
      //   padding:0;
      // }
      .ivu-icon-ios-arrow-forward {
          float: right;
          margin-top: 10px;
          transform: rotate(-90deg);
      }
      .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
        background: #F4F5F8;
        border-radius: 2px;
      }
    }
 }
</style>
