<template>
  <div class="eq-asset">
     <div class="vr-left">
       <p class="left-title">{{Info.infos.EquipLocalName || Info.infos.EquipName}}-{{Info.infos.EquipLocalID || Info.infos.EquipID}}</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></td>
                <td><p class="load" v-if="Info.infos.InsuranceNum" @click="downloadFile(2,Info.infos.InsuranceNum)">保险文件下载</p><p class="load" v-if="Info.infos.InstallDrawing"  @click="downloadFile(2,Info.infos.InstallDrawing)">图纸下载</p></td>
              </tr>
              <tr>
                <td>品牌:</td>
                <td>{{Info.infos.Brand || '--'}}</td>
                <td>生产厂家:</td>
                <td>{{Info.infos.Manufacturer || '--'}}</td>
              </tr>
              <tr>
                <td>型号:</td>
                <td>{{Info.infos.Specification || '--'}}</td>
                <td>生产日期:</td>
                <td>{{Info.infos.ProductDate || '--'}}</td>
              </tr>
              <tr>
                <td>采购价格:</td>
                <td>{{Info.infos.PurchasePrice || '--'}} 元</td>
                <td>供应商单位名称:</td>
                <td>{{Info.infos.Supplier || '--'}}</td>
              </tr>
              <tr>
                <td>主体材质:</td>
                <td>{{Info.infos.Material || '--'}}</td>
                <td>供应商联系人:</td>
                <td>{{Info.infos.SupplierContactor || '--'}}</td>
              </tr>
              <tr>
                <td>所属部门:</td>
                <td>{{Info.infos.Dept || '--'}}</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.ServiceLife || '--'}}</td>
                <td>保险公司:</td>
                <td>{{Info.infos.Insurer || '--'}}</td>
              </tr>
              <tr>
                <td>维修联系人:</td>
                <td>{{Info.infos.MaintainerContactor || '--'}}</td>
                <td>保险联系人:</td>
                <td>{{Info.infos.InsurerContactor || '--'}}</td>
              </tr>
              <tr>
                <td>维修联系电话:</td>
                <td>{{Info.infos.MaintainerPhone || '--'}}</td>
                <td>保险联系电话:</td>
                <td>{{Info.infos.InsurerPhone || '--'}}</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 v-if="Info.infos.Pic && Info.infos.Pic[0] && Info.infos.Pic[0].type=='panorama'">
               <div id="container" >
              </div>
             </div>
             <div class="image-content" v-if="Info.infos.Pic && keySrc">
               <img :src="`/data-platform-3/image-service/common/image_get?systemId=dataPlatform&key=${keySrc}`">
             </div>

               <div class="no-right" v-else>
                  <img src="/static/img/no_pic.png" alt="">
                  <br/><br/>
                  <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="isPanorama">
              </pic-swipe>
            </div>
             <div class="swip-nocontainer" v-else>
               <div class="none">
                  <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>
              <Panel name="1">
                  历史安装在此处的资产
                  <p slot="content">
                    <asset-table :tableData='tableData'></asset-table>
                  </p>
              </Panel>
          </Collapse>`
       </div>
     </div>
     <div class="vr-right">
      <eq-right :linkEq='linkEq' :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 '../vr/PicSwipe'
import assetTable from './AssetTable'
import eqRight from '../vr/EqRight'
import messageModal from '../spread/MessageModal'
import axios from 'axios'
export default {
  components: {
    PicSwipe,
    assetTable,
    eqRight,
    messageModal
  },

  mixins: [],

  props: {

  },

  data () {
    return {
      panelValue: '',
      list: [],
      tableData: [],
      keySrc: "",
      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: "--",
      isQR: 1,
      objectId: 'Pe00ce06da7b8c49f4b9e2012a59f1bf3d',
      objArr: [],
      linkEq: "", // 资产相关设备
      moniData: 0 // 摄像头
    }
  },

  computed: {
  },

  mounted () {
    this.getEqNameAndId()
    this.getAssetData(this.objectId)
  },
  watch: {

  },

  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.getAssetData(this.objectId)
    },
    // 摄像头
    getMoniCount (objectId) {
      let params = {
        id: this.linkEq
      }
      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
        }
      })
    },
    // 判断显示全景图还是大图
    isPanorama (item) { // panorama
      if (item.type == 'image') {
        this.keySrc = item.key
      }
      if (item.type == 'panorama') {
        this.draw(item.key)
      }
    },
    // 获取去资产信息
    getAssetData (objectId) {
      let params = {
        criterias: [
          {id: objectId}
        ],
        'historyInfos': true
      }
      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.Info = data.Content[0]
          if (this.Info.infos.Pic && this.Info.infos.Pic.length > 0) {
            if (this.Info.infos.Pic[0].type == 'image') {
              this.keySrc = this.Info.infos.Pic[0].key
            }
            if (this.Info.infos.Pic[0].type == 'panorama') {
              this.draw(this.Info.infos.Pic[0].key)
            }
          }
          if (this.Info.relation && this.Info.relation.link) {
            this.linkEq = this.Info.relation.link
            this.getMoniCount()
          }
        }
      })
    },
    // 查看更多的点击事件
    getMoreInfo (Info) {
      this.$router.push({path: 'check', query: {obj: JSON.stringify(Info)}})
    },
    // 查看全景图
    draw (key) {
      var photosphere = 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: photosphere,
        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-asset {
        font-size: 16px;
        margin: 0;
        display: flex;
        .vr-left {
          width: 78%;
          min-width: 1050px;
          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;
          }
          .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;
              display: inline-block;
              padding-top: 20px;
              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:12px;
                  }
                }
              }
              .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: 440px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  cursor: pointer;
                }
                .image-content{
                  >img{
                    width: 100%;
                    height: 440px;
                  }
                }
              }
              .swip-container{
                margin-top: 20px;
                height: 152px;
                color:#6D747C;
              }
              .swip-nocontainer{
                margin-top: 20px;
                height: 152px;

                color:#6D747C;
               .none{
                 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-asset {
   .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>
