<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card" style="flex:1;">
        <div>
          <el-page-header @back="back">
            <div slot="content">
              <span style="font-size:18px;margin-right:16px;">{{ detailTitle }}</span>
              <el-button
                size="small"
                type="primary"
                @click.native.stop="handleUpdateName()"
              >修改业务别名</el-button>
            </div>
          </el-page-header>
        </div>
        <div>
          <div class="flexWrap">
            <div class="flex-left">
              <div class="ob-switch-box">
                <el-switch
                  v-model="switchValue"
                  active-color="#165DFF"
                  inactive-color="#C9CDD4"
                  @change="handelSwitch"
                />
              </div>
              <div v-if="switchValue" style="position:relative;height: 500px">
                <div v-if="JSON.stringify(graphData)!=&quot;{}&quot;" v-loading="loading">
                  <div style="font-size:14px;font-weight:bold;text-align:right">
                    <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
                  </div>
                  <Topo ref="topo" :graph-data="graphData" topo-id="container" @changeState="clickRowHandleNode" />
                </div>
              </div>
              <div v-else style="position:relative;height: 500px">
                <div v-if="isLoading" v-loading="isLoading" class="loading-overlay" />
                <div v-else>
                  <NodeG6Charts v-if="sweetGraphData && Object.keys(sweetGraphData).length > 0" :chart-content-id="'serviceDrawerContainer'" :graph-data="sweetGraphData" />
                </div>
              </div>
            </div>
            <div class="flex-right">
              <div v-if="isShowChartBox">
                <div id="scaleMain" style="width:100%;height:240px;margin-bottom:36px;margin-top:16px" />
              </div>
              <div style="text-align: right; padding-right:10px;">
                <el-checkbox v-model="checked" style="margin-bottom:10px" @change="handelCheckChange(checked)">请求时长(ms) > 2500ms</el-checkbox>
                <el-checkbox v-model="onlyException" style="margin-bottom:10px" @change="handelChange()">仅异常</el-checkbox>
              </div>
              <el-table
                v-loading="tableLoading"
                :data="rowData"
                @sort-change="sortChangeTable"
              >
                <el-table-column header-align="center" label="TraceID" prop="trace_id" align="center" width="240">
                  <template slot-scope="scope">
                    <span @click="goto(scope.row)">{{ scope.row.trace_id }}</span>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="SpanName" prop="span_name" align="center" :show-overflow-tooltip="true" />
                <el-table-column header-align="center" label="日期" sortable="custom" prop="datetime" align="center" :show-overflow-tooltip="true" />
                <el-table-column header-align="center" label="请求时长(ms)" sortable="custom" prop="duration" width="140" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.duration>=2000" type="danger">{{ scope.row.duration }}</el-tag>
                    <el-tag v-if="scope.row.duration<2000" type="info">{{ scope.row.duration }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="childQueryParams.pageIndex"
                :limit.sync="childQueryParams.pageSize"
                @pagination="handelgetBizDetail"
              />
            </div>
          </div>

          <!-- 添加或修改应用配置对话框 -->
          <el-dialog v-if="open" :title="title" :visible.sync="open" width="700px" :center="true" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="95px">
              <el-form-item label="中文别名" prop="name">
                <el-input v-model="form.name" placeholder="请输入中文别名" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>

          <el-dialog
            :visible.sync="Visible"
            :fullscreen="true"
            center
            :show-close="false"
          >
            <Topo :graph-data="graphData" topo-id="container1" @changeState="clickRowHandleNode" />
          </el-dialog>
        </div>

        <el-drawer
          :visible.sync="drawer"
          direction="rtl"
          size="50%"
          @close="drawerClose"
        >
          <h4 slot="title" style="font-size:16px">{{ detailData.name }}</h4>
          <div class="node-details">
            <div class="node-details-content">
              <div class="node-details-content-section">
                <div style="display:flex;justify-content: space-between;">
                  <div class="node-details-content-section-header"><a href="" _blank>节点信息</a></div>
                  <div>
                    <el-button size="mini" type="primary" plain @click="editNodeName()">修改节点别名</el-button>
                  </div>
                </div>
                <div>
                  <div class="node-details-info-field" style="position:relative;display:flex;">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">节点名称:</div>
                    <div class="node-details-info-field-value truncate" style="width:50%">
                      {{ detailData.name }}
                    </div>

                  </div>
                  <div class="node-details-info-field">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">所属服务:</div>
                    <div class="node-details-info-field-value truncate w50" style="width:50%;color:#1890ff;cursor: pointer;" @click="gotoPathService(&quot;/service/serviceDetail/index&quot;,detailData.service_name, detailData.service_name_cn)">
                      {{ detailData.service_name }}
                    </div>
                  </div>
                  <div class="node-details-info-field">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">Span名称:</div>
                    <div class="node-details-info-field-value truncate w50" style="width:50%">{{ detailData.span_name }}</div>
                  </div>
                  <div class="node-details-info-field">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">Span类型:</div>
                    <div class="node-details-info-field-value truncate w50" style="width:50%">{{ detailData.span_kind }}</div>
                  </div>
                  <div class="node-details-info-field">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">成功率:</div>
                    <div class="node-details-info-field-value truncate w50" style="width:50%">{{ ((detailData.rate || 0)*100).toFixed(2)+'%' }}</div>
                  </div>
                </div>
              </div>

              <div v-if="detailData.span_type == &quot;http server&quot;" class="node-details-content-section">
                <div class="node-details-content-section-header">接口信息</div>
                <div class="node-details-info-field">
                  <div class="node-details-info-field-label truncate w50" style="width:50%">请求量:</div>
                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ nodeStats.total }}</div>
                </div>
                <div class="node-details-info-field">
                  <div class="node-details-info-field-label truncate w50" style="width:50%">错误率:</div>
                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ ((nodeStats.error_rate || 0) *100 ).toFixed(2) + '%' }}</div>
                </div>
                <div class="node-details-info-field">
                  <div class="node-details-info-field-label truncate w50" style="width:50%">P50:</div>
                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p50 || 0 ).toFixed(2) +'ms' }}</div>
                </div>
                <div class="node-details-info-field">
                  <div class="node-details-info-field-label truncate w50" style="width:50%">P90:</div>
                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p90 || 0).toFixed(2) +'ms' }}</div>
                </div>
                <div class="node-details-info-field">
                  <div class="node-details-info-field-label truncate w50" style="width:50%">P99:</div>
                  <div class="node-details-info-field-value truncate w50" style="width:50%">{{ (nodeStats.p99 || 0).toFixed(2) +'ms' }}</div>
                </div>
                <div>
                  <div class="node-details-info-field" style="cursor: pointer;" @click="gotoPath(&quot;/service/InterfaceDetail/index&quot;,nodeStats)">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">接口名:</div>
                    <div class="node-details-info-field-value truncate w50" style="width:50%;color:#1890ff;cursor: pointer;">{{ nodeStats.name }}</div>
                  </div>
                  <div class="node-details-info-field">
                    <div class="node-details-info-field-label truncate w50" style="width:50%">接口地址:</div>
                    <div class="node-details-info-field-value truncate w50" style="width:50%">{{ nodeStats.value }}</div>
                  </div>
                </div>
              </div>

              <div class="node-details-content-section">
                <div class="node-details-content-section-header">Span列表</div>
                <div>
                  <el-table
                    v-loading="nodeloading"
                    :data="nodeSpansList"
                    @row-click="handleRowClick"
                  >
                    <el-table-column label="链路标识" prop="trace_id" :show-overflow-tooltip="true" width="300" />
                    <el-table-column label="方法" prop="method" :show-overflow-tooltip="true" />
                    <el-table-column label="状态码" prop="code" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <span>
                          <el-tag
                            v-if="scope.row.code < 400"
                            class="colorwhite"
                            style="color:white"
                            type="success"
                            effect="dark"
                          >{{ scope.row.code }}</el-tag>
                          <el-tag v-else color="#F53F3F" style="color:white; border-color: rgb(245, 63, 63);" type="danger">{{ scope.row.code }}</el-tag>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="请求时长(ms)" sortable="custom" prop="duration" :show-overflow-tooltip="true" />
                  </el-table>
                  <pagination
                    v-show="nodeCount>0"
                    small
                    :total="nodeCount"
                    :page.sync="querySpans.pageIndex"
                    :limit.sync="querySpans.pageSize"
                    @pagination="getNodeSpans"
                  />
                </div>
              </div>

            </div>
          </div>
        </el-drawer>

        <el-dialog v-if="nodeOpen" title="修改节点别名" :visible.sync="nodeOpen" width="700px" :center="true" :close-on-click-modal="false">
          <el-form ref="queryName" :model="queryName" label-width="95px">
            <el-form-item label="节点别名" prop="name">
              <el-input v-model="queryName.name" placeholder="请输入节点别名" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveNodeName">确 定</el-button>
            <el-button @click="cancelNode">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
    </template>
  </BasicLayout>
</template>
<script>
import storage from '@/utils/storage'
import { getBizDetail, listBizGraph, updateBiz, listBiz, bizNodeStats, bizNodeName, bizNodeSpans, getSweetList, addUrlMapping, listBizStats } from '@/api/mapping'
import Topo from './components/Topo'
import resize from '../mixins/resize'
import moment from 'moment'
import NodeG6Charts from '../../service/InterfaceDetail/components/NodeG6Charts.vue'
export default {
  components: {
    Topo,
    NodeG6Charts
  },
  mixins: [resize],
  data() {
    return {
      nodeOpen: false,
      drawer: false,
      isFull: false,
      Visible: false,
      loading: false,
      open: false,
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '接口名称不能为空', trigger: 'blur' }
        ]
      },
      title: '修改业务别名',
      // 查询参数
      queryParams: {
        // start_time:Math.round((new Date().getTime())/1000 - (5*60)),
        // end_time:Math.round(new Date().getTime()/1000),
        app_id: '',
        start_time: '',
        end_time: '',
        pageIndex: 1,
        pageSize: 10
      },
      detailTitle: '',
      tableLoading: false,
      rowData: [],
      total: 0,
      childQueryParams: {
        // start_time:Math.round((new Date().getTime())/1000 - (5*60)),
        // end_time:Math.round(new Date().getTime()/1000),
        start_time: 0,
        end_time: 0,
        biz_id: 1,
        pageIndex: 1,
        pageSize: 10,
        sort_type: 'DESC',
        sort_field: 'Timestamp',
        min_duration: 0,
        only_exception: false
      },
      BizStatsQuery: {
        biz_id: 0,
        start_time: '',
        end_time: ''
      },
      graphData: {},
      detailObj: {},
      timer: null,
      detailData: {},
      queryStats: {
        id: 0,
        // hash:'',//和id二选一
        start_time: 0,
        end_time: 0
      },
      nodeStats: {},
      queryName: {
        id: 0,
        // hash:'',//和id二选一
        name: ''
      },
      querySpans: {
        id: 0,
        // hash:'',//和id二选一
        start_time: '',
        end_time: '',
        pageIndex: 1,
        pageSize: 10
      },
      nodeSpansList: [],
      nodeCount: 0,
      nodeloading: false,
      checked: false,
      onlyException: false,
      switchValue: false,
      isLoading: false,
      sweetquanParams: {
        biz_id: 0,
        start_time: '',
        end_time: ''
      },
      sweetGraphData: {},
      appItem: {},
      chartQuantiles: {
        biz_id: null,
        start_time: '',
        end_time: ''
      },
      isShowChartBox: false
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.childQueryParams.start_time = newValue.startTime
          this.childQueryParams.end_time = newValue.endTime
          this.queryParams.start_time = newValue.startTime
          this.queryParams.end_time = newValue.endTime
          this.queryParams.pageIndex = 1

          this.querySpans.start_time = newValue.startTime
          this.querySpans.end_time = newValue.endTime

          this.queryStats.start_time = newValue.startTime
          this.queryStats.end_time = newValue.endTime
          this.sweetquanParams.start_time = newValue.startTime
          this.sweetquanParams.end_time = newValue.endTime

          this.chartQuantiles.start_time = newValue.startTime
          this.chartQuantiles.end_time = newValue.endTime

          this.querySpans.pageIndex = 1
          this.getList() // 获取前一个页面-解析列表的table 数据
          this.handelgetBizDetail()// 获取table 表格
          //
          if (this.switchValue) {
            this.getListBizGraph(this.$route.query.id)// 获取紧凑树接口
          } else {
            this.getSweetListFn() // 获取甜甜圈接口
          }
          if (newValue.timeOut) {
            if (newValue.timeOut == 1) {
              clearInterval(this.timer)
            } else {
              clearInterval(this.timer)
              this.Refresh(newValue.timeOut)
            }
          }
        }
      },
      // immediate: true,
      deep: true
    }
  },
  created() {
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    this.childQueryParams.start_time = start_time
    this.childQueryParams.end_time = end_time

    this.queryParams.start_time = start_time
    this.queryParams.end_time = end_time

    this.querySpans.start_time = start_time
    this.querySpans.end_time = end_time

    this.queryStats.start_time = start_time
    this.queryStats.end_time = end_time
    this.sweetquanParams.start_time = start_time
    this.sweetquanParams.end_time = end_time

    this.chartQuantiles.start_time = start_time
    this.chartQuantiles.end_time = end_time

    this.appItem = storage.get('appsItem')
    this.detailObj = storage.get('detailObj')
    if (this.$route.query.id != undefined) {
      this.childQueryParams.biz_id = this.$route.query.id
      this.chartQuantiles.biz_id = this.$route.query.id
      this.detailTitle = this.$route.query.name
      this.queryParams.app_id = this.appItem.id
      this.sweetquanParams.biz_id = this.$route.query.id
      this.handelgetBizDetail()
      this.getList()
      if (this.switchValue) {
        this.getListBizGraph(this.$route.query.id)
      } else {
        this.getSweetListFn()
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   if (document.getElementById('scaleMain')){
    //     this.drawEchartsScale(this.detailObj)
    //   }
    // })
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.graphData = {}
  },
  methods: {
    handelSwitch() {
      if (this.switchValue) {
        this.getListBizGraph(this.sweetquanParams.biz_id)
      } else {
        this.getSweetListFn()
      }
    },
    async getSweetListFn() {
      this.isLoading = true
      this.sweetGraphData = {}
      const res = await getSweetList(this.sweetquanParams)
      if (res && res.code === 200) {
        this.sweetGraphData = res.data
      } else {
        this.sweetGraphData = {}
      }
      this.isLoading = false
    },
    gotoPathService(path, service_name, service_name_cn) {
      const href = this.$router.resolve({
        path: path,
        query: {
          service_name: service_name,
          name: service_name_cn,
          isShowBackBtn: false
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    gotoPath(path, row) {
      storage.set('row', row)
      const href = this.$router.resolve({
        path: path,
        query: {
          name: row.name,
          kind: row.value,
          method: row.http_method,
          service_name: row.service_name
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    handleRowClick(row, column, event) {
      const datetime = Date.parse(row.datetime) / 1000
      const href = this.$router.resolve({
        path: '/latency/index',
        query: {
          id: row.trace_id,
          span_id: row.span_id,
          datetime: datetime
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    clickRowHandleNode(item) {
      this.detailData = {}
      this.detailData = item
      this.queryStats.id = Number(item.unique_id)
      this.queryName.id = Number(item.unique_id)
      this.queryName.name = item.name
      this.querySpans.id = Number(item.unique_id)

      if (item.span_type == 'http server') {
        this.getNodeStats()
      }
      this.getNodeSpans()
      this.drawer = true
    },
    getNodeStats() {
      bizNodeStats(this.queryStats).then(res => {
        if (res && res.code == 200) {
          this.nodeStats = res.data
        }
      })
    },
    saveNodeName() {
      bizNodeName(this.queryName).then(res => {
        if (res.code == 200) {
          this.msgSuccess('修改成功')

          this.nodeOpen = false
          this.drawer = false
          this.graphData = {}
          // window.location.reload();
          this.handelgetBizDetail()
          this.getListBizGraph(this.$route.query.id)
        }
      })
    },
    cancelNode() {
      this.nodeOpen = false
    },
    getNodeSpans() {
      this.nodeloading = true
      bizNodeSpans(this.querySpans).then(res => {
        if (res.code == 200) {
          this.nodeloading = false
          this.nodeSpansList = res.data.list
          this.nodeCount = res.data.count
        }
      })
    },
    editNodeName() {
      this.nodeOpen = true
    },
    drawerClose() {
      this.drawer = false
    },
    clickFull() {
      this.Visible = true
      // this.$refs['topo'].initGraph();
    },
    handleUpdateName() {
      this.open = true
      this.form = this.detailObj
      delete this.form.quantiles
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined || this.form.id != 0) {
            updateBiz(this.form, this.form.id).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.open = false
                this.drawer = false
                this.$router.push({
                  path: '/business-analysis/analysis/index'
                })
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addUrlMapping(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('成功')
                this.open = false
                this.queryParams.pageIndex = 1
                this.serveceMapList = []
                this.tempList = []
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    getList() { // 获取前一个页面-解析列表的table 数据
      listBiz(this.queryParams).then(res => {
        if (res.code == 200) {
          for (let i = 0; i < res.data.list.length; i++) {
            if (res.data.list[i].id == this.$route.query.id) {
              this.detailTitle = res.data.list[i].name
              this.detailObj = res.data.list[i]

              listBizStats(this.chartQuantiles).then(response => {
                if (response && response.code === 200) {
                  if (response.data && response.data.biz_id != undefined) {
                    if (this.detailObj.id == response.data.biz_id) {
                      this.detailObj = Object.assign({}, this.detailObj, response.data)
                      storage.set('detailObj', this.detailObj)
                      this.isShowChartBox = (((this.detailObj || {}).quantiles || {}).time || []).length > 0
                      if (this.isShowChartBox) {
                        setTimeout(() => {
                          this.drawEchartsScale(this.detailObj)
                        }, 100)
                      }
                    } else {
                      this.isShowChartBox = false
                    }
                  } else {
                    this.isShowChartBox = false
                  }
                } else {
                  this.isShowChartBox = false
                }
              })
            } else {
              this.isShowChartBox = false
            }
          }
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        url: undefined,
        type: undefined,
        module: undefined,
        summary: undefined,
        favor: undefined
      }
      this.resetForm('form')
    },
    Refresh(timeOut) {
      this.timer = setInterval(() => {
        this.handelgetBizDetail()
        this.getListBizGraph(this.$route.query.id)
      }, timeOut)
    },
    back() {
      this.$router.go(-1)
      // this.$router.push({
      //   path: '/business-analysis/analysis/index'
      // })
    },
    handelgetBizDetail() { // 获取table 表格
      this.tableLoading = true
      getBizDetail(this.childQueryParams).then(res => {
        if (res && res.code == 200) {
          this.tableLoading = false
          this.rowData = res.data.list
          this.total = res.data.count
        }
      })
    },
    getListBizGraph(id) {
      this.loading = true
      listBizGraph({ biz_id: id }).then((res) => {
        this.graphData = {}
        if (res && res.code == 200) {
          const arr = res.data
          if (arr.length > 0) {
            const List = this.handelListBizData(arr)
            this.graphData = List[0]
            this.loading = false
          } else {
            this.graphData = {}
          }
        }
      })
    },
    handelListBizData(data) {
      data.forEach((v, k) => {
        // v.collapsed = false;
        v.id = v.id.toString()
        v.name = v.name
        v.label = v.stats.duration != undefined ? (v.stats.duration).toString() : ''
        v.currency = 'ms'
        v.rate = v.stats.success_rate
        v.status = v.stats.success_rate >= 0.6 ? 'B' : v.stats.success_rate == 0 ? 'DI' : 'R'
        v.variableValue = v.stats.success_rate
        v.variableUp = v.stats.success_rate_up
        if (v.children != undefined && v.children.length > 0) {
          v.children = this.handelListBizData(v.children)
        }
      })
      return data
    },
    drawEchartsScale(row) {
      const _this = this
      let myChartScale = this.$echarts5.getInstanceByDom(document.getElementById('scaleMain'))
      if (myChartScale == undefined) {
        myChartScale = this.$echarts5.init(document.getElementById('scaleMain'))
      }
      if (row && row.quantiles && row.quantiles.time && row.quantiles.time.length > 0) {
        // 绘制趋势echarts
        const option = {
          tooltip: {
            trigger: 'axis',
            confine: false,
            appendToBody: true,
            show: true,
            formatter: function(params) {
              storage.set('paramsValue', params)
              const axisValueLabel = params[0].axisValueLabel
              let str0 = ''
              params.forEach((item, idx) => {
              // str1+=`${}`
                str0 += `${item.marker}${item.seriesName}<span style='margin-left:30px;text-align:right;font-weight:400'>${item.data}</span>`
                switch (idx) {
                  case 0:
                    str0
                    break
                  case 1:
                    str0
                    break
                  default:
                    str0
                }
                str0 += idx === params.length - 1 ? '' : '<br/>'
              })
              return axisValueLabel + '<br>' + str0
            }
          },
          title: {
            text: '延迟比例',
            // subtext: 'ms',
            textStyle: {
              fontSize: 14
            }
          // triggerEvent: true,
          },
          grid: {
          // top:'5%',
            left: '3%',
            right: '6%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: row.quantiles.time,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                textAlign: 'center'
              },
              formatter: function(params) {
              // let newParams = moment(params).format('YYYY-MM-DD HH:mm:ss');
              // let newArr = newParams.split(' ')
              // let time = newArr[0] + "\n" + newArr[1]
              // return time;

                let newParams = ''
                const dateStr = params.substring(0, 10)
                // dateStr = dateStr.replace(/\-/g, function(match) {
                //   return match.replace(/\-/g, '.');
                // });
                const timeStr = params.substring(11, 19)
                newParams = dateStr + '\n' + timeStr
                return newParams
              }
            }
          },
          yAxis: {
            type: 'value',
            scale: true,
            gridIndex: 0,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            splitLine: {
              show: true
            }
          },
          series: [
            {
              name: 'P.50',
              type: 'line',
              stack: 'Total',
              symbol: 'none',
              // symbol: 'emptyCircle',//拐点
              data: row.quantiles.p50
            },
            {
              name: 'P.95',
              type: 'line',
              stack: 'Total',
              symbol: 'none', // 拐点
              // symbol: 'emptyCircle',//拐点
              data: row.quantiles.p90
            },
            {
              name: 'P.99',
              type: 'line',
              stack: 'Total',
              symbol: 'none', // 拐点
              // symbol: 'emptyCircle',//拐点
              data: row.quantiles.p99
            }
          ]
        }
        myChartScale.setOption(option)
        myChartScale.getZr().on('click', params => {
          const data = storage.get('paramsValue')
          const timestamp = moment(data[0].name).unix()

          _this.childQueryParams.start_time = timestamp
          _this.childQueryParams.end_time = timestamp
          _this.handelgetBizDetail()
        })
      }
    },
    goto(row) {
      const datetime = Date.parse(row.datetime) / 1000
      const href = this.$router.resolve({
        path: '/latency/index',
        query: {
          id: row.trace_id,
          span_id: row.span_id,
          datetime: datetime
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    sortChangeTable(val) {
      const prop = val.prop
      this.childQueryParams.sort_field = prop === 'duration' ? 'Duration' : 'Timestamp'
      // desc（倒序）和asc（正序）
      if (val.order === 'descending') {
        this.childQueryParams.sort_type = 'DESC'
      } else if (val.order === 'ascending') {
        this.childQueryParams.sort_type = 'ASC'
      }
      this.handelgetBizDetail()
    },
    handelCheckChange() {
      this.childQueryParams.min_duration = this.checked ? 2500 : 0
      this.handelgetBizDetail()
    },
    handelChange() {
      this.childQueryParams.only_exception = this.onlyException ? 1 : 0
      this.handelgetBizDetail()
    }
  }
}
</script>
<style lang="scss" scoped>
.node-details{

  .node-details-content{
    // width:420px;
    padding:0 36px;
    overflow-y: scroll;
    font-family: proxima-nova, Helvetica, Arial, sans-serif;
  }
  .node-details-content-section{
    margin: 24px 0px;
  }
  .node-details-content-section-header{
    font-size: 14px;
    color:rgb(133,133,173);
    margin-bottom:20px;
  }
  .node-details-info-field{
    display: flex;
    -webkit-box-align: baseline;
    box-align:baseline;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .node-details-info-field-label{
    text-align: right;
    // width: 30%;
    color: rgb(92, 92, 138);
    padding: 0px 0.5em 0px 0px;
    white-space: nowrap;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .node-details-info-field-value{
    font-size: 14px;
    // flex: 0 0 0%;
    min-width: 0px;
    color: rgb(61, 61, 92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .w50{
    width:50%;
  }
}
.ob-switch-box{
  text-align: right;
  width: 100%;
  margin-bottom: 10px;
}
::v-deep .el-drawer__header {
  padding:16px;
  background:#1890ff;
  color:#fff;
}
::v-deep .el-page-header__title{
  margin-top:3px;
}
</style>
