<template>
  <div class="app-container">
    <h3 style="overflow:hidden;">
      Sonar扫描结果
    </h3>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="BUGS" name="bugs">BUGS</el-tab-pane>
      <el-tab-pane label="坏味道" name="codeSmells">坏味道</el-tab-pane>
      <el-tab-pane label="覆盖率" name="coverage">覆盖率</el-tab-pane>
      <el-tab-pane label="重复密度" name="duplicatedLinesDensity">重复密度</el-tab-pane>
      <el-tab-pane label="代码行数" name="ncloc">代码行数</el-tab-pane>
    </el-tabs>
    <ve-line
      :data="chartDatas"
      :settings="chartSettings" />
  </div>
</template>
<script>
import { getQualiSonar } from '@/api/pipeline'
import VeLine from 'v-charts/lib/line'
import 'v-charts/lib/style.css'

export default {
  components: { VeLine },
  data() {
    return {
      activeName: 'bugs',
      repository: '',
      listLoading: '',
      chartDatas: {
        columns: [],
        rows: []
      },
      chartSettings: {
        area: true
      },
      chartData: {
        bugs: { columns: ['日期', 'BUGS'], rows: [] },
        codeSmells: { columns: ['日期', '坏味道'], rows: [] },
        coverage: { columns: ['日期', '覆盖率'], rows: [] },
        duplicatedLinesDensity: { columns: ['日期', '重复密度'], rows: [] },
        ncloc: { columns: ['日期', '代码行数'], rows: [] }
      }
    }
  },
  created() {
    this.getQualiSonar()
  },
  methods: {
    getQualiSonar() {
      this.repository = this.$route.query.repository
      this.startDate = this.$route.query.startDate
      this.endDate = this.$route.query.endDate
      getQualiSonar({
        repository: this.repository,
        type: 'sonar',
        startDate: this.startDate,
        endDate: this.endDate
      }).then(res => {
        this.listLoading = false
        const data = res.data.data.sonar || {}
        this.formetChartData('bugs', data.dates, data.bugs)
        this.formetChartData('codeSmells', data.dates, data.codeSmells)
        this.formetChartData('coverage', data.dates, data.coverage)
        this.formetChartData('duplicatedLinesDensity', data.dates, data.duplicatedLinesDensity)
        this.formetChartData('ncloc', data.dates, data.ncloc)
        this.chartDatas = this.chartData['bugs']
      })
    },
    formetChartData(key, dates, keyList) {
      const name = {
        bugs: 'BUGS',
        codeSmells: '坏味道',
        coverage: '覆盖率',
        duplicatedLinesDensity: '重复密度',
        ncloc: '代码行数'
      }
      for (const v of dates) {
        this.chartData[key]['rows'].push({ '日期': v })
      }
      const arr = this.chartData[key]['rows']
      for (let i = 0; i < arr.length; i++) {
        arr[i][name[key]] = keyList[i]
      }
    },
    handleClick() {
      this.chartDatas = this.chartData[this.activeName]
    }
  }
}
</script>
