<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" fullscreen hide-footer @cancel="onCancel">
    <div class="page-view flex-1 h-100">
      <app-filter :model="filters" ref="app-filter" class="bg-white px-15 border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="5" label="执行状态">
          <el-select v-model="filters.jobStatus" clearable @keyup.enter.native="onQuery(filters)">
            <el-option label="成功" :value="1"></el-option>
            <el-option label="失败" :value="0"></el-option>
          </el-select>
        </app-filter-item>
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="5" label="调度任务状态">
          <el-select v-model="filters.taskStatus" clearable @keyup.enter.native="onQuery(filters)">
            <el-option label="成功" :value="1"></el-option>
            <el-option label="失败" :value="0"></el-option>
          </el-select>
        </app-filter-item>
      </app-filter>

      <div class="pa-15 bg-white flex-1 flex-col mt-15 border-radius-5">
        <app-table
          ref="table"
          :column="columns"
          :pagination="pagination"
          :table-data="tableData"
          :table-loading="tableLoading"
          :total="total"
          row-key="id"
          @pagination-change="onPaginationChange"
          @row-dblclick="handleDetail"
        >
          <template #jobStatus="scope">
            <el-tag :type="scope.row['jobStatus'] === 0 ? 'danger' : scope.row['jobStatus'] === 1 ? 'success' : 'primary'">{{
              scope.row['jobStatus'] === 0 ? '失败' : scope.row['jobStatus'] === 1 ? '成功' : '-'
            }}</el-tag>
          </template>
          <template #taskStatus="scope">
            <el-tag :type="scope.row['taskStatus'] === 0 ? 'danger' : scope.row['jobStaskStatustatus'] === 1 ? 'success' : 'primary'">{{
              scope.row['taskStatus'] === 0 ? '失败' : scope.row['taskStatus'] === 1 ? '成功' : '-'
            }}</el-tag>
          </template>
        </app-table>
      </div>
    </div>
    <log-detail-dialog v-model="detailVisible" :data="detailData" :title="detailTitle" />
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import tableMixin from '@/mixins/table.js';
import logDetailDialog from './logDetailDialog.vue';
import API from '@/api/business/schedulerJob';

export default {
  name: 'taskLogDialog',
  components: { logDetailDialog },
  mixins: [dialogMixin, tableMixin],
  props: [],
  data() {
    const TABLE_CONFIG = {
      tableData: [{ id: 1 }],
      // 列表表头
      columns: [
        { label: '作业名称', prop: 'jobName' },
        { label: '作业执行开始时间', prop: 'jobStartTime' },
        { label: '作业执行结束时间', prop: 'jobEndTime' },
        { label: '执行时长（秒）', prop: 'jobDuration' },
        { label: '执行状态', prop: 'jobStatus', dataType: 'slot', slot: 'jobStatus', width: '140', align: 'center' },
        { label: '调度任务状态', prop: 'taskStatus', dataType: 'slot', slot: 'taskStatus', width: '140', align: 'center' },
      ],
      sorter: [
        {
          direction: 'DESC',
          property: 'jobStartTime',
        },
      ],
    };

    const DIALOG_CONFIG = {
      detailVisible: false,
      detailTitle: '详情',
      detailData: {},
    };

    return {
      ...TABLE_CONFIG,
      ...DIALOG_CONFIG,

      origintTableData: null,
      defaultFilter: [
        {
          operation: 'EQUAL',
          property: 'jobId',
          relation: 'AND',
          value: '',
        },
        {
          operation: 'EQUAL',
          property: 'taskMode',
          relation: 'AND',
          value: '',
        },
      ],
    };
  },
  mounted() {},
  computed: {
    // 配置列表接口方法：只有配置了该计算属性 才会执行 table mixins中的getData方法
    dataMethod() {
      return API.getlogList;
    },
  },
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      if (data?.id) {
        this.origintTableData = data;
        this.queryParams.pageBean = this.pagination;
        this.refresh();
      }
    },
    onBeforeGetData(queryParams, formData) {
      this.setFilterValue(this.queryParams, this.defaultFilter, 'jobId', this.origintTableData?.id || '');
      this.setFilterValue(this.queryParams, this.defaultFilter, 'taskMode', this.origintTableData?.jobTaskMode || '');
    },

    // 列表 ------------
    handleDetail(row) {
      this.detailVisible = true;
      this.detailTitle = '日志详情 - ' + row.jobName;
      this.detailData = row;
    },

    onCancel() {
      this.filters = {};
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.table__body_wrapper {
  flex: 1;
  height: calc(100% - 45px);
}
</style>
