<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table ref="table" view-code="OnTask" @create="$refs.form.open()" @edit="({ row, index }) => $refs.form.open(row)">
        <template #command="{ row }">
          <Button size="small" v-if="row.status == 'Pending'" title="提前关闭" type="error" custom-icon="fa fa-stop-circle" @click="close(row)"></Button>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="OnTaskEdit" @on-after-save="$refs.table.loadData()" />
  </div>
</template>

<script>
  import { mixinPage } from 'mooho-base-admin-plus';
  import onTaskApi from '../../api/onTask';

  export default {
    name: 'storage-onTask',
    mixins: [mixinPage],
    components: {},
    data() {
      return {};
    },
    computed: {},
    methods: {
      async close(row) {
        this.confirm('确定关闭当前任务吗？', async () => {
          await onTaskApi.close(row);
          this.$refs.table.loadData();
        });
      }
    }
  };
</script>
