<template>
  <div class="container-fluid">
    <Navbar title="执行列表" :is-go-back="false" />

    <a-tabs v-model:activeKey="taskType" @change="changeSelectTab">
      <a-tab-pane key="HTTP" tab="HTTP实例" />
      <a-tab-pane key="PROCESS_REPORT" tab="流程报表实例" />
      <a-tab-pane key="PROCESS" tab="流程任务" />
    </a-tabs>

    <a-form :colon="false" style="margin: 10px 0">
      <a-row :gutter="[8, 14]" justify="space-start">
        <a-col style="display: flex; align-items: center">
          <a-form-item
            label="选择任务"
            :label-col="{ style: 'width: 68px' }"
            class="horizontal-form-item"
          >
            <a-select
              v-model:value="selectedTaskDefineId"
              class="w-full"
              @change="changeFilterData"
            >
              <a-select-option
                v-for="(data, index) in taskDefineDtos"
                :key="index"
                :value="data.id"
              >
                {{ data.taskName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item
            label="运行状态"
            :label-col="{ style: 'width: 68px' }"
            class="horizontal-form-item"
          >
            <a-select
              v-model:value="selectedTaskInstanceStatus"
              class="w-full"
              @change="changeFilterData"
            >
              <a-select-option
                v-for="(data, index) in taskInstanceStatus"
                :key="index"
                :value="data.value"
              >
                {{ data.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item
            label="开始时间"
            :label-col="{ style: 'width: 68px' }"
            class="horizontal-form-item"
          >
            <DateTime v-model="startDate" class="w-full" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item
            label="结束时间"
            :label-col="{ style: 'width: 68px' }"
            class="horizontal-form-item"
          >
            <DateTime v-model="endDate" class="w-full" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item
            label=""
            :label-col="{ style: 'width: 68px' }"
            class="horizontal-form-item"
          >
            <a-button type="primary" @click="changeFilterData">查询</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div style="margin-top: 16px">
      <CommonTable
        ref="table"
        :columns="columns"
        :data-source="taskInstanceDtos"
        :total="pagination.total"
        @get-pager="getPageParams"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key == 'httpRequestType'">
            <span>
              {{
                taskType == "HTTP"
                  ? "HTTP请求类型"
                  : taskType == "PROCESS"
                    ? "流程编号"
                    : "流程报表文件编码"
              }}
            </span>
          </template>
          <template v-if="column.key == 'httpRequestUrl'">
            <span>
              {{
                taskType == "HTTP"
                  ? "HTTP请求路径"
                  : taskType == "PROCESS"
                    ? "流程任务名称"
                    : "流程报表名称"
              }}
            </span>
          </template>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'taskType'">
            {{
              record.taskType == null
                ? ""
                : record.taskType == "HTTP"
                  ? "HTTP请求"
                  : record.taskType == "PROCESS"
                    ? "流程任务"
                    : "流程报表"
            }}
          </template>
          <template v-if="column.key == 'httpRequestType'">
            {{
              record.taskType == "HTTP"
                ? record.httpRequestType
                : taskType == "PROCESS"
                  ? record.processNo
                  : record.processReportNo
            }}
          </template>
          <template v-if="column.key == 'httpRequestUrl'">
            {{
              record.taskType == "HTTP"
                ? record.httpRequestUrl
                : taskType == "PROCESS"
                  ? record.taskName
                  : record.processReportName
            }}
          </template>
          <template v-if="column.key == 'taskInstanceStatus'">
            {{
              record.taskInstanceStatus == "SUCCESS"
                ? "成功"
                : record.taskInstanceStatus == "IN_OPERATION"
                  ? "运行中"
                  : "失败"
            }}
          </template>
        </template>
      </CommonTable>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import TaskInstanceResource from '../api/base/TaskInstanceResource.js';
import TaskDefineResource from '../api/task/TaskDefineResource.js';
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
import CommonTable from '../common/CommonTable.vue';
import { message } from 'ant-design-vue';

export default {
  components: {
    vSelect,
    CommonTable,
  },
  data: function () {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: ({ text, record, index }) => `${index + 1}`,
        },
        {
          title: '任务名',
          dataIndex: 'taskName',
          key: 'taskName',
        },
        {
          title: '任务类型',
          dataIndex: 'taskType',
          key: 'taskType',
        },
        {
          title: 'HTTP请求类型',
          dataIndex: 'httpRequestType',
          key: 'httpRequestType',
          width: 180,
        },
        {
          title: 'HTTP请求路径',
          dataIndex: 'httpRequestUrl',
          key: 'httpRequestUrl',
          width: 180,
        },
        {
          title: '开始时间',
          dataIndex: 'startDate',
          key: 'startDate',
        },
        {
          title: '结束时间',
          dataIndex: 'endDate',
          key: 'endDate',
        },
        {
          title: '运行状态',
          dataIndex: 'taskInstanceStatus',
          key: 'taskInstanceStatus',
        },
        {
          title: '运行结果',
          dataIndex: 'operationResult',
          key: 'operationResult',
          width: 180,
          fixed: 'right',
          ellipsis: true,
        },
      ].map(item => ({ ...item, align: 'center' })),

      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      loading: false,
      taskType: 'HTTP',
      selectedTaskDefineId: null,
      selectedTaskInstanceStatus: 'ALL',
      taskDefineDtos: [],
      taskInstanceDtos: [],
      taskInstanceStatus: [
        {
          value: 'ALL',
          label: '全部',
        },
        {
          value: 'SUCCESS',
          label: '成功',
        },
        {
          value: 'IN_OPERATION',
          label: '运行中',
        },
        {
          value: 'FAIL',
          label: '失败',
        },
      ],
      startDate: null,
      endDate: null,
    };
  },

  mounted: function () {
    var _self = this;
    _self.getAllTaskDefineDtos();
    _self.getDatas();
  },

  methods: {
    getPageParams: function (start, length) {
      this.pagination.current_page = start;
      this.pagination.per_page = length;
      this.getDatas();
    },
    changeSelectTab: function (value) {
      var _self = this;
      _self.taskType = value;
      _self.selectedTaskDefineId = null;
      _self.selectedTaskInstanceStatus = 'ALL';
      _self.startDate = null;
      _self.endDate = null;
      _self.getAllTaskDefineDtos();
      _self.getDatas();
    },
    changeFilterData: function () {
      var _self = this;
      _self.$refs.table.backFirstPage();
    },
    getAllTaskDefineDtos: function () {
      var _self = this;
      var taskDefineSelectRequest = {
        id: null,
        taskName: null,
        taskDescription: null,
        taskType: _self.taskType,
        start: 0,
        length: 0,
      };
      _self.taskDefineDtos.splice(0, _self.taskDefineDtos.length);
      TaskDefineResource.getAllTaskDefine(taskDefineSelectRequest).then(
        successData => {
          // console.log(successData, 'getAllTaskDefine');
          if (successData && successData.errorCode == 0) {
            _self.taskDefineDtos = successData.datas;
            // _self.pagination.total = successData.total;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    getDatas: function () {
      var _self = this;
      var selectedTaskInstanceStatus = null;
      if (_self.selectedTaskInstanceStatus != 'ALL') {
        selectedTaskInstanceStatus = _self.selectedTaskInstanceStatus;
      }
      var taskInstanceQueryDto = {
        taskDefineId: _self.selectedTaskDefineId,
        taskName: null,
        taskDescription: null,
        taskType: _self.taskType,
        startDate: _self.startDate,
        endDate: _self.endDate,
        taskInstanceStatus: selectedTaskInstanceStatus,
        start: (this.pagination.current_page - 1) * this.pagination.per_page,
        length: this.pagination.per_page,
      };
      _self.loading = true;
      TaskInstanceResource.list(taskInstanceQueryDto).then(
        successData => {
          // console.log(successData, 'list');
          _self.loading = false;
          if (successData && successData.errorCode == 0) {
            _self.taskInstanceDtos = successData.datas;
            _self.pagination.total = successData.total;
            _self.pagination.last_page = Math.ceil(
              successData.total / _self.pagination.per_page,
            );
          } else {
            message.warning(successData.errorMessage);
          }
        },
        errorData => {
          _self.loading = false;
          Common.processException(errorData);
        },
      );
    },
  },
};
</script>

<style scoped>
.flex-content {
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
  height: calc(100vh - 150px);
}

.fixed-table {
  table-layout: fixed;
  width: 1050px !important;
  min-width: 1050px !important;
}

table.fixed-table tr {
  height: 40px;
}

#myTabContent {
  margin-top: 8px;
}
.form-group {
  margin-right: 8px;
}
table.fixed-table th,
table.fixed-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tab-content {
  margin-top: 16px;
}
:deep(.ant-tabs-nav) {
  margin: 0;
}
.horizontal-form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.ant-form-item) {
  margin-bottom: -5px !important;
}

/* 调整标签样式 */
:deep(.ant-form-item-label) {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

/* 确保控件容器填充剩余空间 */
:deep(.ant-form-item-control) {
  flex: 1;
  min-width: 0;
}

/* 设置组件宽度 */
.w-full {
  width: 230px;
}

.form-group {
  margin-bottom: 10px;
}

:deep(.ant-form-item-label > label) {
  font-size: 14px !important;
  font-weight: 600 !important;
}
</style>
