<template>
  <div class="app-container">
    <h3 style="overflow:hidden;">
      执行实例
    </h3>
    <el-table
      v-loading="listLoading"
      :data="jobs"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column type="index" align="center" width="65"/>
      <el-table-column label="项目" prop="gitRepositoryName" align="center"/>
      <el-table-column :formatter="replaceRef" label="分支" prop="gitRefName" align="center"/>
      <el-table-column prop="triggerUser" label="触发者" align="center"/>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.statusIcon" />
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="进度" align="center"/>
      <el-table-column :formatter="formatDate" prop="createTime" label="触发时间" align="center"/>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleInfo(scope.row)">详情</el-button>
          <el-button size="mini" type="primary" icon="el-icon-news" @click="handleHook(scope.row)">hook info</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :total="1000" background layout="prev, pager, next" style="margin-top:20px" @current-change="handleCurrentChange"/>
  </div>
</template>

<script>
import { fetchPipelineEntitys } from '@/api/pipeline'
import moment from 'moment'

export default {
  filters: {
  },
  data() {
    return {
      jobs: [],
      listLoading: true,
      pageCount: 10,
      page: 1,
      runtime: { runtime: 'run' }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.fetchPipelineEntitys()
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.fetchPipelineEntitys()
    },
    fetchPipelineEntitys() {
      fetchPipelineEntitys(this.page, this.pageCount, this.runtime).then(res => {
        this.listLoading = false
        this.jobs = res.data.data.data
        this.jobs.map(item => {
          item.progress = item.stageStep + ' - ' + item.stageTaskStep
          switch (item.status) {
            case 'end':
              item.statusIcon = 'el-icon-success'
              break
            case 'fail':
              item.statusIcon = 'el-icon-error'
              break
            case 'run':
              item.statusIcon = 'el-icon-loading'
              break
          }
        })
      }).catch(() => {
        this.listLoading = false
      })
    },
    formatDate(row, val) {
      const pattern = 'YYYY-MM-DD HH:mm:ss'
      return moment(row.createTime).format(pattern)
    },
    replaceRef(row) {
      return row.gitRefName ? row.gitRefName.replace('refs/heads/', '') : ''
    },
    handleInfo(row) {
      this.$router.push({ name: 'jobDetail', query: { pipelineId: row.id }})
    },
    handleHook(row) {
      this.$router.push({ name: 'hookInfo', query: { gitHookReceiveId: row.gitHookReceiveId }})
    }
  }
}
</script>
