<template>
  <el-container style="margin-top:45px;height: 300px;width: 90%; margin-left:80px;border-bottom: 5px solid #B3C0D1; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <el-aside width="500px" style="text-align: center; padding-top: 45px; border-right: 5px solid #B3C0D1">
      <el-progress :percentage="percentage" :width="220" type="circle" />
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px" />
      <el-main>
        <el-table :data="pipes">
          <el-table-column prop="name" label="name" width="180">
            <template slot-scope="scope">
              <i class="el-icon-star-off" style="color: red"/>
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="status" width="120"/>
          <el-table-column label="构建日志" width="140">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-info"
                size="mini"
                @click="handleConsole(scope.row.detailId,scope.row.status)"/>
            </template>
          </el-table-column>
          <el-table-column label="构建结果" width="120">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-news"
                size="mini"
                @click="handleResult(scope.$index, scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column :formatter="formatDate" prop="updateTime" label="构建时间" width="160"/>
        </el-table>
        <el-dialog :visible.sync="dialogResultVisible" title="Task Result Info" >
          <el-container style="height: 100px; border: 1px #eee">
            <el-aside width="600px" style="padding-top: 20px">
              <h2>Time 1 success </h2>
            </el-aside>
            <el-container>
              <el-main>
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-info"
                    size="medium"
                    style= "text-align: center"
                    @click="handleConsole(grid.id, grid.status)"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-popover
                    placement="right"
                    width="400"
                    trigger="click">
                    <el-table :data="gridData">
                      <el-table-column width="150" prop="name" label="类型"/>
                      <el-table-column width="100" prop="value" label="结果"/>
                    </el-table>
                    <el-button
                      slot="reference"
                      type="text"
                      icon="el-icon-more"
                      size="medium"
                      style= "text-align: center;"/>
                  </el-popover>
                </template>
              </el-main>
            </el-container>
          </el-container>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>
<style>
.el-aside {
  color: #333
}
</style>

<script>
import { getPipelineEntity, getPipelineEntityTaskResult } from '@/api/pipeline'
import moment from 'moment'

export default {
  data() {
    return {
      pipes: [],
      listLoading: true,
      pipelineId: '',
      detailId: '',
      dialogResultVisible: false,
      dialogStatus: '',
      percentage: 0,
      stageIndex: 0,
      taskIndex: 0,
      gridData: [],
      grid: {}
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getPipelineEntity()
  },
  methods: {
    getPipelineEntity() {
      // 获取PipelineId
      this.pipelineId = this.$route.query.pipelineId
      // 根据pipelineId获取详情数据
      getPipelineEntity(this.pipelineId).then(res => {
        this.listLoading = false
        var count = 0
        for (var stage in res.data.data.stages) {
          for (var task in res.data.data.stages[stage].tasks) {
            this.pipes.push(res.data.data.stages[1].tasks[task])
            if (res.data.data.stages[1].tasks[task].status === 'success') {
              count++
            }
            this.percentage = count / task * 100
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    formatDate(row, val) {
      var pattern = 'YYYY-MM-DD HH:mm:ss'
      return moment(row.updateTime).format(pattern)
    },
    handleConsole(id, status) {
      this.$router.push({ name: 'taskConsole', query: { detailId: id, status: status }})
    },
    handleResult(row) {
      this.row = row
      this.dialogResultVisible = true
      this.pipelineId = this.$route.query.pipelineId
      this.taskIndex = this.row + 1
      this.stageIndex = 1
      getPipelineEntityTaskResult(this.pipelineId, this.stageIndex, this.taskIndex).then(res => {
        this.gridData = res.data.data[0].info
        this.grid = res.data.data[0]
      })
    }
  }
}
</script>
