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

      <el-date-picker
        v-model="dateRange"
        :picker-options="pickerOptions2"
        :default-time="['00:00:00', '23:59:59']"
        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
      :data="qualis"
      :header-cell-style="{background:'#F3F4F7',color:'#555'}"
      border
      max-height="700"
      fit
      highlight-current-row
      style="width: 100%;">

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

      <el-table-column sortable label="服务" prop="projectName" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>

      <el-table-column sortable label="Sum" prop="run" align="center"/>

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

      <el-table-column sortable label="Warn" prop="warn" align="center"/>
      <el-table-column sortable label="Error" prop="error" align="center"/>

      <!-- <el-table-column :sort-method="sortFail" sortable label="Warn&Error" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fail + scope.row.exception }}</span>
        </template>
      </el-table-column> -->

      <el-table-column sortable label="Excetpion" prop="exception" align="center"/>

      <el-table-column :sort-method="sortRate" sortable 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="详情" 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 { fetchQuality } from '@/api/pipeline1'
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: [],
      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: {
    sortFail(a, b) {
      return (a.exception + a.fail) - (b.exception + b.fail)
    },
    sortRate(a, b) {
      return a.success / a.run - b.success / b.run
    },
    getQuali() {
      for (const prop in this.listQuery) {
        if (this.listQuery[prop] === '') {
          delete this.listQuery[prop]
        }
      }

      if (!this.dateRange) {
        this.dateRange = []
      }

      if (this.dateRange.length === 0) {
        this.dateRange[1] = new Date(new Date().getTime())
        this.dateRange[0] = new Date(this.dateRange[1].getTime() - 3 * 24 * 60 * 60 * 1000)
      }

      this.listQuery.startDate = this.dateRange[0]
      this.listQuery.endDate = this.dateRange[1]

      fetchQuality(this.listQuery).then(res => {
        this.qualis = res.data.sort((s1, s2) => {
          return s1.projectName.localeCompare(s2.projectName)
        })
      })
    },
    handleInfo(row) {
      this.$router.push({
        name: 'job',
        query: {
          projectName: row.projectName,
          startDate: JSON.stringify(this.listQuery.startDate),
          endDate: JSON.stringify(this.listQuery.endDate)
        }
      })
    },
    formartTime(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },

    handleFilter() {
      this.getQuali()
    }

  }
}
</script>

<style scoped>

</style>
