<template>
  <div class="app-container">
    <div style="margin-bottom:20px">
      <el-input v-model="listQuery.repository" placeholder="项目名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>

      <el-date-picker
        v-model="dateRange"
        :picker-options="pickerOptions2"
        style="width:280px"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"/>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="qualis"
      :header-cell-style="{background:'#F3F4F7',color:'#555'}"
      border
      fit
      highlight-current-row
      style="width: 100%;">

      <el-table-column label="ID" type="index" align="center" width="65"/>

      <el-table-column label="项目" prop="repository" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.repository }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Task sum" prop="run" align="center"/>

      <el-table-column label="Task success" prop="success" align="center"/>

      <el-table-column label="Task fail" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fail + scope.row.exception }}</span>
        </template>
      </el-table-column>

      <el-table-column label="成功率" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.success/scope.row.run | statusFilter">{{ scope.row.success/scope.row.run*100 | decimalsFilter }}%</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="Sonar" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->

  </div>
</template>

<script>
import { getQuali } from '@/api/pipeline'
import waves from '@/directive/waves' // Waves directive

export default {
  directives: { waves },
  filters: {
    decimalsFilter(num) {
      return num.toFixed(2)
    },
    statusFilter(num) {
      let status = 'success'
      if (num >= 0.7 && num <= 0.9) {
        status = 'info'
      }
      if (num >= 0.4 && num <= 0.7) {
        status = 'warning'
      }
      if (num >= 0 && num <= 0.4) {
        status = 'danger'
      }
      return status
    }
  },
  data() {
    return {
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      qualis: [],
      dateRange: [],
      listLoading: true,
      listQuery: {}
    }
  },

  computed: {

    // dateRange: {
    //   get: function() {
    //     const end = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
    //     const start = new Date(end.getTime() - 5 * 24 * 60 * 60 * 1000)
    //     return [start, end]
    //   },
    //   set: function(dates) {
    //     this.dateRange = this.dates
    //   }
    // }
  },
  created() {
    this.getQuali()
  },

  methods: {
    getQuali() {
      for (const prop in this.listQuery) {
        if (this.listQuery[prop] === '') {
          delete this.listQuery[prop]
        }
      }

      this.listLoading = true

      if (!this.dateRange || this.dateRange[1] === undefined) {
        this.dateRange = []
        this.dateRange[1] = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
      }

      if (!this.dateRange || this.dateRange[0] === undefined) {
        this.dateRange[0] = new Date(this.dateRange[1].getTime() - 5 * 24 * 60 * 60 * 1000)
      }

      this.listQuery.startDate = this.formartTime(this.dateRange[0])
      this.listQuery.endDate = this.formartTime(this.dateRange[1])

      getQuali(this.listQuery).then(res => {
        this.qualis = res.data.data.sort((s1, s2) => {
          return s1.repository.localeCompare(s2.repository)
        })
        this.listLoading = false
      })
    },
    handleInfo(row) {
      const startDate = this.formartTime(this.dateRange[0])
      const endDate = this.formartTime(this.dateRange[1])
      this.$router.push({ name: 'qualiSonar', query: { repository: row.repository, startDate: startDate, endDate: endDate }})
    },
    formartTime(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },

    handleFilter() {
      this.getQuali()
    }

  }
}
</script>

<style scoped>

</style>
