<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>{{eqMaterial.infos.EquipLocalName || '--'}}详情</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 v-for="(list,index1) in mainInfo" :key='index1' :class="{changeStyle:changeColor == index1}"
                      @click="change(index1)"><a :href="`#${list.href}`">{{list.name}}</a>
                        <template  v-if="list.list">
                            <li v-for="(item,index2) in list.list" :key="index2" :class="{color:changeColor == index1 && liIndex == index2}"  @click="changeLi(index2)"><a :href="`#${item.href}`">{{item.name}}</a></li>
                        </template>
                      </ul>
                  </div>
              </div>
              <div class="content-right" @scroll="handleScroll">
                  <section>
                    <p id="baseInfo" class="group1"><span></span>基本信息</p>
                    <ul>
                        <li><span>设备ID</span>{{eqMaterial.infos.EquipID || '--'}}</li>
                        <li><span>设备二维码图片</span><i v-if="eqMaterial.infos.EquipQRCode" @click="lookAt">查看</i></li>
                        <li><span>设备名称</span>{{eqMaterial.infos.EquipName || '--'}}</li>
                        <li><span>BIM模型中编码</span>{{eqMaterial.infos.BIMID || '--'}}</li>
                        <li><span>设备本地编码</span>{{eqMaterial.infos.EquipLocalID || '--'}}</li>
                        <li><span>BIM模型中坐标</span>{{eqMaterial.infos.BIMLocation || '--'}}</li>
                        <li><span>设备本地名称</span>{{eqMaterial.infos.EquipLocalName || '--'}}</li>
                    </ul>
                  </section>

                  <section>
                    <p id="standInfo" class="group1"><span></span>台账信息</p>
                    <p id="001" class="p-title">设备厂家</p>
                    <ul >
                        <li><span>生产厂家</span>{{eqMaterial.infos.Manufacturer || '--'}}</li>
                        <li><span>品牌</span>{{eqMaterial.infos.Brand || '--'}}</li>
                        <li><span>生产日期</span>{{eqMaterial.infos.ProductDate || '--'}}</li>
                        <li><span>设备型号</span>{{eqMaterial.infos.Specification || '--'}}</li>
                        <li><span>出厂编号</span>{{eqMaterial.infos.SerialNum || '--'}}</li>
                    </ul>
                    <p id="002" class="p-title">供应&购买</p>
                    <ul>
                        <li><span>供应商单位名称</span>{{eqMaterial.infos.Supplier || '--'}}</li>
                        <li><span>供应商联系人</span>{{eqMaterial.infos.SupplierContactor || '--'}}</li>
                        <li><span>供应商联系电话</span>{{eqMaterial.infos.SupplierPhone || '--'}}</li>
                        <li><span>供应商电子邮件</span>{{eqMaterial.infos.SupplierEmail || '--'}}</li>
                        <li><span>供应商网址</span>{{eqMaterial.infos.SupplierWeb || '--'}}</li>
                        <li><span>供应商传真</span>{{eqMaterial.infos.SupplierFax || '--'}}</li>
                        <li><span>供应合同编号</span>{{eqMaterial.infos.SupplierContractID || '--'}}</li>
                        <li><span>资产编号</span>{{eqMaterial.infos.AssetID || '--'}}</li>
                        <li><span>采购价格</span>{{eqMaterial.infos.PurchasePrice || '--'}}</li>
                    </ul>
                    <p id="003" class="p-title"> 现场&安装</p>
                    <ul >
                        <li><span>长</span>{{eqMaterial.infos.Length || '--'}} m</li>
                        <li><span>宽</span>{{eqMaterial.infos.Width || '--'}} m</li>
                        <li><span>高</span>{{eqMaterial.infos.Height || '--'}} m</li>
                        <li><span>净重</span>{{eqMaterial.infos.NetWeight || '--'}} kg</li>
                        <li><span>主体材质</span>{{eqMaterial.infos.Material || '--'}}</li>
                        <li><span>所属部门</span>{{eqMaterial.infos.InstallLocation || '--'}}</li>
                        <li><span>安装位置</span>{{eqMaterial.infos.Width || '--'}}</li>
                    </ul>
                    <p id="004" class="p-title"> 运行&维保</p>
                    <ul >
                        <li><span>维保负责人</span>{{eqMaterial.infos.Principal || '--'}}</li>
                        <li><span>投产日期</span>{{eqMaterial.infos.StartDate || '--'}}</li>
                        <li><span>保修期</span>{{eqMaterial.infos.Warranty || '--'}}</li>
                        <li><span>维保合同截止日期</span>{{eqMaterial.infos.MaintainDeadline || '--'}}</li>
                        <li><span>使用寿命</span>{{eqMaterial.infos.ServiceLife || '--'}}</li>
                        <li><span>预计报废日期</span>{{eqMaterial.infos.ExpectScrapDate || '--'}}</li>
                        <li><span>保养周期</span>{{eqMaterial.infos.MaintainPeriod || '--'}}</li>
                        <li><span>维修商单位名称</span>{{eqMaterial.infos.Maintainer || '--'}}</li>
                        <li><span>维修商联系人</span>{{eqMaterial.infos.MaintainerContactor || '--'}}</li>
                        <li><span>维修商联系电话</span>{{eqMaterial.infos.MaintainerPhone || '--'}}</li>
                        <li><span>维修商电子邮件</span>{{eqMaterial.infos.MaintainerEmai || '--'}}</li>
                        <li><span>维修商网址</span>{{eqMaterial.infos.MaintainerWeb || '--'}}</li>
                        <li><span>维修商传真</span>{{eqMaterial.infos.MaintainerFax || '--'}}</li>
                    </ul>
                    <p id="005" class="p-title"> 保险</p>
                    <ul >
                        <li><span>保险公司名称</span>{{eqMaterial.infos.Insurer || '--'}}</li>
                        <li><span>保险公司联系人</span>{{eqMaterial.infos.InsurerContactor || '--'}}</li>
                        <li><span>保险公司联系电话</span>{{eqMaterial.infos.InsurerPhone || '--'}}</li>
                        <li><span>保险公司电子邮件</span>{{eqMaterial.infos.InsurerEmail || '--'}}</li>
                        <li><span>保险公司网址</span>{{eqMaterial.infos.InsurerWeb || '--'}}</li>
                        <li><span>保险公司传真</span>{{eqMaterial.infos.InsurerFax || '--'}}</li>
                        <li><span>保险单号</span>{{eqMaterial.infos.InsuranceNum || '--'}}</li>
                        <li><span>保险文件</span>{{eqMaterial.infos.InsuranceFile || '--'}}</li>
                    </ul>
                    <p id="006" class="p-title">照片&文档</p>
                    <ul>
                        <li v-if="eqMaterial.infos.Nameplate"><span>设备铭牌照片</span>{{eqMaterial.infos.Nameplate[0].key?eqMaterial.infos.Nameplate[0].key:'--'}}</li>
                    </ul>
                  </section>

                 <section>
                    <p id="controlInfo"><span></span>控制参数</p>
                    <ul>
                        <li><span>控制模式</span>{{eqMaterial.infos.CtrlMode || '--'}}</li>
                    </ul>
                 </section>

                 <section>
                    <p id="setInfo"><span></span>设定参数</p>
                    <ul>
                        <li><span>设备开关设定</span>{{eqMaterial.infos.EquipSwitchSet || '--'}}</li>
                        <li><span>设备开设定</span>{{eqMaterial.infos.EquipOnSet || '--'}}</li>
                        <li><span>设备关设定</span>{{eqMaterial.infos.EquipOffSet || '--'}}</li>
                        <li><span>设备频率设定</span>{{eqMaterial.infos.EquipFreqSet || '--'}}</li>
                        <li><span>设备开度设定</span>{{eqMaterial.infos.EquipOpeningSet || '--'}}</li>
                    </ul>
                 </section>

                  <section>
                    <p id="technologyInfo"><span></span>技术参数</p>
                    <ul>
                        <li><span>额定电压</span>{{eqMaterial.infos.RatedU || '--'}} V</li>
                        <li><span>额定电流</span>{{eqMaterial.infos.RatedI || '--'}} A</li>
                        <li><span>额定功率</span>{{eqMaterial.infos.RatedP || '--'}} kW</li>
                        <li><span>额定频率</span>{{eqMaterial.infos.RatedFreq || '--'}} Hz</li>
                        <li><span>累计运行时间</span>{{eqMaterial.infos.AccRunTime || '--'}} h</li>
                        <li><span>水泵类型</span>{{eqMaterial.infos.PumpType || '--'}}</li>
                        <li><span>泵体安装类型</span>{{eqMaterial.infos.InstallType || '--'}}</li>
                        <li><span>输配介质</span>{{eqMaterial.infos.MediumType || '--'}}</li>
                        <li><span>调节类型</span>{{eqMaterial.infos.AdjustType || '--'}}</li>
                        <li><span>管网使用类型</span>{{eqMaterial.infos.NetUseType || '--'}}</li>
                        <li><span>是否为备用泵</span>{{eqMaterial.infos.isBackup || '--'}}</li>
                        <li><span>额定扬程</span>{{eqMaterial.infos.RatedHead || '--'}} m</li>
                        <li><span>额定驱动压力</span>{{eqMaterial.infos.RatedDrivePress || '--'}} MPa</li>
                        <li><span>额定增压比</span>{{eqMaterial.infos.RatedPressRatio || '--'}}</li>
                        <li><span>额定转速</span>{{eqMaterial.infos.RatedRPM || '--'}} rpm</li>
                    </ul>
                  </section>

                  <section>
                    <p id="operationInfo"><span></span>运行参数</p>
                    <p id="101" class="p-title">运行状态</p>
                    <ul>
                        <li><span>运行状态</span>{{eqMaterial.infos.RunStatus || '--'}}</li>
                        <li><span>本地远程状态</span>{{eqMaterial.infos.RemoteStatus || '--'}}</li>
                        <li><span>A相电压</span>{{eqMaterial.infos.APhaseU || '--'}} V</li>
                        <li><span>B相电压</span>{{eqMaterial.infos.BPhaseU || '--'}} V</li>
                        <li><span>C相电压</span>{{eqMaterial.infos.CPhaseU || '--'}} V</li>
                        <li><span>A相电流</span>{{eqMaterial.infos.APhaseI || '--'}} A</li>
                        <li><span>B相电流</span>{{eqMaterial.infos.BPhaseI || '--'}} A</li>
                        <li><span>C相电流</span>{{eqMaterial.infos.CPhaseI || '--'}} A</li>
                        <li><span>耗电功率</span>{{eqMaterial.infos.ElecConsumP || '--'}} kW</li>
                        <li><span>水泵进口压力</span>{{eqMaterial.infos.InPress || '--'}} MPa</li>
                        <li><span>水泵出口压力</span>{{eqMaterial.infos.OutPress || '--'}} MPa</li>
                        <li><span>电机效率</span>{{eqMaterial.infos.MotorEff || '--'}} %</li>
                        <li><span>瞬时增压比</span>{{eqMaterial.infos.PressRatio || '--'}}</li>
                        <li><span>整体效率</span>{{eqMaterial.infos.OverallEff || '--'}} %</li>
                    </ul>
                    <p id="102" class="p-title">累计参数</p>
                    <ul>
                        <li><span>累计流量</span>{{eqMaterial.infos.AccFlow || '--'}} m³</li>
                        <li><span>累计耗电量</span>{{eqMaterial.infos.AccElecConsum || '--'}} kWh</li>
                        <li><span>累计运行时间</span>{{eqMaterial.infos.AccRunTime || '--'}} h</li>
                        <li><span>开启时间计时</span>{{eqMaterial.infos.OpenTimeCount || '--'}} h</li>
                        <li><span>关闭时间计时</span>{{eqMaterial.infos.CloseTimeCount || '--'}} h</li>
                    </ul>
                  </section>

                  <section style="min-height: 590px">
                    <p id="eneryInfo"><span></span>能耗信息</p>
                    <enery-params v-show="eqMaterial" :roomInfo='eqMaterial' :isShowChange='isShowChange'></enery-params>
                  </section>
              </div>
          </div>
      </div>
      <div class="mask-bg"></div>
     <div class="mask">
       <message-modal @close='close' :isQR='isQR'></message-modal>
     </div>
  </div>
</template>

<script>
import eneryParams from '../detail/EneryParams'
import messageModal from '../spread/MessageModal.vue'
import axios from 'axios'
export default {
  components: {
    eneryParams,
    messageModal
  },

  mixins: [],

  props: {

  },

  data () {
    return {
      isData: false,
      isShowChange: false,
      eqMaterial: {
        infos: {
          EquipLocalName: "--",
          EquipName: "--",
          EquipID: "--",
          EquipLocalID: "--",
          EquipQRCode: "--",
          Manufacturer: "--",
          ProductDate: "--",
          Specification: "--",
          SerialNum: "--",
          BIMID: "--",
          Supplier: "--",
          PurchasePrice: "--",
          InstallLocation: "--",
          StartDate: "--",
          SupplierContactor: "--",
          InsuranceNum: "--",
          MaintainerPhone: "--",
          Insurer: "--",
          Maintainer: "--",
          InsurerContactor: "--",
          InsurerPhone: "--",
          Principal: "--",
          Nameplate: [{key: "--"}]
        },
        location: {
          building: "--",
          floor: "--"
        }
      },
      isQR: "",
      changeColor: 0,
      liIndex: -1,
      mainInfo: [
        {name: "基本信息", href: "baseInfo"},
        {
          name: "台账信息",
          href: "standInfo",
          list: [
            {name: "设备厂家", href: "001"},
            {name: "供应&购买", href: "002"},
            {name: "现场&安装", href: "003"},
            {name: "运行&维保", href: "004"},
            {name: "保险", href: "005"},
            {name: "照片&文档", href: "006"}
          ]},
        {name: "控制参数", href: "controlInfo"},
        {name: "设定参数", href: "setInfo"},
        {name: "技术参数", href: "technologyInfo"},
        {
          name: "运行参数",
          href: "operationInfo",
          list: [
            {name: "运行状态", href: "101"},
            {name: "累计参数", href: "102"}
          ]
        },
        {name: "能耗信息", href: "eneryInfo"}
      ],
      groups: [],
      box: null
    }
  },

  computed: {

  },

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

  methods: {
    getCurrentData () {
      let params = {
        criterias: [
          {
            id: this.eqMaterial.id,
            code: "ElecConsumP"
          },
          {
            id: this.eqMaterial.id,
            code: "AccElecConsum"
          }
        ]
      }
      axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&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
            }
          })
        }
      })
    },
    change (index) {
      this.changeColor = index
    },
    changeLi (index2) {
      this.liIndex = index2
    },
    // 路由传参得到Info
    getObjInfo () {
      this.eqMaterial = JSON.parse(this.$route.query.obj)
      this.getCurrentData()
    },
    back () {
      history.go(-1)
    },
    // 下载弹框
    lookAt () {
      this.isQR = this.eqMaterial.infos.EquipQRCode
      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'
      })
    },
    // 滚动触发事件
    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
          let pTitles = this.groups[i].querySelectorAll('.p-title')
          let j = pTitles ? pTitles.length - 1 : 0
          for (; j >= 0; j--) {
            if (pTitles[j].offsetTop <= top) {
              this.liIndex = j
              break
            }
          }
          break
        }
      }
    }
  }

}
</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 {
            width: 100%;
            padding-top: 10px;
            p {
                font-size: 18px;
                color: #212830;
                font-weight: bold;
                padding: 24px 0 20px 0;
            }
        }
        hr {
            margin-bottom: 0;
        }
        .content-bottom {
            display: flex;
            .content-left {
                width: 264px;
                border-radius: 2px;
                padding-top: 10px;
                margin-right: 60px;
                margin-bottom: 20px;
                background: #FAFAFA;
                div {
                    .p-title{
                        margin-left: 24px ;
                        margin-bottom: 12px;
                        border-bottom:1px dashed #cecece;
                    }
                    .p-title{
                        padding: 20px;
                    }
                    .group1{
                      margin-bottom:20px;
                    }
                    ul{
                        font-size: 16px;
                        padding:5px 0 5px 40px;
                        font-weight: bold;
                        cursor: pointer;
                        a {
                             color: #212830;
                            &:hover,&:active {
                                color:#6682E6;
                            }
                        }
                    li {
                        font-size: 16px;
                        padding:18px 0 0 40px;
                        font-weight: bold;
                        cursor: pointer;
                        a{
                             color: #6D747C;
                        }
                         &:first-child {
                            padding-top: 15px;
                        }
                        &:last-child {
                            padding-bottom: 0;
                        }
                    }
                }
                }
            }
            .content-right {
                width: 1450px;
                height: 700px;
                overflow-y:scroll;
                padding: 10px;
                position: relative;
               section{
                    p {
                        height: 40px;
                        span {
                            display: inline-block;
                            width: 4px;
                            height: 16px;
                            background: #728DEE;
                            margin-right: 10px;
                            vertical-align: middle;
                        }
                    }
                    ul {
                        display: flex;
                        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;
                            }
                        }
                    }
               }
            }
        }
    }
    .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;
        }
    }
    .color{
         >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>
