<template>
  <div>
    <el-drawer
      title="请求链路详情"
      :visible.sync="isOpendrawer"
      :direction="'rtl'"
      append-to-body
      :before-close="handleClose"
      size="70%"
    >
      <div v-if="isNoData"> 指定时间范围内不存在span数据</div>
      <div v-else>
        <div class="css-container" style="margin-bottom:24px;">
          <div class="css-header">
            <div class="css-title">Trace</div>
          </div>
          <div v-if="tableDetail !=null" class="css-content">
            <div class="css-page-header">
              <div class="css-name">
                <div class="css-name-title">
                  <span class="trace-name">
                    <span class="css-text">{{ tableDetail.service_name }}:</span>
                    <span class="css-text">{{ tableDetail.span_name }}</span>
                  </span>
                  <small class="css-small">{{ tableDetail.duration }}ms</small>
                </div>
                <div class="css-action">
                  <span style="font-weight:bold">TraceID: </span> <span v-cloak>{{ tractID }}</span>
                </div>
              </div>
              <div class="css-time-box">
                <span class="css-time-wrap">
                  <span v-if="tableDetail.timestamp !='0001-01-01T00:00:00Z'" class="css-time-value">{{ parseTime(tableDetail.timestamp) }}
                  </span>
                </span>
                <span class="css-type">
                  <el-tag v-if="tableDetail.http_method !=undefined&& tableDetail.http_method !=&quot;&quot;" size="mini" style="margin-right:8px">{{ tableDetail.http_method != undefined?tableDetail.http_method:tableDetail.http.request.method }}</el-tag>
                  <el-tag v-if="tableDetail.http_code !=undefined && tableDetail.http_code>=200" size="mini" :type="tableDetail.http_code>300?'danger':'success'" style="margin-right:8px">{{ tableDetail.http_code!=undefined?tableDetail.http_code:tableDetail.http.response.status_code }}</el-tag>
                  <span class="css-api">{{ tableDetail.span_attributes!=undefined?tableDetail.span_attributes['http.url']:tableDetail.http_url }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-button-group>
            <el-button size="mini" type="primary" @click="toggleTab(1)">东西链路</el-button>
            <el-button size="mini" type="primary" @click="toggleTab(2)">链路列表</el-button>
            <el-button size="mini" type="primary" @click="toggleTab(3)">链路日志</el-button>
          </el-button-group>
          <div style="display:inline-block;vertical-align: middle;">
            <el-dropdown
              style="margin-left: 10px"
              size="mini"
              trigger="click"
              placement="bottom"
            >
              <el-button type="primary" size="mini">
                <!-- 下拉菜单 -->
                <i class="el-icon-s-grid" />
                <i class="el-icon-arrow-down" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group
                  v-model="colSelect"
                  style="text-align: left"
                  @change="columnChange"
                >
                  <el-dropdown-item
                    v-for="(item, index) in colData"
                    :key="index"
                  ><el-checkbox :label="item.title">{{
                    item.title
                  }}</el-checkbox></el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <div style="position:relative;margin-top:20px;">
          <!-- 东西链路 -->
          <div v-if="num == 1" class="tree_box">
            <Topo v-if="graphflag" ref="topo" :graph-data="graphData" topo-id="linDrawerContainer" @changeState="clickRowHandleNode" />
          </div>
          <!-- 链路列表table -->
          <div v-if="num ==2">
            <el-table
              ref="scrollTable"
              v-loading="treeLoading"
              :data="tableData"
              :row-key="getRowKeys"
              :indent="4"
              style="width: 100%;margin-bottom: 20px;"
              border
              tooltip-effect="dark my-tooltip"
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              :row-class-name="status_change"
              @row-click="clickRowHandle"
            >
              <el-table-column
                v-if="colData[0].istrue"
                prop="service_name"
                label="服务名(span名称)"
                header-align="center"
                align="center"
                width="250"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span style="display: flex; align-items: center;">
                    <!-- <i v-if="scope.row.spanSelect == true" class="spanselect" /> -->
                    <i v-if="scope.row.spanSelect == true" class="el-icon-caret-right" />
                    {{ scope.row.service_name }}<span>({{ scope.row.span_name }})</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="colData[1].istrue"
                prop="timestamp"
                label="开始时间"
                width="250"
                align="center"
                header-align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span style="display: inline-block;text-align: center;width: 100%;">{{ parseTime(scope.row.timestamp) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="colData[2].istrue"
                prop="duration"
                label="延迟(ms)"
                align="center"
                header-align="center"
              />
              <el-table-column
                v-if="colData[3].istrue"
                prop="duration_persent"
                label="延迟占比(%)"
                width="250"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    <el-progress :percentage="scope.row.duration_persent * 100" color="#4343c8" :show-text="false" define-back-color="#E3E7ED" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="colData[4].istrue"
                prop="span_kind"
                label="SpanKind"
                header-align="center"
                align="center"
              />
              <el-table-column
                v-if="colData[5].istrue"
                prop="service_name"
                label="服务名"
                header-align="center"
                align="center"
              />
              <el-table-column
                v-if="colData[6].istrue"
                prop="events_attributes"
                label="EventsAttributes"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
                width="120"
              />
              <el-table-column
                v-if="colData[7].istrue"
                prop="events_name"
                label="EventsName"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                v-if="colData[8].istrue"
                prop="events_timestamp"
                label="EventsTimestamp"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
                width="120"
              />
              <el-table-column
                v-if="colData[9].istrue"
                prop="http_url"
                label="HttpUrl"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                v-if="colData[10].istrue"
                prop="http_method"
                label="HttpMethod"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                v-if="colData[11].istrue"
                prop="container_id"
                label="ContainerId"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                v-if="colData[12].istrue"
                prop="http_code"
                label="httpCode"
                header-align="center"
                align="center"
              />
              <el-table-column
                v-if="colData[13].istrue"
                prop="db_connection_string"
                label="DbConnectionString"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.db_connection_string }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="colData[14].istrue"
                prop="rpc_method"
                label="RpcMethod"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                v-if="colData[15].istrue"
                prop="resource_attributes"
                label="ResourceAttributes"
                header-align="center"
                align="center"
                width="400"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.resource_attributes ? JSON.stringify(scope.row.resource_attributes): '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="colData[16].istrue"
                prop="span_attributes"
                label="SpanAttributes"
                header-align="center"
                align="center"
                width="400"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.span_attributes? JSON.stringify(scope.row.span_attributes) : '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="colData[17].istrue"
                prop="max_depth"
                label="MaxDepth"
                header-align="center"
                align="center"
              />
              <el-table-column
                v-if="colData[18].istrue"
                prop="db_statement"
                label="DbStatement"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.db_statement !=&quot;UNSET&quot;" style="width:100%;color:#fff;background-color:rgba(153,102,51,0.5);padding:0 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ scope.row.db_statement }}</div>
                  <div v-else>{{ scope.row.db_statement }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 链路日志 -->
          <div v-if="num ==3">
            <div v-if="logNodata" style="text-align:center">
              暂无数据, <span class="color-blue" @click="goDetail">查看示例</span>
            </div>
            <LogTimeLine v-else />
          </div>
        </div>
      </div>
      <el-drawer
        v-if="JSON.stringify(detailData) != &quot;{}&quot;"
        :visible.sync="linkDrawer"
        direction="rtl"
        append-to-body
        size="60%"
        @close="drawerClose"
      >
        <el-tabs v-model="fragmentActiveNames" @tab-click="handleClick">
          <el-tab-pane label="片段详情" name="first">
            <div v-if="getShow().totalShow">
              <el-collapse v-model="activeNames">
                <el-collapse-item title="属性" name="one">
                  <ul v-if="getShow().showAttr" class="ul_box">
                    <li v-for="(value,key) in detailData.span_attributes " :key="key">
                      <div class="ul_label">{{ key }}</div>
                      <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                    </li>
                  </ul>
                  <el-collapse-item v-if="getShow().showHiddenAttr" name="1">
                    <template #title>
                      <span class="custom-title">查看全部</span>
                    </template>
                    <ul class="ul_box">
                      <li v-for="(value,key) in detailData.HiddenSpanAttributes" :key="key">
                        <div class="ul_label">{{ key }}</div>
                        <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                      </li>
                    </ul>
                  </el-collapse-item>
                </el-collapse-item>
                <el-collapse-item title="资源" name="tow">
                  <ul v-if="getShow().showResource" class="ul_box">
                    <li v-for="(value,key) in detailData.resource_attributes" :key="key">
                      <div class="ul_label">{{ key }}</div>
                      <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                    </li>
                  </ul>
                  <el-collapse-item v-if="getShow().showHiddenResource" name="2">
                    <template #title>
                      <span class="custom-title">查看全部</span>
                    </template>
                    <ul class="ul_box">
                      <li v-for="(value,key) in detailData.HiddenResourceAttributes" :key="key">
                        <div class="ul_label">{{ key }}</div>
                        <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                      </li>
                    </ul>
                  </el-collapse-item>
                </el-collapse-item>
                <el-collapse-item v-if="getShow().showEvents " :title="'事件'+'('+ detailData.events_timestamp.length +')'" name="three">
                  <div class="events_box">
                    <!-- :value="activeIn" -->
                    <el-collapse>
                      <el-collapse-item v-for="(item,index) in detailData.events_timestamp" :key="index" :title="getTime(item)" :name="index">
                        <ul class="ul_box">
                          <li>
                            <div class="ul_label">message</div>
                            <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ detailData.events_name[index] }}"</div>
                          </li>
                          <li v-for="(value,key) in detailData.events_attributes[index]" :key="key">
                            <div class="ul_label">{{ key }}</div>
                            <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                          </li>
                        </ul>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </el-collapse-item>
                <el-collapse-item v-if="getShow().showException" title="异常">
                  <ul class="ul_box">
                    <li>信息</li>
                    <li v-for="(value,key) in detailData['exceptions.message']" :key="key">
                      <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                    </li>
                  </ul>
                  <ul class="ul_box">
                    <li>堆栈</li>
                    <li v-for="(value,key) in detailData['exceptions.stacktrace']" :key="key">
                      <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                    </li>
                  </ul>
                  <ul class="ul_box">
                    <li>标题</li>
                    <li v-for="(value,key) in detailData['exceptions.type']" :key="key">
                      <div class="ul_value" style="color:#008080;white-space: pre-wrap;">"{{ value }}"</div>
                    </li>
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-else>
              <el-collapse v-model="activeNames">
                <el-collapse-item title="详细信息" name="one">
                  <div style="padding:10px;text-align:center">
                    <img style="width:24px;height:24px;" :src="detailData.span_category =='apm'?apm:apis">
                  </div>
                  <ul class="ul_box">
                    <li>
                      <div class="ul_label">SpanID：</div>
                      <div class="ul_value">"{{ detailData.span_id }}"</div>
                    </li>
                    <li>
                      <div class="ul_label">SpanName：</div>
                      <div class="ul_value">"{{ detailData.span_name }}"</div>
                    </li>
                    <li>
                      <div class="ul_label">SpanCategory：</div>
                      <div class="ul_value">"{{ detailData.span_category }}"</div>
                    </li>
                    <li>
                      <div class="ul_label">Duration：</div>
                      <div class="ul_value">"{{ detailData.duration }}"</div>
                    </li>
                    <li>
                      <div class="ul_label">FlatDuration：</div>
                      <div class="ul_value">"{{ detailData.flat_duration }}"</div>
                    </li>
                    <li v-for="(value,key) in detailData.detail" :key="key">
                      <div class="ul_label">{{ key }}</div>
                      <div class="ul_value">"{{ value }}"</div>
                    </li>
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
          <el-tab-pane label="片段日志" name="second">
            <div v-if="showNodata" class="ob-nodata-box">暂无数据, <span class="color-blue" @click="handleShow">查看示例</span></div>
            <LogTimeLine v-else :type="'片段日志'" />
          </el-tab-pane>
        </el-tabs>

      </el-drawer>
    </el-drawer>
  </div>
</template>
<script>
import { traceDetail } from '@/api/trace'
import Topo from '../../../latency/components/TopoTree.vue'
import LogTimeLine from './LogTimeLine.vue'
import moment from 'moment'
export default {
  components: {
    Topo,
    LogTimeLine
  },
  props: {
    isOpendrawer: {
      type: Boolean,
      default: false
    },
    tractID: {
      type: String,
      default: ''
    },
    spanID: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      tableDetail: {},
      graphData: {},
      num: 1,
      // 设置选中的列的复选框
      colSelect: [
        '服务名(span名称)',
        '开始时间',
        '延迟(ms)',
        '延迟占比(%)',
        '服务名',
        'DbStatement'
      ],
      apis: require('../../../../assets/apis.jpg'),
      apm: require('../../../../assets/apm.jpg'),
      colData: [
        { title: '服务名(span名称)', istrue: false },
        { title: '开始时间', istrue: false },
        { title: '延迟(ms)', istrue: false },
        { title: '延迟占比(%)', istrue: false },
        { title: 'SpanKind', istrue: false },
        { title: '服务名', istrue: false },
        { title: 'EventsAttributes', istrue: false },
        { title: 'EventsName', istrue: false },
        { title: 'EventsTimestamp', istrue: false },
        { title: 'HttpUrl', istrue: false },
        { title: 'HttpMethod', istrue: false },
        { title: 'ContainerId', istrue: false },
        { title: 'HttpCode', istrue: false },
        { title: 'DbConnectionString', istrue: false },
        { title: 'RpcMethod', istrue: false },
        { title: 'ResourceAttributes', istrue: false },
        { title: 'SpanAttributes', istrue: false },
        { title: 'MaxDepth', istrue: false },
        // { title: "dbConnectionString", istrue: false },
        { title: 'DbStatement', istrue: false }
      ],
      treeLoading: false,
      graphflag: false,
      detailData: {},
      linkDrawer: false,
      activeNames: ['one', 'tow', 'three'],
      isNoData: false,
      logNodata: true,
      fragmentActiveNames: 'first',
      showNodata: true
    }
  },
  created() {
    this.columnChange()
    this.getTraceDetail(this.tractID)
  },
  methods: {
    getShow() {
      const flag1 = (this.detailData.span_attributes !== null && this.detailData.span_attributes !== undefined) && Object.keys(this.detailData.span_attributes).length > 0
      const flag2 = (this.detailData.resource_attributes !== null && this.detailData.resource_attributes !== undefined) && Object.keys(this.detailData.resource_attributes).length > 0
      const flag3 = (this.detailData.events_timestamp !== null && this.detailData.events_timestamp !== undefined) && this.detailData.events_timestamp.length > 0
      const flag4 = (this.detailData.HiddenSpanAttributes !== null && this.detailData.HiddenSpanAttributes !== undefined) && Object.keys(this.detailData.HiddenSpanAttributes).length > 0
      const flag5 = (this.detailData.HiddenResourceAttributes !== null && this.detailData.HiddenResourceAttributes !== undefined) && Object.keys(this.detailData.HiddenResourceAttributes).length > 0
      const flag6 = (this.detailData['exceptions.message'] !== null && this.detailData['exceptions.message'] !== undefined) && (this.detailData['exceptions.message']).length > 0
      const flag7 = (this.detailData['exceptions.stacktrace'] !== null && this.detailData['exceptions.stacktrace'] !== undefined) && (this.detailData['exceptions.stacktrace']).length > 0
      const flag8 = (this.detailData['exceptions.type'] !== null && this.detailData['exceptions.type'] !== undefined) && (this.detailData['exceptions.type']).length > 0
      const excFlag = flag6 || flag7 || flag8
      const obj = {
        totalShow: flag1 || flag2 || flag3 || flag4 || flag5 || excFlag,
        showAttr: flag1,
        showResource: flag2,
        showEvents: flag3,
        showHiddenAttr: flag4,
        showHiddenResource: flag5,
        showException: excFlag
      }
      return obj
    },
    getTime(item) {
      return item && moment(item).format('YYYY-MM-DD HH:mm:ss')
    },
    // 根据行的id判断
    getRowKeys(row) {
      return row.span_id
    },
    // 控制列的显示和隐藏
    columnChange(val) {
      this.colData.filter((i) => {
        if (this.colSelect.indexOf(i.title) !== -1) {
          i.istrue = true
        } else {
          i.istrue = false
        }
      })
    },
    toggleTab(val) {
      this.num = val
    },
    handleClose() {
      this.$emit('handleClose', false)
    },
    // 获取trance 详情
    getTraceDetail(trace_id) {
      this.treeLoading = true
      const start_time = this.$store.state.time.globalTimes.startTime
      const end_time = this.$store.state.time.globalTimes.endTime
      const timeObj = {
        start_time,
        end_time
      }
      this.graphflag = false
      traceDetail(trace_id, timeObj).then(res => {
        if (res.code === 200) {
          this.num = 1
          this.treeLoading = false
          if (JSON.stringify(res.data) != '{}') {
            this.graphflag = true
            this.graphData = {}
            this.tableDetail = res.data // trance 详情信息-黑色框内容

            const arr = [res.data]
            this.tableData = this.handlerTreeTableList(arr, this.spanID) // 链路列表table

            if (arr.length > 0) {
              const List = this.handleData(arr)
              this.graphData = List[0]
            }
          } else {
            this.msgInfo('暂无数据')
          }
        } else {
          this.isNoData = true
        }
      })
    },
    clickRowHandleNode(item) {
      this.detailData = item
      this.linkDrawer = true
    },
    clickRowHandle(row, column, event) {
      this.detailData = row
      this.linkDrawer = true
    },
    drawerClose() {
      this.linkDrawer = false
    },
    handlerTreeTableList(arr, targetId) {
      let obj = {}
      const list = []
      for (let i = 0; i < arr.length; i++) {
        const node = arr[i]
        if (node.span_id == targetId) {
          obj = node
          obj.spanSelect = true
        } else {
          obj = node
          obj.spanSelect = false
        }
        if (node.children != undefined && node.children.length > 0) {
          obj.children = this.handlerTreeTableList(node.children, targetId)
        }
        list.push(obj)
      }
      return list
    },
    handleData(data) {
      if (data.length > 0) {
        data.forEach((v, k) => {
          v.id = v.span_id + k + Math.random()

          v.collapsed = false
          v.name = v.span_name
          v.label = v.duration.toFixed(2)
          v.currency = 'ms'
          v.rate = v.duration_persent
          v.status = (v.status_code == 'STATUS_CODE_ERROR' || (v.events_timestamp && v.events_timestamp.length > 0) || v.http_code > 399) ? 'R' : (v.duration > 500) ? 'Y' : 'G'
          v.variableValue = v.duration_persent

          if (v.children != undefined && v.children.length > 0) {
            v.children = this.handleData(v.children)
          }
        })
      }
      return data
    },
    status_change(row) {
      if (row?.row?.events_timestamp != null) {
        if (row?.row?.events_timestamp?.length > 0 || row?.row?.status_code == 'STATUS_CODE_ERROR' || row?.row?.http_code > 399) {
          return 'table-error-row'
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    goDetail() {
      this.logNodata = false
    },
    handleClick(tab) {
      this.fragmentActiveNames = tab.name
    },
    handleShow() {
      this.showNodata = false
    }
  }
}
</script>
<style lang="scss" scoped>
.css-container{
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(36, 41, 46, 0.12);
  position: relative;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}
.custom-title{
  text-align: right;
  display: inline-block;
  width: 100%;
  color: #999;
}
.css-header{
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 32px;
  cursor: auto;
  .css-title{
    margin-bottom: 0px;
    padding: 0px 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.57143;
    letter-spacing: 0.2px;
    font-family: Inter, Helvetica, Arial, sans-serif;
  }
}
.css-content{
  padding: 0px;
  box-flex:1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  contain: none;
}

.css-page-header{
  background-color: rgb(255, 255, 255);
  padding: 0.5em 0px 0px;
  position: sticky;
  top: 0px;
  z-index: 5;
}
.css-name{
  align-items: flex-start;
  display: flex;
  padding: 0px 8px;
  .css-name-title{
    color: inherit;
    flex: 1 1 0%;
    font-size: 1.7em;
    line-height: 1em;
    margin: 0px 0px 0.45em;
    font-weight: 400;
    letter-spacing: -0.00893em;
    font-family: Inter, Helvetica, Arial, sans-serif;
    .trace-name{
      font-size: 18px;
    }
    .css-text{
      display: inline-block;
      white-space: pre;
    }
  }
}
.spanselect{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: red;
}
.css-small{
  color: rgb(170, 170, 170);
  margin: 0px 12px;
  font-size: 12px;
  font-weight: 400;
}
.css-action{
  font-size: 14px;
  font-weight: 500;
}
.css-time-box{
  flex: 1 1 0%;
  line-height: 1.5;
  margin: -8px 8px 12px;
}
.css-time-wrap{
  vertical-align: middle;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
.ul_box{
  border: 1px solid rgba(36, 41, 46, 0.12);
  box-sizing: border-box;
  padding:4px;
  margin:8px;
  border-radius: 3px;
}
.ul_box li{
  display: flex;
  min-height: 30px;
  line-height: 30px;
  box-sizing: border-box;
}
.ul_box li .ul_label{
  color: rgb(136, 136, 136);
  width: 180px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  // justify-content: flex-end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul_box li .ul_value{
  font-family: monospace;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ul_box li:nth-child(even) {
  background: rgb(245, 245, 245);
}
.events_box{
  padding:8px;
  border: 1px solid rgba(36, 41, 46, 0.12);
  border-radius: 3px;
}
.events_box ::v-deep .el-collapse-item__header {
  background-color: rgb(244, 245, 245);
}
::v-deep .el-drawer__header{
  text-align: center;
  color:white;
  font-size: 24px;
  font-weight: bold;
  height: 60px;
  background: #4E5969;
  padding:20px;
  margin-bottom: 0;
}
::v-deep .el-table__row{
  cursor: pointer;
}
.color-blue{
  cursor: pointer;
  color:#165DFF;
}
.ob-nodata-box{
  width: 100%;
  height: 100%;
  text-align: center;
}
::v-deep .el-icon-caret-right:before{
  color:#165DFF;
  font-size: 14px;
}
::v-deep .el-table .cell.el-tooltip{
  display: flex;
  align-items: center;
  width: 100%;
}
</style>
<style>
.my-tooltip{
  max-width: 700px;
}
</style>
