<template>
  <div class="app-container">
    <div style="margin-bottom:20px">
      <div style="margin-bottom:10px">
        <el-input v-model="listQuery.query.projectName" placeholder="服务名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
        <el-input v-model="listQuery.query.branchName" placeholder="分支名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
        <el-input v-model="listQuery.query.gitUser" placeholder="触发者" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
        <el-date-picker
          v-model="dateRange"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          style="width:280px"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      </div>
      <el-table
        :data="jobs"
        fit
        highlight-current-row
        style="width: 100%;">
        <el-table-column type="index" align="center" width="65"/>
        <el-table-column label="服务" prop="projectName" align="center"/>
        <el-table-column label="分支" prop="branchName" align="center"/>
        <el-table-column prop="gitUser" label="触发者" align="center"/>
        <el-table-column prop="commitMes" label="触发信息" align="center"/>
        <el-table-column prop="status" label="状态" width="120" >
          <template slot-scope="scope">
            <i :class="scope.row.statusIcon"/>
            <span> {{ scope.row.desc }}</span>
          </template>
        </el-table-column>
        <el-table-column :formatter="formatDate" label="触发时间" align="center"/>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.buildResult" size="mini" @click="handleJenkins(scope.row)">Job信息</el-button>
            <el-button :disabled="!scope.row.buildResult" type="primary" size="mini" @click="handleSonar(scope.row)">Sonar结果</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="jobCount" :current-page.sync="page" background style="margin-top:20px" @current-change="handleCurrentChange"/>
    </div>
</div></template>

<script>
import { fetchSonarJob } from '@/api/pipeline1'
import moment from 'moment'

export default {
  filters: {
  },
  data() {
    return {
      listQuery: {
        query: {},
        page: {
          num: 0,
          count: 10
        }
      },
      jobs: [],
      jobCount: 10,
      page: 1,
      dateRange: []
    }
  },

  created() {
    this.listQuery.query.projectName = this.$route.query.projectName
    this.listQuery.query.gitUser = this.$route.query.gitUser
    if (this.$route.query.startDate) {
      this.dateRange[0] = JSON.parse(this.$route.query.startDate)
    }
    if (this.$route.query.endDate) {
      this.dateRange[1] = this.$route.query.endDate
      this.dateRange[1] = JSON.parse(this.$route.query.endDate)
    }

    this.fetchSonarJob()
  },
  methods: {
    handleCurrentChange() {
      this.fetchSonarJob()
    },
    handleFilter() {
      this.page = 1
      this.fetchSonarJob()
    },
    fetchSonarJob() {
      this.listQuery.page.num = this.page - 1
      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.query.startDate = this.dateRange[0]
      this.listQuery.query.endDate = this.dateRange[1]
      fetchSonarJob(this.listQuery).then(res => {
        this.jobs = res.data.data
        this.jobCount = res.data.count
        this.jobs.forEach(item => {
          if (item.buildResult === 'success') {
            item.desc = item.sonarResult
            switch (item.sonarResult) {
              case 'OK':
                item.statusIcon = 'el-icon-success'
                break
              case 'ERROR':
                item.statusIcon = 'el-icon-error'
                break
              case 'WARN':
                item.statusIcon = 'el-icon-warning'
                break
              case 'FAILED':
                item.statusIcon = 'el-icon-remove'
                break
              default:
                item.statusIcon = 'el-icon-loading'
                break
            }
          } else if (item.buildResult === 'error') {
            item.statusIcon = 'el-icon-remove'
            item.desc = 'EXCEPTION'
          } else {
            item.statusIcon = 'el-icon-loading'
          }
        })
      }).catch(() => {
      })
    },
    formatDate(row, val) {
      const pattern = 'YYYY-MM-DD HH:mm:ss'
      return moment(row.createdAt).format(pattern)
    },

    handleInfo(row) {
      this.$router.push({ name: 'jobDetail', query: { pipelineId: row.id }})
    },
    handleHook(row) {
      this.$router.push({ name: 'hookInfo', query: { gitHookReceiveId: row.gitHookReceiveId }})
    },
    handleJenkins(row) {
      window.open(`http://192.168.4.96:8080/job/${row.buildJob}/${row.buildId}/console`, '_blank')
    },
    handleSonar(row) {
      const from = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
      window.open(`http://sonar.quantgroups.com/project/activity?id=${row.projectName}&selected_date=${row.analysisDate}&from=${from}`, '_blank')
    }
  }
}
</script>
