<template>
   <div class="cent">
       <h3 class="p3" v-if="flag1">监测点详细信息</h3>
       <img v-show="false" src="../../assets/zz.png"  style="width:50px;height:50px"/>
       <embed id="embedSvg" @mouseover="dd" v-if="flag"
       :style="'width:100%;height:'+(mainHeight-5)+'px'"
       type="image/svg+xml"
       :src="url"
       ></embed>
    <div v-if="flag1">

     <!-- <embed id="embedSvg"
       style="width:100%;height:90vh"
       type="image/svg+xml"
       :src="url2"
       ></embed> -->

    <el-row :gutter="20" style="padding:10px">
       <el-button type="primary" class="el-icon-refresh-left back" @click="back">返  回</el-button>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../../assets/zzxq.png" style="height:75vh"/>
                <h3>{{cedian.name}}</h3>
            </div>
            </el-col>
        <el-col :span="18">
            <div class="grid-content bg-purple-light">
                <el-row :gutter="5" >
                           <el-col
                            v-for="(item,index) in cedian.kjsj"
                           :key="index"
                           :span="6" style="margin-top:5px">
                                <el-card class="box-card kj">
                                <div slot="header" class="clearfix name">
                                    <span>{{item.name}}</span>
                                </div>
                                <img src="../../assets/login/logo.png" style="width:50px;height:50px;float:left"/>
                                <div class="text item" style="margin-left:30%;font-size:36px;color:rgb(93, 255, 17)">
                                    {{item.value}}
                                </div>
                                </el-card>
                           </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:10px;color:rgb(11, 157, 194)">
                    <el-col :span="12">
                        <div class="grid-content bg-purple" style="text-align: center;">
                            <h3 v-for="(item,index) in cezhi.dy" style="margin-right:15%">{{item.name}}:<span style="margin-left:10%;color:#000">{{item.value}}</span><span style="margin-left:10%;">{{item.dw}}</span></h3>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <h3 v-for="(item,index) in cezhi.dl" style="margin-right:15%">{{item.name}}:<span style="margin-left:10%;color:#000">{{item.value}}</span><span style="margin-left:10%;">{{item.dw}}</span></h3>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
    </div>
   </div>
</template>
<script>
import $ from 'jquery'
export default {
    data () {
        return {
          mainHeight:undefined,
          flag:true,
          flag1:false,
          url:require('../../assets/layout/99.svg'),
          url2:require('../../assets/layout/yct.svg'),
          cedian:{
              name:'1#-1路配电出线柜',
              kjsj:[{
                name:'L1有功',
                value:'1056W'
              },{
                name:'L2有功',
                value:'1056W'
              },{
                name:'L3有功',
                value:'1056W'
              },{
                name:'L4有功',
                value:'1056W'
              },{
                name:'L1功率因素',
                value:'0.85'
              },{
                name:'L2功率因素',
                value:'0.85'
              },{
                name:'L3功率因素',
                value:'0.85'
              },{
                name:'L4功率因素',
                value:'0.85'
              },{
                name:'总净有功电度',
                value:'1056kW/h'
              },{
                name:'总正向有功电度',
                value:'1098kW/h'
              }]
          },
          cezhi:{
            dy:[{
               name:'L1电压有效值',
               value:455,
               dw:'V'
             },{
             name:'L2电压有效值',
             value:455,
             dw:'V'
            },{
             name:'L3电压有效值',
             value:455,
             dw:'V'
            },{
             name:'L1基波有效值',
             value:455,
             dw:'W'
            },{
             name:'L2基波有功值',
             value:455,
             dw:'W'
            },{
             name:'L3基波有效值',
             value:455,
             dw:'W'
            }],
            dl:[{
              name:'L1电流有效值',
              value:455,
              dw:'A'
             },{
             name:'L2电流有效值',
             value:455,
             dw:'A'
            },{
             name:'L3电流有效值',
             value:455,
             dw:'A'
            },{
             name:'总基波有功值',
             value:455,
             dw:'W'
            },{
             name:'总基波净有功电度',
             value:455,
             dw:'kW/h'
            },{
             name:'总基波正向有功电度',
             value:455,
             dw:'kW/h'
            }]
          }
        }

    },
    onload(){

    },
    mounted(){
    this.mainHeight = window.sessionStorage.getItem('mainHeight')
    },
    updated(){

    },
    methods:{
      dd(){
         this.$nextTick(()=> { this.intit()})
        },
        intit(){
           var embedSvg = document.getElementById("embedSvg")
           embedSvg = embedSvg.getSVGDocument().getElementById('svg')
           console.log("SVG DOM: ", embedSvg)
           var id=''
           for(var i=1;i<=14;i++){
               id = 'zz'+i
               var obj = embedSvg.getElementById(id)
               obj.innerHTML="点我跳转详情";
               obj.addEventListener('click', this.showMsg, false);
               console.log("svg-dom: ", obj)
           }


        },
        showMsg(){
            this.flag1=true
            this.flag=false

            //alert(9999999)
        },
        back(){
            this.flag=true
            this.flag1=false
        }

    }

}
</script>
<style>
.cent {
  cursor:pointer;
  overflow: hidden;
  text-align: center;

}
.p3 {
   margin:0 auto;color:rgb(7, 209, 245)
  }
 .kj {
  background-image: linear-gradient(#2ca2b4, #064e60);
  color:#fff;
  opacity:0.8;
 }
 .name {
  height:30px;
  background:#064e60;
  padding:5px
 }
 .clearfix .name span {
  line-height:15px;color:#fff;font-size:18px
 }
  .bg-purple-dark {
    background: #f8f9fb;
  }
  .bg-purple {
    background: #eef0f0;
  }
  .bg-purple-light {
    /* background: #e5e9f2; */

  }
   .right-top {
     border-style:solid hidden hidden hidden;
     color:rgb(7, 131, 161);
     border:1.5px solid rgb(7, 131, 161)
  }
  .el-card__header {
    padding:0px 0px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.back {
  float:right;
  margin-bottom:10px;
  margin-right:10px
}
</style>
