<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card" style="flex:1;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="接口映射" name="first">
            <div style="background-color: #fff;box-sizing:border-box;padding:8px 16px 4px;min-height:288px;">
              <el-row type="flex" justify="start" :gutter="8">
                <el-col
                  :span="24"
                  :lg="24"
                  :md="24"
                  :sm="24"
                >
                  <div style="background-color: #fff;position:relative;padding:6px;">
                    <Latency v-if="activeName=='first'" :percentile="percentile" :service-name="serviceName" />
                    <div class="LatencySelect">
                      <el-radio-group v-model="radio" size="mini" @input="changePercentile">
                        <el-radio :label="0.5">p.50</el-radio>
                        <el-radio :label="0.95">p.95</el-radio>
                        <el-radio :label="0.99">p.99</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <InterfaceMap @updateData="handleUpdateData" />
          </el-tab-pane>
          <el-tab-pane label="分析视图" name="second">
            <div style="background-color: rgb(244, 245, 245);box-sizing:border-box;padding:8px 16px 4px;min-height:288px;">
              <el-row type="flex" justify="start" :gutter="8">
                <el-col
                  :span="24"
                  :lg="24"
                  :md="24"
                  :sm="24"
                >
                  <div style="background-color: #fff;border: 1px solid #24292e1f;border-radius: 3px;position:relative;padding:6px;">
                    <Latency v-if="activeName=='second'" :percentile="percentile" :service-name="serviceName" />
                    <div class="LatencySelect">
                      <el-radio-group v-model="radio" size="mini" @input="changePercentile">
                        <el-radio :label="0.5">p.50</el-radio>
                        <el-radio :label="0.95">p.95</el-radio>
                        <el-radio :label="0.99">p.99</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="background-color: rgb(244, 245, 245);box-sizing:border-box;padding:8px 16px 4px;">
              <div style="background-color: #fff;border: 1px solid #24292e1f;border-radius: 3px;">
                <el-row type="flex" justify="start" :gutter="8" style="margin-bottom:8px;padding:6px">
                  <el-col
                    :span="24"
                    :lg="24"
                    :md="24"
                    :sm="24"
                  >
                    <TreeViews v-if="activeName=='second'" />
                  </el-col>
                </el-row>
              </div>
            </div>

            <div style="background-color: rgb(244, 245, 245);box-sizing:border-box;padding:8px 16px 4px;">
              <div style="background-color: #fff;border: 1px solid #24292e1f;border-radius: 3px;">
                <el-row type="flex" justify="start" :gutter="8" style="margin-bottom:8px;padding:6px">
                  <el-col
                    :span="24"
                    :lg="24"
                    :md="24"
                    :sm="24"
                  >
                    <!-- <RectTree v-if="activeName=='second'"/> -->
                    <div class="noData">
                      <div class="noData_title">矩形树图</div>
                      <div style="text-align: center;color: rgba(36, 41, 46, 0.75);font-size: 18px; width: 100%;line-height:4rem">No Data</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <el-dialog :title="titlefire" :visible.sync="openfire" :center="true" width="700px" :close-on-click-modal="false">
          <div class="exercise">
            <codemirror
              v-model="codeSnippets"
              :options="cmOptions"
            />
          </div>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
            <el-button @click="cancelevent">关 闭</el-button>
          </div>
        </el-dialog>
      </el-card>
    </template>
  </BasicLayout>
</template>
<script>
// 编辑器代码格式
import 'codemirror/mode/properties/properties.js'
// 自动刷新(防止codemirror需要手动刷新才出数据)
// import 'codemirror/addon/display/autorefresh'
// 主题
import 'codemirror/theme/ayu-mirage.css'
import 'codemirror/theme/panda-syntax.css'
require('codemirror/mode/sql/sql')
// require("codemirror/mode/json/json");

require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
import Latency from './components/Latency.vue'
import TreeViews from './components/TreeViews.vue'
// import RectTree from './components/RectTree.vue'
import InterfaceMap from './components/InterfaceMap.vue'
import { listOtPlugins } from '@/api/plugin'
import { eventNums } from '@/api/event'

import storage from '@/utils/storage'
// import qs from 'qs'

// import {analyst} from '@/api/apps'
export default {
  components: {
    Latency,
    TreeViews,
    InterfaceMap
    // RectTree
  },
  data() {
    return {
      isFull: false,
      VisibleTopo: false,
      opennode: false,
      minHeight: 0,
      openfire: false,
      titlefire: '',
      codeSnippets: '',
      cmOptions: {
        autorefresh: true,
        tabSize: 4,
        // mode: 'text/x-sql',
        mode: 'application/json',
        theme: 'panda-syntax',
        line: true,
        lineWrapping: true,
        viewportMargin: Infinity, // 处理高度自适应时搭配使用
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 4, // 智能缩进单位为4个空格长度
        smartIndent: true,
        readOnly: true, // 只读
        showCursorWhenSelecting: true,
        firstLineNumber: 1,

        flattenSpans: false, // 默认情况下，CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能
        matchBrackets: true, // 匹配符号
        lineWiseCopyCut: true, // 如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行
        lineNumbers: true, // 显示行号
        autoCloseBrackets: true, // 自动输入括弧
        foldGutter: true, // 允许在行号位置折叠
        styleActiveLine: true // 激活当前行样式
      },
      totalFire: 0,
      drawerfire: false,
      fireLoading: false,
      queryFire: {
        pageIndex: 1,
        pageSize: 10,
        exceptionName: '',
        appId: 0,
        isKnow: 0,
        isResolve: 0,
        isIgnore: 0
      },
      fireEventList: [],
      event_number: 0,
      appName: '',
      loading: false,
      isEdit: false,
      radio: 0.95,
      activeName: 'first',
      // topoUrl:'http://observe-front.cestong.com.cn/ui/index.html',
      topoUrl: '/ui/index.html',
      // topoUrl:'http://39.106.74.84:4040/',
      serviceQuery: {
        'start_time': 1694534400,
        'end_time': 1694620800,
        'app_alias': 'UNSET',
        'service_name': 'checkoutservice',
        'percentile': 0.50
      },
      serviceList: [],
      LatencyData: undefined,
      analystQuery: {
        start_time: 1694534400,
        end_time: 1694620800,
        percentile: 0.95
      },
      app_alias: '',
      appsItem: {},
      percentile: 0.95,
      appId: '',
      // 插件url拼接dashboarduid的最终iframe的url地址
      iframeUrl: '',
      // 插件的url，用于拼接dashboardid
      pluginUrl: '',
      // dashboard uid 用于拼接插件的url
      dashboardUid: '',
      // 是否携带请求头（例如：token）
      isRequestHeader: true,
      config: {},
      pluginList: [], // 插件列表
      dashFlag: false,
      sendObj: {
        start_time: 0,
        end_time: 0,
        percentile: 0.95,
        app_alias: ''
      },
      Item: {},
      queryParams: {
        pageIndex: 1,
        pageSize: 10
      },
      queryNums: {
        start_time: 0,
        end_time: 0,
        pageSize: 10,
        pageIndex: 1,
        app_ids: 0
      },
      timer: null,
      serviceName: ''
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        var live = false
        if (newValue) {
          this.topoUrl = ''
          this.changeQuery('/service/Interface/index', newValue.startTime, newValue.endTime, live)
          this.topoUrl = '/ui/index.html'
        }
        if (newValue.timeOut) {
          if (newValue.timeOut == 1) {
            live = false
          } else {
            live = true
          }

          this.topoUrl = ''
          this.changeQuery('/service/Interface/index', newValue.startTime, newValue.endTime, live)
          this.topoUrl = '/ui/index.html'
        }
        if (newValue.timeOut == undefined) {
          live = false
          this.topoUrl = ''
          this.changeQuery('/service/Interface/index', newValue.startTime, newValue.endTime, live)
          this.topoUrl = '/ui/index.html'
        }
      },
      deep: true
    }
  },
  mounted() {
    const name = sessionStorage.getItem('currentTab')
    // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
    if (name) {
      this.activeName = name
    }
  },
  created() {
    this.Item = storage.get('appsItem')

    if (JSON.stringify(this.Item) != '{}') {
      this.sendObj.app_alias = this.Item.alias
      this.appName = this.Item.name
      this.getList()
    }

    if (this.activeName == 'first' || this.activeName == 'second' || this.activeName == 'fourth') {
      this.$store.commit('time/setTimeFlag', true)
    } else {
      this.$store.commit('time/setTimeFlag', false)
    }
    if (this.Item.id != undefined) {
      this.appId = this.Item.id
      this.queryNums.app_ids = this.Item.id
      this.queryFire.appId = this.Item.id
    }
    this.geteventNums()
  },
  // beforeDestroy() {
  //   clearInterval(this.timer);
  // },
  methods: {
    handleUpdateData(newValue) {
      this.serviceName = newValue
    },
    changeQuery(router, start_time, end_time, live) {
      this.$router.push({
        path: router,
        query: {
          id: this.$route.query.id,
          app_alias: this.$route.query.app_alias,
          start_time: start_time,
          end_time: end_time,
          item: this.$route.query.item,
          live: live
        }
      })
      // let topoIframe = document.getElementById('topoFrame')
      // this.populateIframeTopo(topoIframe)
    },
    cancelevent() {
      this.openfire = false
    },
    geteventNums() {
      eventNums(this.queryNums).then((res) => {
        if (res.code == 200) {
          if (res.data.list.length > 0) {
            this.event_number = res.data.list[0].exception_num
          }
        }
      })
    },
    handleClick(tab, event) {

      // if(tab.name=='first' || tab.name =='second' || tab.name=='fourth'){
      //   this.$store.commit('time/setTimeFlag',true)
      // }else{
      //   this.$store.commit('time/setTimeFlag',false)
      // }
      // sessionStorage.setItem('currentTab', tab.name)
    },
    changePercentile(val) {
      this.percentile = Number(val)
    },
    getList() {
      listOtPlugins().then((res) => {
        if (res.code == 200) {
          this.pluginList = res.data.list
          this.pluginUrl = res.data.list[0].url
          this.config = JSON.parse(res.data.list[0].config)
          if (res.data.list.length > 0 || res.data.list != null) {
            // this.getOtAppDashboard();
          }
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.title_href{
  width:32px;
  height:32px;
  position: absolute;
  top:5px;
  right:0px;
  display: block;
  i{
    font-size: 16px;
    color:#999;
  }
}
.LatencySelect{
  position: absolute;
  right:20px;
  top:20px;

}
::v-deep .el-card__body{
  position: relative !important;
}
.LatencySelect ::v-deep .el-radio{
    margin-right: 20px;
  }
.LatencySelect ::v-deep .el-radio__label {
    padding-left: 6px;
}
.LatencySelect ::v-deep .el-radio__inner{
  width: 12px;
  height: 12px;
}
.addCard {
  border: 2px dotted #e9e9e9;
  border-radius: 2px;
  height: 110px;
}
.addCard:hover {
  border-color: #409eff;
  color: #409eff;
  .flex-add {
    color: #409eff;
  }
}
.flex-add {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 24px;
  cursor: pointer;
  background:#fff;
}
.viewbox{
  // display: flex;
  // flex-direction: row;
  color:#999;
  padding-left:6px;
  margin-top:2px;
  // align-items: center;
}
// .viewbox:before,.viewbox:after{
//   content:'';
//   flex:1 1;
//   border-bottom: 1px solid #f4f5f5;
//   margin:auto;
// }
::v-deep .el-tabs__header{
  position: fixed;
  top:50.5px;
  // z-index: 99;
  z-index: 2;
  background: #fff;
  width: 91.3%;
  padding-top:16px;
  margin-left: -30px;
}
::v-deep .el-tabs__nav-wrap {
    padding-left: 30px;
}
::v-deep .el-tabs__content {
    overflow: hidden;
    position: relative;
    margin-top: 56px;
}
// .flex-card {
//   display: flex;
//   align-content: flex-start;
//   height: 52px;
// }
.box-card ::v-deep .el-card__body{
  padding:0!important;
}
.app_name{
    // width: 100px;
    position: fixed;;
    top: 67px;
    right: 28px;
    // z-index: 101;
    z-index:3;
    height: 40px;
    line-height: 40px;
    text-align: right;
    min-width: 120px;
    font-size: 16px;
    font-weight: bold;
}
.event{
  padding: 2px 4px;
  margin-right: 12px;
  color: rgb(255, 255, 255);
  // background-color: rgb(245, 108, 108);
  background-color:red;
  padding: -6px 4px;
  // font-weight: normal;
  // font-size: 13px;
}
::v-deep .el-button--mini{
  font-size: 14px;
  font-weight: bold;
}
.workorder-remark {
    background-color: #000;
    color: #ffffff;
    border-color: #000;
    max-width: 50%;
    font-size: 12px;
     /* 想要显示全部，下面就不用写了 */
    // padding-bottom: 4px !important;
    // display: -webkit-box;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // -webkit-line-clamp: 15;
    // -webkit-box-orient: vertical;
}
.topoWrap ::v-deep .el-dialog__header{
  padding:0;
  padding-bottom: 0;
}
.topoWrap ::v-deep .el-dialog--center .el-dialog__body{
  padding:0;
}
.topoWrap ::v-deep .el-dialog__body{
  padding:0;
}
.grafanaEdit{
  position: fixed;
  background-color: #fff;
  border-radius: 15px;
  padding: 4px 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  right:10px;
  bottom:50px;
  height: 30px;
  // line-height: 30px;
  text-align: center;
  z-index: 99;
  font-size: 12px;
  color: #303133;
  font-weight: 500;
  .small{
    display: block;
  }
  .big{
    // display: none;
    width:0;
    opacity: 0;
  }
  // background:#1890ff;
}
.grafanaEdit:hover{
  .small{
    display: none;
  }
  .big{
    // display: block;
    opacity: 1;
    width:auto;
    transform: all 0.3;
  }
}
</style>
<style>
.el-tooltip__popper{ max-width:50% }
.el-tooltip__popper {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 15;
      -webkit-box-orient: vertical;
}
.workorder-remark {
    background-color: #000;
    color: #ffffff;
    border-color: #000;
    max-width: 50%;
    font-size: 12px;
     /* 想要显示全部，下面就不用写了 */
    /* padding-bottom: 4px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical; */
}
.noData{
    width: 100%;
    height: 4.525rem;
    background: #fff;
}
.noData_title{
    margin-bottom: 0px;
    padding: 2px 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.57143;
    font-family: Inter, Helvetica, Arial, sans-serif;
}

</style>
