<template>
  <div>
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerFlag"
      direction="rtl"
      size="70%"
      :before-close="handleClose"
    >
      <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="childQueryParams.error" 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="日期" prop="start_time" align="center" :show-overflow-tooltip="true" />
        <el-table-column header-align="center" label="请求时长(ms)" 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"
      /> -->
    </el-drawer>
  </div>
</template>
<script>
import { getBizQuickTable } from '@/api/mapping'
import storage from '@/utils/storage'
export default {
  props: {
    isShowTrans: {
      default: false,
      type: Boolean
    },
    drawerTitle: {
      type: String,
      default: '最新请求'
    },
    queryParamsType: {
      type: Number,
      default: 1
    },
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      default: 0
    },
    serviceName: {
      type: String,
      default: ''
    },
    route: {
      type: String,
      default: ''
    },
    bisType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      drawerFlag: false,
      tableLoading: false,
      rowData: [],
      total: 0,
      childQueryParams: {
        app_alias: '',
        service_name: '',
        start_time: 0,
        end_time: 0,
        min_duration: 0,
        max_duration: 0,
        trace_id: '',
        limit: 100,
        error: false
      },
      appItem: {},
      checked: false,
      spanName: '',
      spanKind: ''
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.childQueryParams.start_time = newValue.startTime
          this.childQueryParams.end_time = newValue.endTime
          this.handelgetBizDetail()// 获取table 表格
        }
      },
      deep: true
    },
    'isShowTrans': {
      handler(newValue, oldValue) {
        this.drawerFlag = newValue
      },
      deep: true,
      immediate: true
    },
    '$store.state.alias.currentAlias': { // 当前应用切换
      handler(newValue, oldValue) {
        this.appItem = storage.get('appsItem')
        this.childQueryParams.app_alias = newValue
        this.handelgetBizDetail()
      },
      deep: true
    },
    '$store.state.biz.bizSpanObj': {
      handler(newValue, oldValue) {
        this.spanName = newValue.spanName
        this.spanKind = newValue.spanKind
      },
      deep: true,
      immediate: 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
    const queryString = window.location.href
    const urlParams = new URLSearchParams(queryString)
    const param1Value = urlParams.get('service_name')
    this.childQueryParams.service_name = this.serviceName || param1Value
    this.appItem = storage.get('appsItem')
    this.childQueryParams.app_alias = this.appItem.alias
    this.childQueryParams.error = this.queryParamsType == 2
    this.handelgetBizDetail()
  },
  methods: {
    handelgetBizDetail() { // 获取table 表格
      this.tableLoading = true
      let parsm = {}
      if (this.queryParamsType === 1) { // 业务专题-查看最新请求--drawer
        parsm = this.childQueryParams
        parsm.span_name = this.spanName
        parsm.span_kind = this.spanKind
      } else if (this.queryParamsType === 2) { // 业务专题-错误分布柱状图/接口专题--异常事件
        parsm = this.childQueryParams
        parsm.start_time = this.startTime
        parsm.end_time = this.endTime
        if (this.bisType === 'biz') {
          parsm.span_name = this.spanName
          parsm.span_kind = this.spanKind
        } else {
          parsm.route = this.route
        }
      }
      getBizQuickTable(parsm).then(res => {
        if (res && res.code === 200) {
          this.rowData = res.data.list || []
          // this.total = res.data.count
        } else {
          this.rowData = []
          // this.total = 0
        }
        this.tableLoading = false
      })
    },
    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()
    },
    goto(row) {
      const datetime = Date.parse(row.start_time) / 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')
    },
    handleClose() {
      this.$emit('handleClose')
    },
    handelCheckChange() {
      this.childQueryParams.min_duration = this.checked ? 2500 : 0
      this.handelgetBizDetail()
    },
    handelChange() {
      this.handelgetBizDetail()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table tr{
  cursor: pointer;
}
</style>
