
<template>
  <el-drawer
    title="异常列表"
    :visible.sync="visible"
    :direction="'rtl'"
    show-close
    size="60%"
    append-to-body
    @close="drawerFireClose"
  >
    <el-table
      v-loading="fireLoading"
      :data="spansList"
    >
      <el-table-column label="TraceId" prop="trace_id" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="goto(scope.row)">{{ scope.row.trace_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="timestamp" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.timestamp) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="持续时间(ms)" prop="duration" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.duration && scope.row.duration.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="涉及的服务数量" prop="service_num" align="center" />
      <el-table-column label="包含的span数量" prop="span_num" align="center" />
    </el-table>

    <pagination
      v-show="spansTotal>0"
      :total="spansTotal"
      :page.sync="spansQuery.pageIndex"
      :limit.sync="spansQuery.pageSize"
      @pagination="getServiceSpans"
    />
  </el-drawer>
</template>
<script>
import moment from 'moment'
import { traceList } from '@/api/trace'
import storage from '@/utils/storage'
export default {
  props: {
    isShowDrawer: {
      type: Boolean,
      default: false
    },
    statusMessage: {
      type: String,
      default: ''
    },
    currentAlias: {
      type: String,
      default: ''
    },
    traceKind: {
      type: String,
      default: ''
    },
    currentBarTime: {
      type: String,
      default: ''
    }
  },
  watch: {
    isShowDrawer: {
      handler: function(val, oldVal) {
        this.visible = val
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      spansTotal: 0,
      spansList: [],
      visible: false,
      spansQuery: { // 调用链查询table参数
        app_alias: '',
        start_time: 0,
        end_time: 0,
        pageIndex: 1,
        pageSize: 10,
        trace_id: '',
        failed: true,
        kind: '',
        subcondition_value: '',
        min_duration: 0, // 单位 ms
        max_duration: 0,
        status_message: ''
      },
      fireLoading: false
    }
  },
  created() {
    this.getServiceSpans()
  },
  methods: {
    // 获取异常剖析-调用链查询
    getServiceSpans(row) {
      const timestamp = moment(this.currentBarTime).unix()
      const originalMoment = moment(this.currentBarTime)
      const fiveMinutesLaterMoment = originalMoment.add(5, 'minutes')
      const fiveMinutesLaterTimestamp = fiveMinutesLaterMoment.unix()
      this.spansQuery.kind = this.traceKind
      this.spansQuery.app_alias = this.currentAlias
      this.spansQuery.subcondition_value = this.currentAlias
      this.spansQuery.status_message = this.statusMessage
      this.spansQuery.start_time = timestamp
      this.spansQuery.end_time = fiveMinutesLaterTimestamp
      this.fireLoading = true
      traceList(this.spansQuery).then((res) => {
        this.fireLoading = false
        if (res && res.code === 200) {
          this.spansList = res.data.list
          this.spansTotal = Number(res.data.count)
        } else {
          this.spansList = []
          this.spansTotal = 0
        }
      })
    },
    drawerFireClose() {
      this.$emit('close')
    },
    getPagination() {
      this.$emit('getPagination')
    },
    goto(row) {
      const datetime = (moment(row.timestamp).valueOf()) / 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')
    }
  }
}
</script>

<style scoped lang='scss'></style>
