<template>
  <div class="ob-chain-content">
    <div class="ob-left-box">
      <img src="../images/chain-table.svg">
    </div>
    <div class="ob-right-box">
      <div>
        <div style="text-align: right;margin-bottom: 10px;">
          <el-switch
            v-model="switchValue"
            active-color="#165DFF"
            inactive-color="#C9CDD4"
          />
        </div>
        <img v-if="switchValue" src="../images/chart2.svg">
        <img v-else src="../images/chart1.svg">
      </div>
      <div class="marginTop20">
        <img src="../images/fenwei.svg">
      </div>
      <div class="ob-right-table">
        <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
          style="width:100%"
          v-loading="tableLoading"
          :data="rowData"
          @sort-change="sortChangeTable"
          @row-click="handleClickRightTable"
        >
          <el-table-column header-align="center" label="TraceID" prop="trace_id" align="center" />
          <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" 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"
          small
          :page.sync="childQueryParams.pageIndex"
          :limit.sync="childQueryParams.pageSize"
          @pagination="handelgetBizDetail"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getBizDetail } from '@/api/mapping'

export default {
  data() {
    return {
      switchValue: false,
      tableLoading: false,
      rowData: [],
      total: 0,
      childQueryParams: {
        start_time: '1717574755',
        end_time: '1717575055',
        biz_id: 14,
        pageIndex: 1,
        pageSize: 10,
        sort_type: 'DESC',
        sort_field: 'Timestamp',
        min_duration: 0,
        only_exception: false
      },
      checked: false,
      onlyException: false
    }
  },
  created() {
    this.handelgetBizDetail()
  },
  methods: {
    // 获取右侧table
    handelgetBizDetail() {
      this.tableLoading = true
      getBizDetail(this.childQueryParams).then(res => {
        if (res.code == 200) {
          this.tableLoading = false
          this.rowData = res.data.list
          this.total = res.data.count
        }
      })
    },
    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()
    },
    handleClickRightTable(row) {
      this.isShowLinkDrawer = true
      this.tractID = row.trace_id
      this.spanID = row.span_id
    },
    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>
.ob-chain-content{
    padding:20px;
    padding-top:100px;
    display: flex;
    .ob-left-box{
      width:40%;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    .ob-right-box{
      width:60%;
      img{
        width: 100%;
      }
    }
    .marginTop20{
      margin-top:20px;
    }
    .ob-right-table{
      margin-left:5px;
      padding:20px;
      background: white;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
      border-radius: 12px;
      margin-top:15px;
      // height:300px;
      img{
        width: 100%;
        // height: 95%;
      }
    }
}

</style>
