<template>
  <div class="system-spread">
     <div class="vr-left">
       <p class="left-title">{{Info.infos.SysLocalName || Info.infos.SysName}}-{{Info.infos.SysLocalID || Info.infos.SysID}}</p>
       <p class="left-remark" v-if="Info.category">{{bdObjName}}-{{SystemCodetoClass(this.$store.state.equipmentAll,Info.category)}}</p>
       <div class="box-content">
          <p id="baseInfo"><span></span>技术基本参数</p>
          <ul>
              <li><span>系统ID</span>{{Info.infos.SysID || '--'}}</li>
              <li><span>系统名称</span>{{Info.infos.SysName || '--'}}</li>
              <li><span>BIM模型中编码</span>{{Info.infos.BIMID || '--'}}</li>
          </ul>
          <p id="baseInfo"><span></span>运行基本参数</p>
          <ul>
              <li><span>运行状态</span>{{Info.infos.RunStatus || '--'}}</li>
              <li><span>本地远程状态</span>{{Info.infos.RemoteStatus || '--'}}</li>
              <li><span>总供冷量</span>{{Info.infos.TotCool || '--'}}</li>
              <li><span>总供热量</span>{{Info.infos.TotHeat || '--'}}</li>
              <li><span>总除湿量</span><i>{{Info.infos.TotDeD}}</i></li>
              <li><span>总加湿量</span>{{Info.infos.TotD || '--'}}</li>
              <li><span>总耗电功率</span>{{Info.infos.TotElecConsumP || '--'}}</li>
              <li><span>平均送风温度</span>{{Info.infos.AveSupplyAirV || '--'}} </li>
              <li><span>平均回风温度</span>{{Info.infos.AveReturnAirV || '--'}} </li>
              <li><span>总送风量</span>{{Info.infos.TotAirFlow || '--'}}</li>
              <li><span>末端开启百分比</span>{{Info.infos.TerminalRunPct || '--'}}</li>
              <li><span>末端负载率</span>{{Info.infos.TerminalPLR || '--'}} </li>
              <li><span>末端系统COP</span>{{Info.infos.SysCOP || '--'}}</li>
              <li><span>系统输配系数</span>{{Info.infos.WTFac || '--'}}</li>
            </ul>
            <p id="baseInfo"><span></span>技术基本参数</p>
            <ul>
                <li><span>末端设备</span>{{Info.infos.TerminalType || '--'}}</li>
                <li><span>气流组织</span>{{Info.infos.AirDistributionType || '--'}}</li>
                <li><span>总额定加湿量</span>{{Info.infos.RatedTotD || '--'}}</li>
                <li><span>总额定除湿量</span>{{Info.infos.RatedTotDeD || '--'}}</li>
                <li><span>总额定供冷量</span><i>{{Info.infos.RatedTotCool || '--'}}</i></li>
                <li><span>总额定供热量</span>{{Info.infos.RatedTotHeat || '--'}}</li>
                <li><span>总额定空气处理量</span>{{Info.infos.RatedTotAirFlow || '--'}}</li>
              </ul>
              <div class="sys-tab" v-for="(item,index) in sysEqArr" :key='index' @click="getEq(item.infos.EquipID)">
                <p class="sys-name">{{item.infos.EquipLocalName || '--'}}-{{item.infos.EquipLocalID || '--'}}</p>
                <div class="sys-type">
                  <p>设备类型：{{item.category?formatCodetoClass($store.state.equipmentAll,item.category):'--'}}</p>
                  <p>设备型号：{{item.infos.Specification || '--'}}</p>
                </div>
                <p class="sys-date">{{item.location || '--'}}</p>
                <p class="sys-date">投产日期：{{item.infos.StartDate?formatTime(item.infos.StartDate) :'--'}} <span>保养周期:{{item.infos.MaintainPeriod || '--'}}</span></p>
              </div>
       </div>
     </div>
     <div class="vr-right">
      <eq-right :Info='Info' :noAlarmNum='noAlarmNum' :ElecConsumPData='ElecConsumPData'
      :AccElecConsumData="AccElecConsumData" :orderCount='orderCount' :moniData='moniData'></eq-right>
     </div>

  </div>
</template>

<script>

import eqRight from '../verit/equipRit.vue'
import {SystemCodetoClass} from '../../tools/systemClass.js'
import {formatCodetoClass} from '../../tools/formatData.js'
import {formatTime} from '../../tools/formatTime.js'
import {currentTime} from '../../tools/currentDate.js'
import axios from 'axios'
export default {
  components: {
    eqRight
  },

  mixins: [],

  props: {

  },

  data () {
    return {
      formatTime,
      formatCodetoClass,
      SystemCodetoClass,
      objectId: 'Sy1101080001001ACAT599',
      orderCount: 0, // 进行中的工单数量
      ElecConsumPData: "", // 耗电功率
      AccElecConsumData: "", // 累计用电量
      moniData: 0, // 摄像头
      noAlarmNum: 0,
      Info: {
        infos: {
          SysLocalName: '--',
          category: "--"
        }
      },
      bdObjName: '--',
      sysEqArr: []
    }
  },

  computed: {

  },

  mounted () {
    this.getEqNameAndId()
    this.getSystem(this.objectId)
    this.initData(this.objectId)
    this.noRecoverAlarm(this.objectId)
    this.getCurrentData(this.objectId)
    this.searchBuildingName(this.objectId)
    this.underwayOrder(this.objectId)
    this.getMoniCount(this.objectId)
  },

  methods: {
    getEqNameAndId () {
      let hostUrl = location.search
      this.objectId = hostUrl.split("&")[0].toString().split("=")[1]
      let pid = hostUrl.split("&")[1].toString().split("=")[1]
      let secret = ''
      if(hostUrl.split("&")[2]){
         secret =  hostUrl.split("&")[2].toString().split("=")[1]
      }
      this.$store.commit('setProId', pid)
      this.$store.commit(`setSecret`, secret)
      console.log(pid, this.$store.state.projId,this.$store.state.secret)
      this.getSystem(this.objectId)
      this.initData(this.objectId)
      this.noRecoverAlarm(this.objectId)
      this.getCurrentData(this.objectId)
      this.searchBuildingName(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
            }
          })
        }
      })
    },
    // 未恢复的报警条数
    noRecoverAlarm (objectId) {
      let params = {
        criteria: {
          objectId: objectId,
          status: 'alalrm'
        }
      }
      axios.post(`/dp-auxiliary/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
        }
      })
    },
    // 右侧进行中的工单
    underwayOrder (objectId) {
      let params = {
        order_state: "5",
        system_ids: [objectId],
        user_id: "systemId",
        project_id: this.$store.state.projId,
        start_time: "20180101000000",
        end_time: currentTime(new Date())
      }
      axios.post(`/fm-service/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
        }
      })
    },
    // 获取数据信息
    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]
        }
      })
    },
    // 设备建筑查询
    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.sysEqArr.forEach(el => {
            el.location = bdObjName + flObjName
          })
        }
      })
    },

    // 建筑的名称查询
    searchBuildingName (objectId) {
      let params = {
        keywords: [],
        category: ['SyObj'],
        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 : "--"
          } else {
            this.bdObjName = '--'
          }
        }
      })
    },
    getSystem (objectId) {
      let params = {
        criteria: {
          graphType: 'SystemEquip',
          relType: '1',
          fromId: objectId, // 空间id
          side: 'toId'
        }
      }
      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.sysEqArr = data.Content
          if (this.sysEqArr.length > 0) {
            let idArr = []
            this.sysEqArr.forEach(el => {
              idArr.push(el.id)
            })
            this.searchEqBuild(idArr)
          }
        }
      })
    },
    getEq (id) {
      this.$router.push({path: 'spread', query: {id: id}})
    }

  }

}
</script>

<style scoped lang="less" >
.system-spread {
        font-size: 16px;
        margin: 0;
        display: flex;
        .vr-left {
          width: 79%;
          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;
              color: #6D747C;
              margin-left: 34px;
            }
          }
          .left-remark {
            font-size: 14px;
            color: #6D747C;
            background: #F4F6FE;
            height: 28px;
            line-height: 28px;
            padding-left: 20px;
            margin-top: 10px;
            display:inline-block;
          }
          .box-content {
            padding-top: 20px;
               >p {
                    span {
                        display: inline-block;
                        width: 4px;
                        height: 16px;
                        background: #728DEE;
                        margin-right: 10px;
                        vertical-align: middle;
                    }
                }
                ul {
                    display: flex;
                    //justify-content:space-between;
                    flex-wrap: wrap;
                    margin-left: 10px;
                    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;
                        }
                    }
                }
                .sys-tab{
                  border-radius: 2px;
                  background: #FAFAFA;
                  border: 1px solid #E0E0E0;
                  margin: 20px 0;
                  padding: 20px;
                  .sys-name {
                    font-size: 16px;
                    color: #212830;
                    font-weight: bold;
                  }
                  .sys-date{
                    font-size: 14px;
                    color: #6D747C;
                    padding-left: 20px;
                    >span{
                      margin-left: 60px;
                    }
                  }
                  .sys-type{
                    float:right;
                  }
                }

          }

        }
        .vr-right{
          width: 21%;
          border-radius: 2px;
          display: inline-block;
        }

    }
</style>
<style lang="less">
 .eq-spread {
    .ivu-icon-ios-arrow-forward {
      float: right;
      margin-top: 10px;
   }
 }
</style>
