<template>
  <div class="report-detail">
    <div class="header">
      <div class="title">执行时长：{{ detailData ? detailData.costTime : '' }}</div>
      <div class="title">开始时间：{{ detailData ? detailData.startTime : '' }}</div>
      <div class="title">结束时间：{{ detailData ? detailData.endTime : ' ' }}</div>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="请求统计" name="first">
          <el-table :data="statisticsData">
            <el-table-column label="Requests" align="center">
              <el-table-column prop="label" label="Label" sortable align="center" />
            </el-table-column>
            <el-table-column label="Executions" align="center">
              <el-table-column prop="samples" label="Samples" sortable align="center" />
            </el-table-column>
            <el-table-column label="Response Times(ms)" align="center">
              <el-table-column prop="average" label="Avg" sortable align="center" />
              <el-table-column prop="min" label="Min" sortable align="center" />
              <el-table-column prop="max" label="Max" sortable align="center" />
              <el-table-column prop="errorRate" label="ErrorRate" sortable align="center">
                <template slot-scope="scope">
                  <div>{{ getFormatToTwoDecimalPlaces(scope.row.errorRate) }}%</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="Throughput" align="center">
              <el-table-column prop="throughput" label="Trans/s" width="120" sortable align="center">
                <template slot-scope="scope">
                  <div>{{ getFormatToTwoDecimalPlaces(scope.row.throughput) }}%</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="NetWork(KB/Sec)" align="center">
              <el-table-column prop="receivedKBPerSec" label="Recd" width="120" sortable align="center">
                <template slot-scope="scope">
                  <div>{{ getFormatToTwoDecimalPlaces(scope.row.receivedKBPerSec) }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="sentKBPerSec" label="Sent" width="120" sortable align="center">
                <template slot-scope="scope">
                  <div>{{ getFormatToTwoDecimalPlaces(scope.row.sentKBPerSec) }}%</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="错误记录" name="second">
          <div class="title-error">Errors</div>
          <el-table :data="errorCodeStatList" border>
            <el-table-column prop="responseCode" label="Type of error" sortable align="center" />
            <el-table-column prop="count" label="Number of errors" sortable align="center" />
            <el-table-column prop="errorRatio" label="% in errors" sortable align="center">
              <template slot-scope="scope">
                <div>{{ getFormatToTwoDecimalPlaces(scope.row.errorRatio) }}%</div>
              </template>
            </el-table-column>
            <el-table-column prop="totalRatio" label="% in samples" sortable align="center">
              <template slot-scope="scope">
                <div>{{ getFormatToTwoDecimalPlaces(scope.row.totalRatio) }}%</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="title-error">Top 5 Errors</div>
          <el-table :data="top5InterfaceErrorStatList" border>
            <el-table-column prop="interfaceName" label="Sample" sortable align="center" />
            <el-table-column prop="errorCount" label="#Samples" sortable align="center" />
            <el-table-column prop="totalSamples" label="All Errors" sortable align="center" />
          </el-table>
          <div v-for="(item, index) in interfaceErrorDetailList">
            <div class="title-error">#{{ index + 1 }} Errors</div>
            <el-table :data="interfaceErrorDetailList" border>
              <el-table-column prop="interfaceName" label="Sample" sortable align="center" />
              <el-table-column prop="errorName" :label="getLabel(index)" sortable align="center">
                <template slot-scope="scope">{{ getErrorName(scope.row) }}</template>
              </el-table-column>
              <el-table-column prop="errorCount" :label="getErrorCount(index)" sortable align="center">
                <template slot-scope="scope">{{ getErrorCountDetail(scope.row) }}</template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getReportDetail } from '../../../api/performance/report';

export default {
  name: "ReportDetail",
  data() {
    return {
      activeName: 'first',
      statisticsData: [], // 统计
      errorCodeStatList: [],
      top5InterfaceErrorStatList: [],
      interfaceErrorDetailList: [],
      detailData: null,
      errorReport: null
    }
  },
  mounted() {
    this.getReportDetailData()
  },
  methods: {
    getReportDetailData() {
      getReportDetail(this.$route.query.id).then(res => {
        if (res.code === 200) {
          this.detailData = res.data
          this.statisticsData = JSON.parse(res.data.summaryReport)
          this.errorReport = JSON.parse(res.data.errorReport)
          this.errorCodeStatList = this.errorReport.errorCodeStatList
          this.top5InterfaceErrorStatList = this.errorReport.top5InterfaceErrorStatList
          this.interfaceErrorDetailList = this.errorReport.interfaceErrorDetailList
        }
      })
    },
    //  保留2为小数
    getFormatToTwoDecimalPlaces(num) {
      return Math.round(num * 100) / 100;
    },
    getLabel(index) {
      const i = index + 1
      return '#' + i + ' Error'
    },
    getErrorCount(index) {
      const i = index + 1
      return '#' + i + ' Error ' + 'Count'
    },
    getErrorName(val) {
      var key1 = ''
      for (let key in val.errorCodeCounts) {
        key1 = key
      }
      return key1
    },
    getErrorCountDetail(val) {
      var keyV = ''
      for (let key in val.errorCodeCounts) {
        keyV = val.errorCodeCounts[key]
      }
      return keyV
    },
  }

}
</script>



<style scoped lang="scss">
.report-detail {
  padding: 20px;

  .title {
    font-size: 14px;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

  }

  .tabs {
    margin-top: 10px;

  }

  .title-error {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #DCDFE6;
    font-weight: 700;
    text-align: center;
    width: 100%;
  }
}
</style>