<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="TaskQueue">
        <template #command="{ row }">
          <Button size="small" :title="$t('Front_Btn_Detail')" type="info" custom-icon="fa fa-bars" @click="$refs.logTable.open({ taskQueueID: row.id })"></Button>
          <Button v-if="allow('retry')" size="small" :title="$t('Front_Btn_Execute')" type="primary" custom-icon="fa fa-bolt" @click="execute(row)"></Button>
          <Button
            v-if="allow('cancel') && (row.status == 'Pending' || row.status == 'Retry')"
            size="small"
            :title="$t('Front_Btn_Cancel')"
            type="warning"
            custom-icon="fa fa-times"
            @click="cancel(row)"
          ></Button>
        </template>
      </view-table>
    </Card>
    <modal-table ref="logTable" view-code="TaskQueueLogModal">
      <template #command="{ row }">
        <Button v-if="row.apiOutLogID" size="small" :title="$t('Front_Btn_Request')" type="info" custom-icon="fa fa-cloud-upload-alt" @click="openRequest(row)"></Button>
        <Button v-if="row.apiOutLogID" size="small" :title="$t('Front_Btn_Response')" type="info" custom-icon="fa fa-cloud-download-alt" @click="openResponse(row)"></Button>
      </template>
    </modal-table>
    <Modal v-model="isShow" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" :width="800">
      <template #header>
        <div>
          <slot name="header">
            <span class="title">{{ title }}</span>
            <span class="description">{{ description }}</span>
          </slot>
        </div>
      </template>
      <div class="ivu-ml-8 ivu-mr-8">
        <Row :gutter="24" type="flex">
          <Col span="12">
            <pre>{{ json }}</pre>
          </Col>
        </Row>
      </div>
      <template #footer>
        <div>
          <Button type="default" custom-icon="fa fa-times" @click="isShow = false">{{ $t('Front_Btn_Close') }}</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import taskQueueApi from '../../api/taskQueue';
  import modelApi from '../../api/model';

  export default {
    name: 'system-taskQueue',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        isShow: false,
        json: null,
        title: null,
        description: null
      };
    },
    computed: {},
    created() {},
    methods: {
      // 执行
      execute(row) {
        this.confirm('Front_Msg_Sure_To_Start_Immediately', async () => {
          await taskQueueApi.execute(row.id);
          this.success('Front_Msg_Success');
          this.$refs.table.loadData();
        });
      },
      // 取消
      cancel(row) {
        this.confirm('Front_Msg_Sure_To_Cancel_Task', async () => {
          await taskQueueApi.cancel(row.id);
          this.success('Front_Msg_Success');
          this.$refs.table.loadData();
        });
      },
      async openRequest(row) {
        const res = await modelApi.get('ApiOutLog', row.apiOutLogID);

        try {
          this.json = JSON.stringify(JSON.parse(res.requestBody), null, 2);
        } catch {
          this.json = res.requestBody;
        }

        this.title = this.$t('Front_Label_Request');
        this.description = this.$t('Front_Label_Request_Desc');
        this.isShow = true;
      },
      async openResponse(row) {
        const res = await modelApi.get('ApiOutLog', row.apiOutLogID);

        try {
          this.json = JSON.stringify(JSON.parse(res.responseBody), null, 2);
        } catch {
          this.json = res.responseBody;
        }

        this.title = this.$t('Front_Label_Response');
        this.description = this.$t('Front_Label_Response_Desc');
        this.isShow = true;
      }
    }
  };
</script>
