<template>
  <div class="app-container">
    <h3 style="overflow: hidden">
      流水线管理
      <el-button type="primary" plain style="margin-right:40px;float:right" icon="el-icon-edit" @click="handleCreate">新建</el-button>
    </h3>
    <el-table
      v-loading="listLoading"
      :data="pipes"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top: 10px">
      <el-table-column type="index" align="center" width="65"/>
      <el-table-column label="Pipeline Name" prop="name" align="center">
        <template slot-scope="scope">
          <!--<a :href="'http://'+scope.row.name" target="_blank"><u>{{ scope.row.name }}</u></a>-->
          <el-button type="info" plain size="small" @click="handleDetail(scope.row)">{{ scope.row.name }}</el-button>
        </template>
      </el-table-column>>
      <el-table-column label="Pipeline Description" prop="description" width="350" align="center"/>
      <el-table-column prop="user" label="Update User" align="center"/>
      <el-table-column :formatter="formatDate" prop="createTime" label="Create Date" align="center"/>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button v-if="scope.row.status!=='deleted'" size="mini" type="danger" plain @click="handleDelete(scope.row)">{{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogPipeStatus" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="100px" style="width: 80%">
        <el-form-item label="Name *">
          <el-input v-model="createDate.name"/>
        </el-form-item>
        <el-form-item label="Description *" label-width="100px">
          <el-input v-model="createDate.description"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createPipeline">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogdeletVisible" :data="updateData" title="删除" width="30%">
      <span >
        确定要删除 <strong>{{ updateData.name }}</strong> 吗?
      </span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogdeletVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="deletePipeline">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import treeTable from '@/components/TreeTable'
import { getFlow, savePipeline, updatePipeline, deletePipeline } from '@/api/pipeline'
import moment from 'moment'

export default {
  components: { treeTable },
  data() {
    return {
      pipes: [],
      listLoading: true,
      dialogPipeStatus: '',
      dialogFormVisible: false,
      dialogdeletVisible: false,
      ditor: null,
      pipeline: { description: '', name: '', stageMap: {}, type: 'flow' },
      updateData: { createTime: '', description: '',
        id: '',
        logicDel: 0,
        name: '',
        stages: [],
        type: 'flow',
        updateTime: '',
        user: '' },
      createDate: { description: '', name: '' }
    }
  },
  created() {
    this.getFlow()
  },
  methods: {
    getFlow() {
      getFlow().then(res => {
        this.pipes = res.data.data
        this.pipes.map(item => {
          item.stages.map(item => {
            item.tasks.map(item => {
              item.type = `task ${item.type}`
              return item
            })
            item.type = 'stage'
            item.children = item.tasks
            return item
          })
          item.children = item.stages
          return item
        })

        this.listLoading = false
      })
    },
    formatDate(row, val) {
      const pattern = 'YYYY-MM-DD HH:mm:ss'
      return moment(row.createTime).format(pattern)
    },
    handleCreate() {
      this.dialogFormVisible = true
      this.dialogPipeStatus = '新建Pipeline'
      this.createDate = { description: '', name: '' }
    },
    createPipeline() {
      if (this.dialogPipeStatus === '新建Pipeline') {
        this.pipeline.name = this.createDate.name
        this.pipeline.description = this.createDate.description
        savePipeline(this.pipeline).then(res => {
          this.dialogFormVisible = false
          if (res.data.code === '0000') {
            this.getFlow()
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          }
        })
      } else {
        this.updateData.name = this.createDate.name
        this.updateData.description = this.createDate.description
        updatePipeline(this.updateData).then(res => {
          this.dialogFormVisible = false
          if (res.data.code === '0000') {
            this.getFlow()
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          }
        })
      }
    },
    handleUpdate(row) {
      this.dialogFormVisible = true
      this.dialogPipeStatus = '编辑Pipeline'
      this.createDate = JSON.parse(JSON.stringify(row))
      this.updateData = JSON.parse(JSON.stringify(row))
    },
    handleDelete(row) {
      this.dialogdeletVisible = true
      this.updateData = Object.assign({}, row)
    },
    deletePipeline() {
      deletePipeline(this.updateData.id).then(res => {
        this.dialogdeletVisible = false
        if (res.data.code === '0000') {
          this.getFlow()
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    handleDetail(row) {
      this.$router.push({ name: 'managerDetail', query: { pipelineId: row.id }})
    }
  }
}
</script>
