<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <div>
      <el-toolbar>
        <el-button @click="addSchedule()" priv="Platform.Schedule.Add">
          <i class="fa fa-plus"></i> 新建
        </el-button>
      </el-toolbar>

      <div>

        <el-list-view ref="scheduleList" :pageSize="10" data-read-url="/ui/schedules" @selection-change="onSelectionChange">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row> <a class="list-card-title" href="javascript:void(0)" @click.stop="editSchedule(row)">{{row.sourceIDName}}</a></el-row>
              <el-row>
                <el-col :span="4"><span>类型：</span><em>{{row.typeCodeName}}</em></el-col>
                <el-col :span="7"><span>下次执行时间：</span> <em>{{row.nextRunTime | fixDateTime}}</em> </el-col>
                <el-col :span="13"><span>任务描述：</span> <em>{{row.description}}</em> </el-col>
              </el-row>
              <el-row class="list-card-buttons">
                <el-col :span="10">
                  <el-tag v-if="row.isUsing==='Y'" size="small">启用</el-tag>
                  <el-tag v-else size="small" type="danger">禁用</el-tag>
                </el-col>
                <el-col :span="14" class="tar">
                  <el-button @click.stop="editSchedule(row)" type="text" priv="Platform.Schedule.Edit" title="编辑">
                    <i class="fa fa-edit"></i>编辑
                  </el-button>
                  <el-button @click.stop="executionClickHandler(row)" type="text" priv="Platform.Schedule.ManualExecute" title="手动执行">
                    <i class="fa fa-hand-pointer-o"></i>手动执行
                  </el-button>
                  <el-button @click.stop="deleteClickHandler(row)" :disabled="row.typeCode=='SYSTEM'" type="text"  priv="Platform.Schedule.Delete" :title="row.typeCode=='SYSTEM'?'系统任务不能删除':'删除'">
                    <i class="fa fa-remove"></i>删除
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>

<script>
import util from '@src/common/util.js'

export default {
  filters: {
    fixDateTime: function(val) {
      if (val === null) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      selectedRows: [],
      schedules: []
    }
  },
  methods: {
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    addSchedule() {
      this.$router.push({path: `/platform/schedule/new`})
    },
    editSchedule(row) {
      this.$router.push({path: `/platform/schedule/${row.ID}`})
    },

    async deleteClickHandler(row) {
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }

      let res = await axios.delete(`/ui/schedules/${row.ID}`, { params: row }).catch(e => console.log(e))
      res = res.data
      res.status === 1 && this.loadSchedulesData()
      util.showResponseMessage(res)
    },

    async executionClickHandler(row) {
      try {
        let data = row && row.typeCodeName ? row : this.selectedRows[0]
        let res = await axios.post('/ui/schedules/executed', data)
        util.showResponseMessage(res.data)
      } catch (e) {
        util.showErrorNotification(e)
      }
    },

    loadSchedulesData() {
      this.$refs.scheduleList && this.$refs.scheduleList.getData()
    }
  }
}
</script>
