<template>
  <div class="eq-spread">
     <div class="vr-left">
       <p class="left-title">{{Info.infos.EquipLocalName || Info.infos.EquipName}}-{{Info.infos.EquipLocalID || Info.infos.EquipID}}</p>
       <p class="left-remark">所在位置：<span>{{location}} </span></p>
       <div class="box-content">
         <div class="box-left">
           <table>
              <tr class="RQ">
                <td>设备二维码</td>
                <td class="qr-code">
                  <img :src="Info.infos.EquipQRCode?`/data-platform-3/image-service/common/file_get?systemId=dataPlatform&key=${Info.infos.EquipQRCode}`:'/static/img/noimg.png'">
                  <p class="download" v-if="Info.infos.EquipQRCode" @click="downloadFile(Info.infos.EquipQRCode)">下载</p>
                </td>
                <td><p v-if="Info.infos.InsuranceNum_his">保险保单 <span>{{Info.infos.InsuranceNum_his.length || 0 }}份</span></p><p v-if="Info.infos.InstallDrawing_his">安装图纸 <span>{{Info.infos.InstallDrawing_his.length || 0 }}份</span></p><p v-if="Info.infos.Drawing_his">设备图纸 <span>{{Info.infos.Drawing_his.length || 0 }}份</span></p></td>
                <td><p v-if="Info.infos.InsuranceNum_his&Info.infos.InsuranceNum" class="load" @click="downloadFile(2,Info.infos.InsuranceNum)">保险文件下载</p><p class="load" v-if="Info.infos.InstallDrawing_his" @click="downloadFile(2,Info.infos.InstallDrawing)">图纸下载</p><p class="load" v-if="Info.infos.Drawing_his" @click="downloadFile(2,Info.infos.Drawing)">图纸下载</p></td>
              </tr>
              <tr>
                <td>所属系统:</td>
                <td>--</td>
                <td>生产厂家:</td>
                <td>{{Info.infos.Manufacturer || '--'}}</td>
              </tr>
              <tr>
                <td>所属空间:</td>
                <td>--</td>
                <td>生产日期:</td>
                <td>{{Info.infos.ProductDate || '--'}}</td>
              </tr>
              <tr>
                <td>设备型号:</td>
                <td>{{Info.infos.Specification || '--'}}</td>
                <td>出厂编号:</td>
                <td>{{Info.infos.SerialNum || '--'}}</td>
              </tr>
              <tr>
                <td>BIM模型中编码:</td>
                <td>{{Info.infos.BIMID || '--'}}</td>
                <td>供应商单位名称:</td>
                <td>{{Info.infos.Supplier || '--'}}</td>
              </tr>
              <tr>
                <td>采购价格:</td>
                <td>{{Info.infos.PurchasePrice || '--'}} 元</td>
                <td>供应商联系人:</td>
                <td>{{Info.infos.SupplierContactor || '--'}}</td>
              </tr>
              <tr>
                <td>安装位置:</td>
                <td>{{Info.infos.InstallLocation || '--'}}</td>
                 <td>供应商联系电话:</td>
                <td>{{Info.infos.SupplierPhone || '--'}}</td>
              </tr>
              <tr>
                <td>投产日期:</td>
                <td>{{Info.infos.StartDate || '--'}}</td>
                <td>保险单号:</td>
                <td>{{Info.infos.InsuranceNum || '--'}}</td>
              </tr>
              <tr>
                <td>维修商联系电话:</td>
                <td>{{Info.infos.MaintainerPhone || '--'}}</td>
                <td>保险公司名称:</td>
                <td>{{Info.infos.Insurer || '--'}}</td>
              </tr>
              <tr>
                <td>维修商单位名称:</td>
                <td>{{Info.infos.Maintainer || '--'}}</td>
                <td>保险公司联系人:</td>
                <td>{{Info.infos.InsurerContactor || '--'}}</td>
              </tr>
              <tr>
                <td>维修公司联系人:</td>
                <td>{{Info.infos.InsurerContactor || '--'}}</td>
                <td>保险公司联系电话:</td>
                <td>{{Info.infos.InsurerPhone || '--'}}</td>
              </tr>
              <tr>
                <td>维保负责人:</td>
                <td>{{Info.infos.Principal || '--'}}</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">
                    <property-table :tableData='tableData'></property-table>
                  </p>
              </Panel>
          </Collapse>
       </div>
     </div>
     <div class="vr-right">
      <eq-right :Info='Info' :ElecConsumPData='ElecConsumPData' :subsetCount='subsetCount' :repairRadio='repairRadio'
      :AccElecConsumData="AccElecConsumData" :noAlarmNum='noAlarmNum' :orderCount='orderCount' :RunStatusData='RunStatusData' :moniData='moniData'></eq-right>
     </div>
     <div class="mask-bg"></div>
     <div class="mask">
       <message-modal @close='close' :isQR='isQR' :objArr='objArr'></message-modal>
     </div>
  </div>
</template>

<script>
import PicSwipe from '../vr/PicSwipe'
import propertyTable from './PropertyTable'
import eqRight from '../vr/EqRight'
import messageModal from './MessageModal'
import {currentTime} from '../../tools/currentDate.js'
import axios from 'axios'
export default {
  components: {
    PicSwipe,
    propertyTable,
    eqRight,
    messageModal
  },

  mixins: [],

  props: {

  },

  data () {
    return {
      panelValue: '',
      Info: {
        infos: {
          EquipLocalName: '--',
          EquipLocalID: '--',
          EquipQRCode: '',
          Manufacturer: '--',
          ProductDate: '--',
          Specification: '--',
          SerialNum: '--',
          BIMID: '--',
          Pic: [],
          Supplier: '--',
          PurchasePrice: '--',
          InstallLocation: '--',
          StartDate: '--',
          SupplierContactor: '--',
          InsuranceNum: '--',
          MaintainerPhone: '--',
          Insurer: '--',
          Maintainer: '--',
          InsurerContactor: '--',
          InsurerPhone: '--',
          Principal: '--'
        },
        location: {
          building: '--',
          floor: '--'
        }
      },
      bdObjName: '',
      flObjName: '',
      sysObjName: "",
      tableData: [],
      isQR: 1,
      objectId: 'Eq1101080001001ACCCOP014',
      noAlarmNum: 0, // 未恢复的报警数
      ElecConsumPData: "", // 耗电
      AccElecConsumData: "", // 累计
      orderCount: 0, // 工单
      RunStatusData: "", // 运行状态
      subsetCount: 0, // 同类设备数量
      repairRadio: 0, // 故障率
      moniData: 0, // 摄像头
      objArr: []
    }
  },

  computed: {
    location () {
      if (this.bdObjName || this.flObjName || this.sysObjName) {
        return `${this.bdObjName}-${this.flObjName}-${this.sysObjName}`
      }
      return '未知'
    }
  },

  mounted () {
    this.getId()
    this.getEqNameAndId()
    // this.initData(this.objectId)
    // this.getEqRepair()
  },

  methods: {
    getId () {
      this.objectId = this.$route.query.id
      this.initData(this.objectId)
      this.searchBuildingName(this.objectId)
      this.getCurrentData(this.objectId)
      this.underwayOrder(this.objectId)
      this.getMoniCount(this.objectId)
      this.getNoAlarmNum(this.objectId)
      this.getEqRepair()
    },
    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,secret)
      this.$store.commit('setProId', pid)
      this.$store.commit(`setSecret`, secret)
       console.log( this.$store.state.secret)
      this.initData(this.objectId)
      this.searchBuildingName(this.objectId)
      this.getCurrentData(this.objectId)
      this.underwayOrder(this.objectId)
      this.getMoniCount(this.objectId)
      this.getNoAlarmNum(this.objectId)
      this.getEqRepair()
    },
    // 右侧未恢复报警数
    getNoAlarmNum (objectId) {
      let params = {
        "criteria": {
          "objectId": objectId, // 空间id
          "status": "alarm"
        }
      }
      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
        this.noAlarmNum = data.Count
      })
    },
    // 右侧进行中的工单
    underwayOrder (objectId) {
      let params = {
        order_state: "5",
        equip_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
      })
    },
    // 同类设备数量
    getSubset (type) {
      let params = {
        noInfo: true,
        criteria: {
          type: [type]
        }
      }
      axios.post(`/data-platform-3/data-platform-3/object/subset_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.subsetCount = data.Count
        }
      })
    },
    // 故障率
    getEqRepair () {
      axios.get(`/info-mng-backend/info-mng-backend/saas/getEqRepairCount?projectId=${this.$store.state.projId}`).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.repairRadio = (data.repairCount / data.eqCount) * 100
        }
      })
    },
    // 耗电量
    getCurrentData (objectId) {
      let params = {
        criterias: [
          {
            id: objectId,
            code: "ElecConsumP"
          },
          {
            id: objectId,
            code: "AccElecConsum"
          },
          {
            id: objectId,
            code: "RunStatus"
          }
        ]
      }
      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
            }
            if (el.code == 'RunStatus') {
              this.RunStatusData = el.data
            }
          })
        }
      })
    },
    // 摄像头
    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: ['EqObj'],
        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 : ""
            this.sysObjName = data.Content[0].sysObjName ? data.Content[0].sysObjName : ""
          }
        }
      })
    },
    // 资产 (目前没有)
    getTableData (key) {
      // let params = {
      //   criterias: {
      //     graphType: 'EquipinSpace',
      //     relType: '1',
      //     toId: this.objectId, // 空间id
      //     side: 'fromId'
      //   }
      // }
      // axios.post(`/data-platform-3/data-platform-3/property/id_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.tableData.forEach(el => {
      //       el.eqName = el.infos.EquipLocalName || '--'
      //       el.eqId = el.infos.EquipLocalID || '--'
      //       el.category = el.category // 记得翻译
      //       el.location = el.location ? el.location.building : '--' // 拼接
      //     })
      //   }
      // })
    },
    initData (objectId) {
      let params = {
        criterias: [
          {id: objectId}],
        'historyInfos': true
      }
      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]
          if (this.Info.infos.Pic) {
            this.draw(this.Info.infos.Pic[0].key)
          }
          if (this.Info.category) {
            this.getSubset(this.Info.category.slice(2, 6))
          }
        }
      })
    },
    // 查看更多的点击事件
    getMoreInfo (Info) {
      this.$router.push({path: 'check', query: {obj: JSON.stringify(Info)}})
    },
    // 查看全景图
    draw (key) {
      var div = document.getElementById('container')
      // 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, objArr) {
      this.isQR = isQR
      this.objArr = objArr
      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" >
.eq-spread {
        font-size: 16px;
        margin: 0;
        display: flex;
        .vr-left {
          width: 78%;
          min-width: 1010px;
          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;
          }
          .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;
            justify-content:space-between;
            .box-left {
              width:50%;
              min-width: 500px;
              background: #F5F5F5;
              border-radius: 2px;
              margin-right: 20px;
              padding-top: 20px;
              display: inline-block;
              height: 740px;
              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;
                  }
                  .load {
                    color: #6682E6;
                    cursor: pointer;
                  }
                  p{
                    >span {
                        color:#212830;
                    }
                  }
                  .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: 50%;
              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">
 .eq-spread {
    .box-bottom{
        .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>
