<template>
  <div class="topo-content">
    <!-- topo内容 -->
    <span id="fullscreen_button" class="title_href">
      <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
    </span>
    <div class="topo-header">
      <div class="regend-box">
        <div class="listwrap">
          <span class="value">
            <el-progress :percentage="100" :color="'#00B54F'" :show-text="false" />
          </span>
          <span class="lable">性能极佳 </span>
        </div>
        <div class="listwrap">
          <span class="value">
            <el-progress :percentage="100" :color="'#60B4F9'" :show-text="false" />
          </span>
          <span class="lable">性能较好 </span>
        </div>
        <div class="listwrap">
          <span class="value">
            <el-progress :percentage="100" :color="'#8B8B8B'" :show-text="false" />
          </span>
          <span class="lable">性能一般 </span>
        </div>
        <div class="listwrap">
          <span class="value">
            <el-progress :percentage="100" :color="'#F1A657'" :show-text="false" />
          </span>
          <span class="lable">性能一般 </span>
        </div>
        <div class="listwrap">
          <span class="value">
            <el-progress :percentage="100" :color="'#EA463D'" :show-text="false" />
          </span>
          <span class="lable">性能不佳 </span>
        </div>
      </div>
      <TimeRangeUi />
    </div>
    <div>
      <div v-loading="loading" style="height:calc(100vh - 130px);">
        <iframe
          id="topoFrame"
          ref="topoFrame"
          :src="topoUrl"
          style="width:100%;height:calc(100vh - 130px);min-height:500px"
          scrolling="auto"
          frameBorder="no"
          border="0"
          marginWidth="0"
          marginHeight="0"
        />
      </div>
    </div>
    <!-- topo全屏显示 -->
    <div class="topoWrap">
      <el-dialog
        :visible.sync="visibleTopo"
        :fullscreen="true"
        append-to-body
        center
      >
        <div v-loading="loading" style="height:calc(100vh - 10px);" id="iframeBox">
          <iframe
            ref="topoFrame"
            :src="topoUrl"
            style="width:100%;height:calc(100vh - 10px);min-height:700px"
            scrolling="auto"
            frameBorder="no"
            border="0"
            marginWidth="0"
            marginHeight="0"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import storage from '@/utils/storage'
import TimeRangeUi from './TimeRangeUi.vue'
export default {
  name: 'TopoCon',
  data() {
    return {
      loading: false,
      isFull: false,
      visibleTopo: false,
      topoUrl: '/ui/index.html',
      sendObj: {},
      appName: '',
      appId: '',
      appItem: {},
      collapsed: false,
      iframe: null,
      // bellpin: require('../../../../assets/apply/bellpin.png'),
      // green_down: require('../../../../assets/apply/green_down.png'),
      // green_up: require('../../../../../assets/apply/green_up.png'),
      // g_down: require('../../../../assets/apply/g_down.jpg'),
      // g_up: require('../../../../assets/apply/g_up.jpg'),
      // red_down: require('../../../../assets/apply/red_down.png'),
      // red_up: require('../../../../assets/apply/red_up.png'),
      // orange_down: require('../../../../assets/apply/orange_down.png'),
      // orange_up: require('../../../../assets/apply/orange_up.png'),
      // more: require('../../../../assets/apply/more.png'),
      // pushpin: require('../../../../assets/apply/pushpin.png'),
      // green_circle: require('../../../../assets/apply/green_circle.png'),
      // orange_circle: require('../../../../assets/apply/orange_circle.png'),
      // blue_circle: require('../../../../assets/apply/blue_circle.png'),
      // gray_circle: require('../../../../assets/apply/gray_circle.png'),
      // red_circle: require('../../../../assets/apply/red_circle.png'),
      // panelImageURL: require('../../../../assets/apply/custom-gauge-panel.png'),
      // togglePng: require('../../../../assets/apply/toggle.png'),
      timer: null
    }
  },
  components: {
    TimeRangeUi
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        // var live = false
        // if (newValue) {
        //   this.topoUrl = '/ui/index.html'
        // }
        // if (newValue.timeOut) {
        //   if (newValue.timeOut == 1) {
        //     live = false
        //     clearInterval(this.timer)
        //   } else {
        //     live = true
        //     clearInterval(this.timer)
        //   }
        //   this.topoUrl = '/ui/index.html'
        // } else {
        //   live = false
        //   this.topoUrl = '/ui/index.html'
        // }
      },
      deep: true
    },
    '$store.state.time.topoGlobalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.topoUrl = '/ui/index.html'
        }
        const eventData = { eventType: 'globalTimesChange', data: newValue }
        this.iframe && this.iframe.contentWindow.postMessage(eventData, '*')
      },
      deep: true
    },
    '$store.state.alias.currentAlias': {
      handler(newValue, oldValue) {
        this.sendObj.app_alias = newValue
        this.serviceBarQuery.app_alias = newValue
        this.dbslowtopQuery.app_alias = newValue
        this.appItem = storage.get('appsItem')
        this.slowTopQuery.app_id = this.appItem.id
        this.getAppsScore() // 应用黄金指标(RED)
        this.getdbslowtop() // 慢查询TOP5
        // this.getServiceBar() // 服务性能
        this.getslowTopUrlMapping() // 慢接口TOP5
        this.getSlowInterfaceFn() // 慢业务TOP5
      },
      deep: true
    }
  },
  created() {
    this.appItem = storage.get('appsItem')
    if (JSON.stringify(this.appItem) != '{}') {
      this.sendObj.app_alias = this.appItem.alias
      this.appName = this.appItem.name
    }
    if (this.$route.query.id != undefined) {
      this.appId = this.$route.query.id
    }
  },
  methods: {
    clickFull() {
      this.visibleTopo = true
    },
    populateIframeTopo(iframe) {
      const xhrTopo = new XMLHttpRequest()
      xhrTopo.open('GET', this.topoUrl)
      xhrTopo.responseType = 'blob'
      xhrTopo.onreadystatechange = () => {
        if (xhrTopo.readyState === xhrTopo.DONE) {
          if (xhrTopo.status === 200) {
            // iframe.src = URL.createObjectURL(xhr.response)
            // iframe.src= _this.topoUrl;
          }
        }
      }
      xhrTopo.send()
    }
  }
}
</script>
<style lang="scss" scoped>
  .topo-content{
    height: calc(100vh - 100px);
    position: relative;
    padding: 20px;
    // padding-top: 40px;
    .title_href{
      position: absolute;
      right: 20px;
      top: 38px;
      cursor: pointer;
      z-index: 99;
    }
    .topo-header{
      display: flex;
      align-items: center;
    }
    .regend-box{
      display: flex;
    }
    .listwrap{
      color:#666;
      span{
        display: inline-block;
        padding:4px;
      }
      .value{
        width:50px;
        box-sizing: border-box;
        padding-right: 10px;
      }
    }
  }
</style>
