<template>
  <BasicLayout>
    <template #wrapper>
      <div>
        <div class="ob-interface-box">
          <div class="interface-service-header">
            <span style="font-size:18px;">{{ displayedName }}</span>
            <span style="float:right;font-size:18px;">类型：业务</span>
          </div>
          <div class="service-header">
            <div class="service-header-left">
              <span class="fontSize18">基本信息:</span>
              <div style="width:100%"><p class="service-header-p"><span class="service-span-right">所属应用： </span><el-tooltip class="item" effect="dark" :content="appItem.name +'('+ appItem.alias +')'" placement="top"><span class="service-span-left">{{ appItem.name }} ({{ appItem.alias }})</span></el-tooltip></p></div>
            </div>
            <div class="service-header-right">
              <div class="service-header-rightcol">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>{{ digitsObj.request_rate !=undefined? digitsObj.request_rate:0 }}</span>
                  </div>
                  <div>
                    <div>
                      <div class="service-right-tit">当日调用占比</div>
                      <div class="service-right-con">{{ digitsObj.request_rate !=undefined? (digitsObj.request_rate*100).toFixed(2) + '%':0+'%' }}</div>
                      <div class="service-right-day-rate">日同比
                        <i :class="processNumber(digitsObj.request_rate_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.request_rate_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                        <span>
                          {{ digitsObj.request_rate_dod==undefined || digitsObj.request_rate_dod=='0' ?'':getErrRate(processNumber(digitsObj.request_rate_dod).value) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </el-tooltip>
              </div>
              <div class="service-header-rightcol" style="padding-top:16px;">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>{{ digitsObj.request_total || 0 }}</span>
                  </div>
                  <div>
                    <div>
                      <div class="service-right-tit">当日请求总量</div>
                      <div class="service-right-con">{{ digitsObj.request_total || 0 }}</div>
                      <div class="service-right-day-rate">日同比
                        <i :class="processNumber(digitsObj.request_total_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.request_total_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                        <span>
                          {{ digitsObj.request_total_dod==undefined || digitsObj.request_total_dod=='0'?'':getErrRate(processNumber(digitsObj.request_total_dod).value) }}
                        </span>
                      </div>
                    </div>
                    <div class="service-right-btn" @click="handelClickDrawer">查看最新请求</div>
                  </div>
                </el-tooltip>
              </div>
              <div class="service-header-rightcol">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>{{ digitsObj.error_rate!=undefined?parseInt(Number(digitsObj.error_rate) * Number(digitsObj.request_total)):0 }}</span>
                  </div>
                  <div class="border-bottom">
                    <div>
                      <div class="service-right-tit">错误数</div>
                      <div class="service-right-con">{{ digitsObj.error_num!=undefined?digitsObj.error_num:0 }}</div>
                      <div class="service-right-day-rate">日同比
                        <i :class="processNumber(digitsObj.error_num_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.error_num_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                        <span>
                          {{ digitsObj.error_num_dod==undefined ||digitsObj.error_num_dod=='0'?'':getErrRate(processNumber(digitsObj.error_num_dod).value) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </el-tooltip>
              </div>
              <div class="service-header-rightcol">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>{{ digitsObj.error_rate!=undefined?(Number(digitsObj.error_rate) *100).toFixed(2) + '%':0 }}</span>
                  </div>
                  <div class="border-bottom">
                    <div>
                      <div class="service-right-tit">错误率</div>
                      <div class="service-right-con">{{ digitsObj.error_rate!=undefined?(Number(digitsObj.error_rate) *100).toFixed(2) + '%':0 }}</div>
                      <div class="service-right-day-rate">日同比
                        <i :class="processNumber(digitsObj.error_rate_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.error_rate_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                        <span>
                          {{ digitsObj.error_rate_dod==undefined ||digitsObj.error_rate_dod=='0'?'':getErrRate(processNumber(digitsObj.error_rate_dod).value) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </el-tooltip>
              </div>
              <div class="service-header-rightcol">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>{{ digitsObj.duration_median != undefined?digitsObj.duration_median:0 }}</span>
                  </div>
                  <div class="border-bottom">
                    <div>
                      <div class="service-right-tit">中位延迟 (ms)</div>
                      <div class="service-right-con" style="color:#F53F3F">{{ digitsObj.duration_median != undefined?Number(digitsObj.duration_median).toFixed(2):0 }}</div>
                      <div class="service-right-day-rate">日同比
                        <i :class="processNumber(digitsObj.duration_median_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.duration_median_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                        <span>
                          {{ digitsObj.duration_median_dod==undefined || digitsObj.duration_median_dod==0?'':getErrRate(processNumber(digitsObj.duration_median_dod).value) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <div class=" ob-middle-box">
          <div class="ob-interface-box ob-inter-box" style="margin-right: 10px;">
            <div style="font-size: 16px; font-weight: bold; color: #1a2233;">业务拓扑</div>
            <span id="fullscreen_button" class="title_href">
              <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
            </span>
            <div v-if="Object.keys(graphData).length > 0 " id="bus-group-chart" />
          </div>
          <div class="ob-interface-box ob-inter-box">
            <div v-if="isLineLoading" v-loading="isLineLoading" class="system-topo-box" />
            <div v-else class="ob-box">
              <div v-if="isShowLineFlag" id="ob-biz-lines" />
              <div v-else class="ob-box">
                <div class="bar-title">业务调用曲线图</div>
                <div class="chart-no-data">暂无异常</div>
              </div>
            </div>
          </div>
        </div>
        <div class="ob-interface-box ob-interface-chart">
          <!-- 异常事件统计图 -->
          <div v-if="isChartLoading" v-loading="isChartLoading" class="system-topo-box" />
          <AbnormalChart v-else :chart-data="chartData" :trace-kind="traceKind" :current-alias="currentAlias" :chart-dom-id="'biz-abnormal-chart'" :title="'当前业务错误分布情况'" :bis-type="'biz'" :service_name="serviceName" />
        </div>
        <el-drawer
          :title="nodeName"
          :visible.sync="drawerFlag"
          direction="rtl"
          size="80%"
          class="drawer-custom"
          :before-close="handleClose"
        >
          <el-tabs v-model="activeName" class="customdrawer">
            <el-tab-pane v-for="item in btnArr" :key="item.name" :name="item.name">
              <span slot="label">
                <el-button size="small" round class="ob-header-btn">{{ item.name }}</el-button>
              </span>
            </el-tab-pane>
            <div style="text-align: right;"><el-button type="primary" size="small" @click="goPage">进入服务空间</el-button></div>
            <ServiceRelationship v-if="activeName == '服务关系' && drawerFlag" :node-servie-name="nodeServieName" :node-id="nodeId" :node-name="nodeName" />
            <CallChainBusiness v-if="activeName == '调用链(业务)' && drawerFlag" :node-servie-name="nodeServieName" />
            <!-- <ServiceSpace v-if="activeName == '服务空间' && drawerFlag" :node-servie-name="nodeServieName" :id="nodeServiceId" /> -->
          </el-tabs>
        </el-drawer>
        <!-- topo全屏显示 -->
        <div class="topoWrap">
          <el-dialog
            :visible.sync="visibleTopo"
            :fullscreen="true"
            append-to-body
            center
          >
            <div v-if="visibleTopo && Object.keys(graphData).length > 0 " id="bus-group-chart11" />
          </el-dialog>
        </div>
        <DrawerTransTable v-if="isShowTrans" :query-params-type="1" :service_name="serviceName" :is-show-trans="isShowTrans" @handleClose="handleCloseTable" />
      </div>
    </template>

  </BasicLayout>

</template>
<script>
import { getBusiTopicsInfo, getBusiTopicsGraph, getAbnormalStatistics, getBizChartLines } from '@/api/mapping'
import BigNumber from 'bignumber.js'
import storage from '@/utils/storage'
import G6 from '@antv/g6'
import { graphIcon } from '@/utils/staticData'
import AbnormalChart from '../system-space/components/AbnormalChart.vue'
import ServiceRelationship from './ServiceRelationship.vue'
import CallChainBusiness from './CallChainBusiness.vue'
// import ServiceSpace from './ServiceSpace.vue'
import moment from 'moment'
import DrawerTransTable from './DrawerTransTable.vue'
export default {
  components: {
    AbnormalChart,
    ServiceRelationship,
    CallChainBusiness,
    // ServiceSpace,
    DrawerTransTable
  },
  data() {
    return {
      digitsObj: {
      },
      appItem: {},
      chartData: [],
      subdigitsQuery: {
        biz_id: null,
        service_name: '',
        start_time: this.$store.state.time.globalTimes.startTime,
        end_time: this.$store.state.time.globalTimes.endTime
      },
      drawerFlag: false,
      btnArr: [{
        name: '服务关系',
        id: '1',
        components: 'ServiceRelationship'
      }, {
        name: '调用链(业务)',
        id: '2',
        components: 'ServiceRelationship'
      }],
      activeName: '服务关系',
      currentComponent: 'ServiceRelationship',
      nodeServieName: '',
      nodeServiceId: null,
      nodeName: '',
      nodeId: '',
      displayedName: '',
      graphData: {},
      traceKind: 'biz',
      currentAlias: '',
      isFull: false,
      visibleTopo: false,
      subconditionValue: '',
      isChartLoading: false,
      isShowTrans: false,
      isShowLineFlag: false,
      isLineLoading: false,
      serviceName: ''
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.subdigitsQuery.start_time = newValue.startTime
          this.subdigitsQuery.end_time = newValue.endTime
          this.getBasicInfoFn()
          this.getGraphData()
          this.getAbnormalChartData(2) // 异常信息柱状图
          if (newValue.timeOut) {
            if (newValue.timeOut === 1) {
              clearInterval(this.serviceMapTimer)
            } else {
              clearInterval(this.serviceMapTimer)
              this.Refresh(newValue.timeOut)
            }
          }
        }
      },
      // immediate: true,
      deep: true
    },
    '$store.state.alias.currentAlias': { // 当前应用切换
      handler(newValue, oldValue) {
        this.appItem = storage.get('appsItem')
        this.currentAlias = newValue
        this.getBasicInfoFn()
        this.getGraphData()
        this.getAbnormalChartData(2) // 异常信息柱状图
      },
      deep: true
    }
  },
  created() {
    // 说明
    // appItem中的id和app_id是一样的
    this.appItem = storage.get('appsItem')
    this.currentAlias = this.appItem.alias
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    this.subdigitsQuery.start_time = start_time
    this.subdigitsQuery.end_time = end_time
    if (this.$route.query.service_name !== undefined) {
      this.serviceName = this.$route.query.service_name
    }
    if (this.$route.query.rowHash !== undefined) {
      this.rowHash = this.$route.query.rowHash
      this.getBasicInfoFn()
    }
    if (this.$route.query.rowId !== undefined) {
      this.subdigitsQuery.biz_id = this.$route.query.rowId
    }
    if (this.$route.query.name !== undefined) {
      this.displayedName = this.$route.query.name
    }

    if (this.$route.query.subconditionValue !== undefined) {
      this.subconditionValue = this.$route.query.subconditionValue
    }
    this.getAbnormalChartData(2) // 异常信息柱状图
    this.getBizLinesFn() // 业务调用折线图
  },
  mounted() {
    this.getGraphData()
  },
  methods: {
    async getBizLinesFn() { // 业务调用折线图
      const today = moment().format('YYYY-MM-DD')
      // 获取 7 日前的日期
      const sevenDaysAgo = moment().subtract(7, 'days').format('YYYY-MM-DD')
      // 获取昨天的日期
      const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD')
      const dates = `${today},${yesterday},${sevenDaysAgo}`
      const pars = {
        app_alias: this.currentAlias,
        biz_hash: this.rowHash,
        dates
      }
      this.isLineLoading = true
      const res = await getBizChartLines(pars)
      this.isLineLoading = false
      if (res && res.code === 200) {
        const { lines = [] } = res.data
        this.isShowLineFlag = !(lines.length === 0)
        this.$nextTick(() => {
          this.initChartLines(lines)
        })
      } else {
        this.isShowLineFlag = false
      }
    },
    initChartLines(data) {
      const legend = []
      const series = []
      const xAxis = []
      if (data && data.length > 0) {
        data.forEach((item, index) => {
          const obj = {
            name: '',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            // symbol: 'none',
            data: []
          }
          legend.push(item.date)
          obj.name = index === 0 ? '今日' : (index === 1 ? '昨日' : '7日前')
          obj.data = item.points
          series.push(obj)
          if (index === 1) {
            item.points.forEach((ss) => {
              xAxis.push(ss.time)
            })
          }
        })

        const chart = this.$echarts5.init(document.getElementById('ob-biz-lines'))
        const option = {
          title: {
            text: '业务调用曲线图',
            textStyle: {
              fontSize: 16, // 标题字体大小
              fontWeight: 'bold', // 标题字体粗细
              color: '#1a2233'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['今日', '昨日', '7日前']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
          },
          yAxis: {
            type: 'value',
            scale: true,
            gridIndex: 0,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            splitLine: {
              show: true
            }
          },
          series
        }
        chart.setOption(option)
      }
    },
    goPage() {
      const href = this.$router.resolve({
        path: '/service/serviceDetail/index',
        query: {
          service_name: this.nodeServieName,
          name: this.nodeName,
          id: this.nodeServiceId,
          isShowBackBtn: false
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    handleCloseTable() {
      this.isShowTrans = false
    },
    handelClickDrawer() {
      this.isShowTrans = true
    },
    clickFull() {
      this.visibleTopo = true
      setTimeout(() => {
        this.initGraph(this.graphData)
      }, 1000)
    },
    handleClose() {
      this.drawerFlag = false
    },
    processNumber(num) {
      const result = {
        value: num,
        sign: ''
      }
      if (num > 0) {
        result.sign = 'up'
      } else if (num < 0) {
        result.value = Math.abs(num) // 返回绝对值
        result.sign = 'down'
      } else {
        result.sign = ''
      }
      return result
    },
    getErrRate(error_rate) {
      const strErrorRate = numToString(error_rate)
      let length = 0
      if (strErrorRate !== '0') {
        const arr = strErrorRate.split('.')
        if (arr.length > 1) {
          length = strErrorRate.split('.')[1].length
        }
      }
      if (error_rate == 0) {
        return error_rate
      } else if (error_rate == 1) {
        return error_rate * 100 + '%'
      } else if (length <= 2) {
        return error_rate * 100 + '%'
      } else {
        return convertToPercentage(error_rate)
      }
      function numToString(num) {
        let str = num.toString()
        if (str.includes('e')) {
          const parts = str.split('e')
          const base = parts[0]
          const exp = parseInt(parts[1])
          const decimalPlaces = base.split('.')[1]?.length || 0
          const zerosNeeded = Math.abs(exp) - decimalPlaces
          if (exp < 0) {
            str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '')
          } else {
            str = base + '0'.repeat(zerosNeeded)
          }
        }
        return str
      }
      function convertToPercentage(value) {
        const bnValue = new BigNumber(value)
        const percentage = bnValue.multipliedBy(100)// 乘法运算
        let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR)// decimalPlaces保留小数位

        // 如果四舍五入后的值小于原始值，手动增加 0.01
        if (roundedPercentage.isLessThan(percentage)) { // 判断是否小于
          roundedPercentage = roundedPercentage.plus(0.01)
        }

        return `${roundedPercentage.toFixed(2)}%`
      }
    },
    async getBasicInfoFn() { // 获取基础信息
      const prams = {
        app_alias: this.appItem.alias,
        biz_hash: this.rowHash
      }
      const res = await getBusiTopicsInfo(prams)
      if (res && res.code === 200) {
        this.digitsObj = res.data
        const obj = {
          spanName: this.digitsObj.span_name,
          spanKind: res.data.span_kind
        }
        this.$store.commit('biz/setBizSpan', obj)
      } else {
        this.digitsObj = {}
      }
    },
    async getGraphData() { // 获取业务拓扑
      this.graphData = {}
      const res = await getBusiTopicsGraph(this.subdigitsQuery)
      if (res && res.code === 200) {
        this.graphData = res.data
        setTimeout(() => {
          this.initGraph(this.graphData)
        }, 1000)
      } else {
        this.graphData = {}
      }
    },
    initGraph(data) {
      if (data) {
        data.edges && data.edges.length > 0 && data.edges.forEach(edge => {
          edge.label = `${'调用：' + edge.attrs.request_total + '平均延迟：' + Number(edge.attrs.duration_average).toFixed(2) + '\n错误率：' + (edge.attrs.error_rate * 100).toFixed(2) + '%'}`
        })
        const colors = {
          'err': 'rgb(234, 70, 61)',
          'ok': 'rgb(0, 181, 79)'
        }
        if (data && data.combos && data.combos.length === 1) {
          delete data.combos
        }
        data.nodes && data.nodes.length > 0 && data.nodes.forEach(node => {
          node.donutColorMap = colors
          node.size = 0
          node.iconType = node.type
          node.donutAttrs = node.attrs// donutAttrs
          node.comboId = node.combo_id
          Object.keys(node.donutAttrs).forEach(key => {
            node.size += Number(node.donutAttrs[key])
          })
          node.size = Math.sqrt(node.size) * 60
          delete node.type
        })
        let chartId = ''
        if (this.visibleTopo) {
          chartId = 'bus-group-chart11'
        } else {
          chartId = 'bus-group-chart'
        }
        const container = document.getElementById(chartId)
        const width = container.scrollWidth
        const height = (container.scrollHeight || 300)
        const legendData = {
          nodes: [
            // {
            //   id: 'err',
            //   label: '失败率',
            //   order: 0,
            //   style: {
            //     fill: 'rgb(234, 70, 61)'
            //   }
            // },
            {
              id: 'ok',
              label: '成功率',
              order: 2,
              style: {
                fill: 'rgb(0, 181, 79)'
              }
            }]
        }
        const legend = new G6.Legend({
          data: legendData,
          align: 'center',
          layout: 'horizontal', // vertical
          position: 'bottom-left',
          vertiSep: 12,
          horiSep: 24,
          offsetY: -24,
          padding: [4, 8, 4, 8],
          containerStyle: {
            fill: '#ccc',
            lineWidth: 1
          },
          title: ' ',
          titleConfig: {
            offsetY: -8
          }

        })
        const graph = new G6.Graph({
          container: chartId,
          width,
          height,
          fitView: true,
          fitCenter: true,
          plugins: [legend],
          groupByTypes: false,
          fitViewPadding: data.nodes.length <= 8 ? [100] : [0],
          maxZoom: 8, // 默认值是10
          minZoom: 0.02, // 默认值是0.02
          defaultCombo: {
            type: 'rect',
            size: [600, 100], // The minimum size of the Combo
            // padding: [30, 20, 10, 20],
            style: {
              lineWidth: 1
            },
            labelCfg: {
              refY: 10,
              refX: 20,
              position: 'bottom',
              style: {
                fontSize: 10
              }
            },
            fixSize: [1920, 800]
          },
          comboStateStyles: {
            dragenter: {
              lineWidth: 2,
              stroke: '#FE9797'
            }
          },
          layout: {
            type: 'radial',
            focusNode: 'li',
            unitRadius: 200,
            preventOverlap: true, // 防止节点重叠
            nodeSpacing: 500,
            // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
            nodeSize: 40,
            strictRadial: false,
            linkDistance: data.nodes.length > 6 ? 400 : 200 // 指定边距离为150
          },
          defaultNode: {
            /* node type, the priority is lower than the type in the node data */
            type: 'donut',
            /* node size */
            size: 40,
            /* style for the keyShape */
            // style: {
            //   fill: '#9EC9FF',
            //   stroke: '#5B8FF9',
            //   lineWidth: 3,
            // },
            labelCfg: {
              /* label's position, options: center, top, bottom, left, right */
              position: 'bottom',
              /* label's offset to the keyShape, 4 by default */
              //   offset: 12,
              /* label's style */
              style: {
                fontSize: 10
                // fontWeight: 500
              }
            }
          },
          defaultEdge: {
            style: {
              endArrow: true
            },
            labelCfg: { // 标签文本配置项
              autoRotate: true,
              style: {
                // stroke: '#fff',
                // fill: '#999',
                fontSize: 5,
                lineWidth: 5
              }
            }
          },
          modes: {
            default: ['drag-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo', 'click-select', 'zoom-canvas',
              {
                type: 'tooltip', // 提示框
                // offset:0,
                formatText(model) {
                  // 提示框文本内容
                  return `<div  style="background-color: rgba(0,0,0, 0.65);  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
                width: fit-content;
                color: #fff;
                padding: 10px;
                border-radius:4px;">
                  <div>
                    <span >成功率：</span>
                    <span>${model.attrs.ok == '0.00000' ? 0 : model.attrs.ok == '1.00000' ? '100%' : (model.attrs.ok * 100).toFixed(2) + '%'}</span>
                  </div>
                  </div>`
                }
              }
            ]
          }
        })
        // 节点配置中使用
        graph.node((node) => {
          return {
            icon: {
              show: true,
              // 使用函数动态指定图标路径 imgObj[node.iconType] || imgObj.default
              img: graphIcon[node.iconType] || graphIcon.default
            }
          }
        })
        graph.data(data)
        graph.render()

        graph.on('combo:dragend', (e) => {
          graph.getCombos().forEach((combo) => {
            graph.setItemState(combo, 'dragenter', false)
          })
        })
        graph.on('node:dragend', (e) => {
          graph.getCombos().forEach((combo) => {
            graph.setItemState(combo, 'dragenter', false)
          })
        })

        graph.on('combo:dragenter', (e) => {
          graph.setItemState(e.item, 'dragenter', true)
        })
        graph.on('combo:dragleave', (e) => {
          graph.setItemState(e.item, 'dragenter', false)
        })

        graph.on('combo:mouseenter', (evt) => {
          const { item } = evt
          graph.setItemState(item, 'active', true)
        })

        graph.on('combo:mouseleave', (evt) => {
          const { item } = evt
          graph.setItemState(item, 'active', false)
        })
        graph.on('node:click', (evt) => {
          const { item } = evt
          const node = item._cfg.model
          if (node.id.indexOf('svc') !== -1) {
            this.nodeName = node.name
            this.nodeId = node.id
            this.nodeServieName = node.service_name
            this.nodeServiceId = node.service_id
            this.drawerFlag = true
          } else {
            this.$message.info('当前节点没有上下游调用')
            this.drawerFlag = false
          }
        })
        if (typeof window !== 'undefined') {
          window.onresize = () => {
            if (!graph || graph.get('destroyed')) return
            if (!container || !container.scrollWidth || !container.scrollHeight) return
            graph.changeSize(container.scrollWidth, container.scrollHeight - 20)
          }
        }
      }
    },
    barChartClick(open, node) {
      this.getList(node.name)
      this.isShowDrawer = open
    },
    async getAbnormalChartData(type) { // 获取异常统计数据
      let end_time = null
      let start_time = null
      this.isChartLoading = true
      if (type === 1) { // 默认24小时
        end_time = Math.floor(moment().valueOf() / 1000)
        start_time = Math.floor(moment().subtract(12, 'hours').valueOf() / 1000)
      } else { // type 2 全局时间控件时间
        end_time = this.subdigitsQuery.end_time
        start_time = this.subdigitsQuery.start_time
      }
      const params = {
        kind: 'biz',
        subcondition_value: this.rowHash,
        start_time: start_time,
        end_time: end_time,
        app_alias: this.appItem.alias
        // biz_hash: this.rowHash // 11.19后端让改的
      }
      const res = await getAbnormalStatistics(params)
      if (res && res.code === 200) {
        this.chartData = res.data
      } else {
        this.chartData = []
      }
      this.isChartLoading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.goUpColor{
  color:#EA463D;
  font-weight: bold;
}
.goDownColor{
  color:#00B54F;
  font-weight: bold;
}
.equalColor{
  color:grey;
  font-weight: bold;
}
.ob-interface-box{
  padding: 20px;
  background: #FFFFFF;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
}
.ob-inter-box{
  width: 50%;
  height: 100%;
}
.ob-middle-box{
  height: calc(100vh - 650px);
  min-height: 400px;
  display: flex;
  align-items: center;
}
.ob-interface-chart{
  height: 300px;
}
.minheight{
  min-height: 300px;
}
#ob-biz-lines{
  margin-bottom:20px;
  width: 100%;
  height: 100%;
  min-height: 260px;
}
.chart-no-data{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 20px);
  color:#999;
}
.bar-title{
  font-size: 16px;
  font-weight: bold;
  color: #1a2233;
}
.ob-box{
  width:100%;
  height: 100%;
}
.service-header{
    display: flex;
}
.service-header-left{
  width: 4.5rem;
  // height: 120px;
  border-radius: 8px;
  color: #4E5969;
  padding: 20px;
  margin-right: 20px;
  box-sizing: border-box;
  background: url('../../../assets/pic-bg.png');
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
}
.service-header-right{
  flex: 1;
  display: flex;
}
.service-header-rightcol{
  width: 20%;
  // height: 120px;
  background: linear-gradient( 155deg, #FFFFFF 0%, #FFFFFF 50%, #EFF4FF 100%);
  border: 1px solid rgba(96,97,112,0.07);
  margin-right:20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  border-radius: 8px;
  box-sizing: border-box;
}
.service-header-rightcol:last-child{
  margin-right: 0;
}
.service-right-tit{
  font-weight: bold;
  font-size: 0.2rem;
  color: #4E5969;
  text-align: center;
}
.service-right-con{
  font-weight: bold;
  font-size: 0.38rem;
  color: #1A2233;
  margin-top:10px;
  text-align: center;
}
.service-right-day-rate{
  text-align: center;
  font-size:12px;
  opacity: 0.9;
}
.fontSize18{
  font-size: 18px;
  font-weight: bold;
}
.service-header-p{
  font-weight: bold;
  font-size:0.2rem;;
  margin-bottom: 0;
  margin-top:30px;
  display: flex;
  align-items: center;
  span{
    display: inline-block;
  }
  .service-span-right{
    text-align: right;
    // width:30%;
  }
  .service-span-left{
    text-align: left;
    width:70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}
#bus-group-chart{
  width: 100%;
  min-height: 280px;
  position: relative;
  height: 100%;
}
#bus-group-chart11{
  width: 100%;
  min-height: 700px;
  height: 100%;
  position: relative;
}
.customdrawer ::v-deep .el-tabs__header{
  margin:0;
  // position: fixed;
  z-index: 999;
  width: 100%;
}

::v-deep .el-drawer__header{
  background: #4E5969;
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 0;
}
::v-deep .el-table .el-table__header-wrapper th{
  background-color: white;
}
::v-deep .el-tabs__item{
  padding: 0 10px;
}
::v-deep .el-tabs__nav-wrap::after{
  height: 0;
}
::v-deep .el-tabs__item.is-active .el-button{
  background: white;
  font-weight: 500;
  font-size: 14px;
  color: #165DFF;
}
::v-deep .el-tabs__active-bar{
  height:0;
}
.ob-header-btn{
  width: 110px;
  box-sizing: border-box;
  font-size: 14px;
}
::v-deep .drawer-custom .el-drawer__body{
  background: #f0f2f5;
}
.interface-service-header{
  height: 40px;
  background: #E8F3FF;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 20px;
  color: #165DFF;
  line-height:40px;
  padding:0 20px;
}
.title_href{
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.service-right-btn{
  color: #165DFF;
  font-size: 12px;
  cursor: pointer;
  text-align: right;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: -15px;
}
</style>
<style>
.g6-legend-container{
  bottom: 10px !important;
  top: auto !important;
  left: 0 !important;
}
</style>
