<template>
  <div>
    <BasicLayout>
      <template #wrapper>
        <el-card class="box-card">
          <h4 class="title_h4">PMS3.0</h4>
          <!-- <div style="display:flex;justify-content: space-between;z-index:1; position:relative">
            <span @click="go('/home')" style="color:#fff;display: inline-block;position:absolute;left:10px;top: 6px;" title="回到主菜单">
              <i class='el-icon-arrow-left' style="vertical-align:middle;margin-top:0;margin-left:3px;color:#515a6e" size="24"></i>
            </span>
            <div class="appwrap" style="margin-left:50px">
              <el-form :model="appFormItem" ref="appFormItem">
                <el-form-item label="" prop="operation_system_id">
                  <el-select v-model="appFormItem.operation_system_id" style="width:400px" @change='operationChange' filterable clearable>
                    <el-option v-for="item in appList" :value="item.id" :key="item.id">{{ item.operation_name }}</el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button type="dashed" class='ghost' @click="refresh()">top refresh</el-button>
            </div>
          </div> -->
          <div class="grafana_box">
            <el-row :gutter="10">
              <el-col :span="18">
                <el-row :gutter="10">
                  <el-col :span="12" style="margin-bottom:10px">
                      <div class="grafana_card">
                        <iframe ref='g_iframe' :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&panelId=6&kiosk=tv`" width="100%" frameborder="0"></iframe>
                      </div>
                    </el-col>
                    <el-col :span="12" style="margin-bottom:10px">
                      <div class="grafana_card">
                        <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681378829442&to=1681379129442&panelId=4`" width="100%" frameborder="0"></iframe>
                      </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="grafana_card">
                      <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&panelId=9`" width="100%" frameborder="0"></iframe>
                      </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grafana_card">
                      <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&panelId=11`" width="100%" frameborder="0"></iframe>
                    </div>
                  </el-col>
                  <!-- <el-col :span="8">
                    <div class="grafana_card"><iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681375694438&to=1681375994439&panelId=12`" width="100%" frameborder="0"></iframe></div>
                  </el-col> -->
                </el-row>
              </el-col>
              <el-col :span="6">
                <div class="grafana_card" >
                  <iframe  height='312' :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681436141655&to=1681439741655&panelId=14`" width="100%" frameborder="0"></iframe>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top:10px;" class="tabbox">
            <el-tabs ref="tabs" tab-position="left" type="card" v-model="activeName" style="min-height: 400px;" @tab-click="handleClickTab">
              <el-tab-pane label="动态拓扑" name="topo">
                <!-- sandbox="allow-same-origin allow-forms allow-scripts allow-popups" -->
                <div style="position:relative;padding:10px;background:#fff;">
                    <!-- <a class="title_href" href="http://observe-ui.cecf.base:8580/top/" target='_blank'> -->
                    <a class="title_href" :href="`${topoUrl}`" target='_blank'>
                      <i class="el-icon-full-screen"></i>
                    </a>
                    <iframe
                    :src="iframeUrl"
                    style="width:100%;height:100%;min-height:800px"
                    id="topoFrame"
                    scrolling='auto'
                    frameBorder='no'
                    border='0'
                    marginWidth='0'
                    marginHeight='0'
                    ></iframe>
                 </div>
              </el-tab-pane>
              <el-tab-pane label="运行方式" name="mode">
                <div style="min-height: 400px;background:#fff;color:#999;padding:10px;">暂无数据</div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>


        <!-- 侧边弹窗 -->
        <el-drawer
          title="监控详情"
          :visible.sync="drawer"
          direction="rtl"
          :before-close="handleClose"
          append-to-body
          size='60%'
          >
          <div>
              <el-collapse v-model="activeCollapse">
                <el-collapse-item title="告警信息" name="1">
                  <div class="no_data">暂无数据</div>
                </el-collapse-item>
                <el-collapse-item title="链路监控" name="2">
                  <el-row :gutter="10">
                    <el-col :span="24" style="margin-bottom:10px">
                      <div class="grafana_card">
                        <a class="title_href" :href="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681378913610&to=1681379213610&panelId=56`" target='_blank'>
                          <i class="el-icon-full-screen"></i>
                        </a>
                        <iframe ref='' :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681378913610&to=1681379213610&panelId=56`" width="100%" height="300" frameborder="0"></iframe>
                      </div>
                    </el-col>
                    <el-col :span="24" style="margin-bottom:10px">
                      <div class="grafana_card">
                        <a class="title_href" :href="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681378933338&to=1681379233338&panelId=62`" target='_blank'>
                          <i class="el-icon-full-screen"></i>
                        </a>
                        <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681378933338&to=1681379233338&panelId=62`" width="100%" height="300" frameborder="0"></iframe>
                      </div>
                    </el-col>
                    <el-col :span="24" style="margin-bottom:10px">
                      <div class="grafana_card">
                        <a class="title_href" :href="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681437356609&to=1681440956609&panelId=66`" target='_blank'>
                          <i class="el-icon-full-screen"></i>
                        </a>
                        <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681437356609&to=1681440956609&panelId=66`" width="100%" height="300" frameborder="0"></iframe>
                      </div>
                    </el-col>
                    <el-col :span="24" style="margin-bottom:10px">
                      <div class="grafana_card">
                        <a class="title_href" :href="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681379172911&to=1681379472911&panelId=60`" target='_blank'>
                          <i class="el-icon-full-screen"></i>
                        </a>
                        <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681379172911&to=1681379472911&panelId=60`" width="100%" height="300" frameborder="0"></iframe>
                      </div>
                    </el-col>
                    <el-col :span="24" style="margin-bottom:10px">
                      <div class="grafana_card">
                         <a class="title_href" :href="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681379208114&to=1681379508114&panelId=50`" target='_blank'>
                          <i class="el-icon-full-screen"></i>
                        </a>
                        <iframe :src="`${grafanaUrl}/d-solo/azhNvZL4k/pms3-0?orgId=1&from=1681379208114&to=1681379508114&panelId=50`" width="100%" height="300" frameborder="0"></iframe>
                      </div>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="指标" name="3">
                 <div class="no_data">暂无数据</div>
                </el-collapse-item>
                <el-collapse-item title="日志" name="4">
                  <div class="no_data">暂无数据</div>
                </el-collapse-item>
              </el-collapse>
          </div>
        </el-drawer>
      </template>
    </BasicLayout>
    <div class='arrow_box' @click="drawer=true">
			<img :style="{width:'16px',height:'32px',marginLeft:'8px',marginTop:'8px'}" :src="arrow_left"/>
		</div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
   data(){
    return {
      //详细弹窗中的折叠面板
      activeCollapse:['1','2','3','4'],
      //左侧抽屈弹窗
      drawer:false,
      topflag:false,
      //tab
      activeName:'topo',
      arrow_left:require('@/assets/Arrow_left.png'),  //中间箭头控制应用系统详情
      appFormItem:{
					operation_system_id:'72'
			},
      appList:[],
      grafanaUrl:'http://grafana.cestong.com.cn',
      topoUrl:'http://observe-ui.cestong.com.cn/'
    }
   },
   methods:{
    go(router, id,item){
				var data={
					id:id,
				}
	      window.scrollTo(0,0);
        if(id == 'add'){
            this.$router.push(router)
        }else{
            this.$router.push({
                path:router,
                query: data
            });
				}
		},
    //应用改变后
    operationChange(val){
      if(val == undefined){
        return false;
      }else {
        this.$router.push({
          path:'/home',
          query: {
            id:val
          }
        });

        for(var i=0;i<this.appList.length;i++){
          if(val == this.appList[i].id){
            localStorage.setItem('appItem',JSON.stringify(this.appList[i]));
          }
        }
        window.location.reload();
      }
    },
    refresh(){
      this.$http({
          url:"/cmdb/cache/reset/"+this.appFormItem.operation_system_id,
          method:"get",
          headers: {
          'Authorization': 'Bearer ' + getToken() // 特定请求的header
        },
      }).then(reponse => {
        if (reponse.data.code == "200") {
          setTimeout(function(){
            _this.$Message.success('刷新成功');
          },2000);
        }else{
          this.$Message.error(reponse.msg);
        }
      })
      document.getElementById('topology_iframe').contentWindow.location.reload(true);
    },
    handleClose(){
      this.drawer=false;
    },
    // tab切换
    handleClickTab () {
      // this.resetActivePosition(this.$refs.tabs.$el)
    },
    resetActivePosition ($el) { // tabs的样式修改
          this.$nextTick(() => {
            const activeEl = $el.querySelector('.el-tabs__item.is-active');
            const lineEl = $el.querySelector('.el-tabs__active-bar');
            const style = getComputedStyle(activeEl);
            const pl = style.paddingLeft.match(/\d+/)[0] * 1;
            const pt = style.paddingTop.match(/\d+/)[0] * 1;
            const pr = style.paddingRight.match(/\d+/)[0] * 1;
            const w = style.width.match(/\d+/)[0] * 1;
            lineEl.style.transform ='translateY(' + (activeEl.offsetTop + pt) + 'px)';

            // lineEl.style.width = (w - pl - pr) + 'px';
          })
    },
    sendMessageToIframe(){
			var ifr = document.getElementById('topoFrame')
			// var sendid = this.$route.query.id;
      // let data = {}
			// ifr .onload = () => {
			//   	ifr.contentWindow.postMessage({data:sendid},'*');
			// }
    },

    changeStyle() {
      // var iframeWindow = this.$refs.g_iframe.contentWindow;    // 返回iframe中的window对象
      // var iframeDocument = iframeWindow.document;     // 返回HEMLDocument对象，可以使用DOM方法进行操作
      // // 修改iframe中的某个指定元素
      // var element = iframeDocument.getElementsByClassName('preloader_logo')[0];
    //     element.style.padding = "50px";
    //     // 修改iframe的body
    //     var iframeBody = iframeDocument.body;
    //     iframeBody.style.padding = "0px";
        let _this = this;
        this.$refs.g_iframe.onload = function(){
            var iframeWindow = _this.$refs.g_iframe.contentWindow;    // 返回iframe中的window对象
            var iframeDocument = iframeWindow.document;     // 返回HEMLDocument对象，可以使用DOM方法进行操作
            // 修改iframe中的某个指定元素
            // var element = iframeDocument.getElementsByClassName('preloader_logo')[0];
        }
    }

   },
   created(){
    this.grafanaUrl='http://grafana.cestong.com.cn'
    this.topoUrl='http://observe-ui.cestong.com.cn/'
   },
   mounted(){
      // this.changeStyle()
  //     const frame = document.getElementById('topoFrame');
  //         frame.contentWindow.postMessage('', this.iframeUrl);
   }
}

</script>

<style lang="scss" scoped>
.arrow_box{
	width:32px;
	height: 48px;
	background: #2d8cf0;
	position:fixed;
	top:50%;
	right:18px;
	// z-index: 9999;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	// transition:width 300ms ease;
	img{
		display:block;
	}
}
.ghost{
  color: #f8f8f8;
  border-color: #fff;
  border-style: dashed;
  border:1px dashed #fff !important;
}
::v-deep .ghost.el-button:hover{
  color:'e8f4ff'!important;
}
::v-deep .ghost.el-button {
  border:1px dashed #fff !important;
}
.grafana_box{
}
.grafana_card{
    background-color: #fff;
    border: 1px solid #24292e1f;
    border-radius: 3px;
    box-shadow: none;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    // height: 100%;
    position: relative;
    // width: 100%;
    overflow: hidden;
}
::v-deep .el-tabs--border-card {
    background: #FFFFFF;
    border: 1px solid #24292e1f;
    border-radius: 3px;
     -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.12), 0 0 0px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.12), 0 0 0px 0 rgba(0, 0, 0, 0.04);
    // -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.tabbox ::v-deep .el-tabs__nav{
  white-space: normal !important;
}
.tabbox ::v-deep .el-tabs__item {
    padding: 10px 20px 10px 10px;
    line-height: 1.5;
    width: 36px;
    height: auto;
}
.tabbox ::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 0px solid #dfe4ed;
}
.tabbox ::v-deep .el-tabs__item {
  box-shadow: none !important;
}
::v-deep .el-drawer__header{
    // padding: 26px 16px;
    padding: 9px 16px;
    line-height: 1;
    color: #fff;
    background-color: #2d8cf0;
    font-weight: 500;
    font-size: 18px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}
::v-deep .el-drawer__container{
  top:50px;
}
::v-deep .el-collapse-item__header {
    background: #eee;
    text-indent: 12px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}
.no_data{
  color:#999;
  text-align: center;
  margin-top:10px
}
::v-deep .el-drawer__body {
  padding-bottom: 50px;
}

.title_href{
  width:32px;
  height:32px;
  position: absolute;
  top:5px;
  right:0px;
  display: block;
  i{
    font-size: 16px;
    color:#999;
  }
}
::v-deep .el-card {
  background: none;
}
.title_h4{
    margin-top: 11px;
    text-indent: 4px;
    font-size: 24px;
}
::v-deep .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
  background:#fff;
}
::v-deep .el-tabs--left .el-tabs__header.is-left {
    float: left;
    margin-bottom: 0;
    margin-right: 0;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav{
  // border-top:0;
}

</style>
