<template>
  <div class="slow-top-content">
    <div class="interface-box">
      <h6 class="h6">慢业务TOP5</h6>
      <el-table
        v-loading="loading2"
        :data="slowBusiInterData"
        @row-click="handleRowClickBusiness"
      >
        <el-table-column class-name="column_one" header-align="center" label="业务名称" prop="biz_name" align="center" :show-overflow-tooltip="true" width="400" />
        <el-table-column header-align="center" label="起始服务" prop="service_name_cn" align="center" :show-overflow-tooltip="true" />
        <el-table-column header-align="center" label="错误率(%)" prop="error_rate" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ scope.row.error_rate&&(scope.row.error_rate*100).toFixed(2)+ '%' || '0%'}}</template>
        </el-table-column>
        <el-table-column header-align="center" label="平均延迟(ms)" prop="duration_average" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.duration_average>=2000" type="danger">{{ Number(scope.row.duration_average).toFixed(2) }}</el-tag>
            <el-tag v-if="scope.row.duration_average<2000" type="info">{{ Number(scope.row.duration_average).toFixed(2) }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="look-more" @click="goPath(&quot;/business-analysis/analysis/index&quot;)">查看更多<i class="el-icon-d-arrow-right" /></div>
    </div>
    <div class="interface-box">
      <h6 class="h6">慢接口TOP5</h6>
      <el-table
        v-loading="loading3"
        :data="slowTopList"
        @row-click="handleRowClickInterFace"
      >
        <el-table-column header-align="center" label="接口名称" prop="name" align="center" :show-overflow-tooltip="true" />
        <el-table-column header-align="center" label="所属服务" prop="service_name_cn" align="center" :show-overflow-tooltip="true" />

        <el-table-column header-align="center" label="请求方法" prop="method" align="center" :show-overflow-tooltip="true" />

        <el-table-column header-align="center" label="平均延迟(ms)" prop="duration" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.duration>=2000" type="danger">{{ Number(scope.row.duration).toFixed(2) }}</el-tag>
            <el-tag v-if="scope.row.duration<2000" type="info">{{ Number(scope.row.duration).toFixed(2) }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="look-more" @click="goPath('/service/InterfaceSublist/index')">查看更多<i class="el-icon-d-arrow-right" /></div>
    </div>

    <div class="interface-box">
      <h6 class="h6">慢查询TOP5</h6>
      <el-table
        v-loading="loading"
        :data="dbslowtopList"
        @row-click="handleRowClick"
      >
        <el-table-column header-align="center" label="查询方法" prop="span_name" align="center" :show-overflow-tooltip="true" />
        <el-table-column header-align="center" label="服务名" prop="service_name_cn" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.service_name }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="SQL语句" prop="statement" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.statement }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="查询时长(ms)" width="120" prop="duration" align="center">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.duration== undefined?0:Number(scope.row.duration).toFixed(2) }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="look-more" @click="goPath('/service/InterfaceSublist/index')">查看更多<i class="el-icon-d-arrow-right" /></div>
    </div>
  </div>
</template>
<script>
import { slowTopUrlMapping, getSlowInterfaceData, listBizStats } from '@/api/mapping'
import storage from '@/utils/storage'
import { dbslowtop } from '@/api/trace'
export default {
  name: 'SlowSituationTOP',
  data() {
    return {
      loading: false,
      dbslowtopList: [],
      dbslowtopQuery: {
        app_alias: '',
        limit: 5,
        start_time: '',
        end_time: ''
      },
      loading3: false,
      slowTopList: [],
      slowTopQuery: {
        app_id: 1,
        limit: 5,
        start_time: '',
        end_time: ''
      },
      loading2: false,
      slowBusiInterData: [],
      appItem: {}
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.slowTopQuery.start_time = newValue.startTime
          this.slowTopQuery.end_time = newValue.endTime
          this.dbslowtopQuery.start_time = newValue.startTime
          this.dbslowtopQuery.end_time = newValue.endTime
          this.getdbslowtop() // 慢查询TOP5
          this.getslowTopUrlMapping() // 慢接口TOP5
          this.getSlowInterfaceFn()// 慢业务TOP5
        }
      },
      deep: true
    },
    '$store.state.alias.currentAlias': {
      handler(newValue, oldValue) {
        this.dbslowtopQuery.app_alias = newValue
        this.appItem = storage.get('appsItem')
        this.slowTopQuery.app_id = this.appItem.id
        this.getdbslowtop() // 慢查询TOP5
        this.getslowTopUrlMapping() // 慢接口TOP5
        this.getSlowInterfaceFn() // 慢业务TOP5
      },
      deep: true
    }
  },
  created() {
    this.appItem = storage.get('appsItem')
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    this.dbslowtopQuery.app_alias = this.appItem.alias
    this.dbslowtopQuery.start_time = start_time
    this.dbslowtopQuery.end_time = end_time
    this.slowTopQuery.app_id = this.appItem.id
    this.slowTopQuery.start_time = start_time
    this.slowTopQuery.end_time = end_time
    this.getslowTopUrlMapping() // 慢接口TOP5
    this.getdbslowtop() // 慢查询TOP5
    this.getSlowInterfaceFn() // 慢业务TOP5
  },
  methods: {
    goPath(path) {
      this.$router.push({
        path: path
      })
    },
    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')
    },
    handleRowClickInterFace(row, column, event) {
      storage.set('row', row)
      const href = this.$router.resolve({
        path: '/service/InterfaceDetail/index',
        query: {
          kind: row.route,
          method: row.method,
          name: row.name,
          service_name: row.service_name
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    async handleRowClickBusiness(row) {
      row.name = row.biz_name
      row.id = row.biz_id
      storage.set('detailObj', row)
      // this.$router.push({
      //   path: '/business-analysis/analysisDetail/index',
      //   query: {
      //     id: row.biz_id,
      //     name: row.biz_name
      //   }
      // })
      const href = this.$router.resolve({
        path: '/business-analysis/business-topics/index',
        query: {
          rowHash: row.biz_hash,
          rowId: row.id,
          service_name: row.service_name,
          name: row.name,
          subconditionValue: this.appItem.alias
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    async getSlowInterfaceFn() { // 慢业务TOP5
      this.loading2 = true
      this.slowBusiInterData = []
      const res = await getSlowInterfaceData(this.dbslowtopQuery)
      this.loading2 = false
      if (res && res.code === 200) {
        this.slowBusiInterData = res.data.list || []
      } else {
        this.slowBusiInterData = []
      }
    },
    getdbslowtop() { // 慢查询TOP5
      this.loading = true
      this.dbslowtopList = []
      dbslowtop(this.dbslowtopQuery).then(res => {
        if (res.code === 200) {
          this.dbslowtopList = res.data
          this.loading = false
        } else {
          this.dbslowtopList = []
        }
      })
    },
    getslowTopUrlMapping() { // 慢接口TOP5
      this.loading3 = true
      this.slowTopList = []
      slowTopUrlMapping(this.slowTopQuery).then(res => {
        if (res.code === 200) {
          this.slowTopList = res.data
          this.loading3 = false
        } else {
          this.slowTopList = []
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.h6{
  font-size: 16px;
  color: #1a2233;
  font-weight: bold;
  margin-block-start:0;
  margin-block-end: 0;
  margin:16px 0;
}
.look-more{
  margin-top:16px;
  color: #1890ff;
  font-size: 12px;
  text-align: right;
  cursor: pointer;
  i{
    line-height: -3;
    vertical-align: middle;
  }
}
.interface-box{
  padding: 10px;
}
::v-deep .el-table tr{
  cursor: pointer;
}
</style>
