<template>
  <div class="page-view flex-row-sb">
    <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="100px" @query="onQuery" @reset="onReset">
        <app-filter-item :filter-config="{ operation: 'LIKE' }" :span="5" el-type="input" label="作业名称">
          <el-input v-model="filters.jobName" clearable placeholder="请输入" @keyup.enter.native="onQuery(filters)" />
        </app-filter-item>
        <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="5" label="任务类型">
          <el-select v-model="filters.taskMode" clearable @keyup.enter.native="onQuery(filters)">
            <el-option label="Java程序采集" :value="1" />
            <el-option label="Kettle采集" :value="2" />
            <el-option label="Shell采集" :value="3" />
            <el-option label="平台ETL抽取" :value="4" />
            <el-option label="平台ODS抽取" :value="5" />
          </el-select>
        </app-filter-item>
        <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 label="失败" :value="0" />
          </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 label="失败" :value="0" />
          </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 #taskMode="scope">
            <el-tag type="primary" v-if="scope.row['taskMode'] === 1"> Java程序采集 </el-tag>
            <el-tag type="primary" v-else-if="scope.row['taskMode'] === 2"> Kettle采集 </el-tag>
            <el-tag type="primary" v-else-if="scope.row['taskMode'] === 3"> Shell采集 </el-tag>
            <el-tag type="primary" v-else-if="scope.row['taskMode'] === 4"> 平台ETL抽取 </el-tag>
            <el-tag type="primary" v-else-if="scope.row['taskMode'] === 5"> 平台ODS抽取 </el-tag>
            <el-tag type="primary" v-else> - </el-tag>
          </template>
          <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['taskStatus'] === 1 ? 'success' : 'primary'">{{
              scope.row['taskStatus'] === 0 ? '失败' : scope.row['taskStatus'] === 1 ? '成功' : '-'
            }}</el-tag>
          </template>
          <template #jobTime="scope">
            <span>{{ scope.row['jobStartTime'] || '' }} 至 {{ scope.row['jobEndTime'] || '' }}</span>
          </template>
          <template #taskTime="scope">
            <span>{{ scope.row['taskStartTime'] || '' }} 至 {{ scope.row['taskEndTime'] || '' }}</span>
          </template>
        </app-table>
      </div>
      <detail-dialog v-model="dialogVisible" :data="dialogdData" :title="dialogTitle" />
    </div>
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
import detailDialog from './detailDialog.vue';
import API from '@/api/business/schedulerJob';

export default {
  name: 'gatherJobTaskLog',
  components: { detailDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '作业名称', prop: 'jobName', align: 'center' },
        { label: '作业执行状态', prop: 'jobStatus', dataType: 'slot', slot: 'jobStatus', width: '120', align: 'center' },
        { label: '作业执行时长(秒)', prop: 'jobDuration', minWidth: '100', align: 'center' },
        { label: '作业执行时间', prop: 'jobTime', dataType: 'slot', slot: 'jobTime', minWidth: '180', align: 'center' },
        { label: '任务类型', prop: 'taskMode', dataType: 'slot', slot: 'taskMode', minWidth: '100', align: 'center' },
        { label: '任务执行状态', prop: 'taskStatus', dataType: 'slot', slot: 'taskStatus', width: '120', align: 'center' },
        { label: '任务执行时长(秒)', prop: 'taskDuration', minWidth: '100', align: 'center' },
        { label: '任务执行时间', prop: 'taskTime', dataType: 'slot', slot: 'taskTime', minWidth: '180', align: 'center' },
      ],
      sorter: [
        {
          direction: 'DESC',
          property: 'jobStartTime',
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '详情',
      dialogdData: {},
    };

    return {
      ...TABLE_CONFIG,
      ...DIALOG_CONFIG,
    };
  },
  computed: {
    // 配置列表接口方法：只有配置了该计算属性 才会执行 table mixins中的getData方法
    dataMethod() {
      return API.getlogList;
    },
  },

  methods: {
    // 列表 ------------
    handleDetail(row) {
      this.dialogVisible = true;
      this.dialogTitle = `日志详情 - ${row.name}`;
      this.dialogdData = row;
    },
  },
};
</script>

<style lang="scss" scoped></style>
