<!-- 定时任务管理页面 -->
<template>
  <div>
    <el-card class="flex-1">
      <template slot="header">
        <span>任务日志管理</span>
      </template>
      <el-form :model="queryform" ref="queryform">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="执行者IP" prop="pcip">
              <el-input v-model="queryform.pcip"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="Job名称" prop="jobName">
              <el-input v-model="queryform.jobName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="执行者名称" prop="pcname">
              <el-input v-model="queryform.pcname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='12' :sm='12'>
            <el-form-item label="执行区间" prop="dateRange">
              <el-date-picker type="datetimerange" v-model="dateRange" placeholder="选择时间范围"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg='8' :sm='12'>
            <el-form-item label="日志级别" prop="logLevel">
              <el-radio-group v-model="queryform.logLevel">
                <el-radio label="1">系统级别</el-radio>
                <el-radio label="2">自定义级别</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="flex-1 margin-top-2">
      <template slot="header">
        <span>任务日志列表</span>
        <div class="pull-right">
          <el-button type="primary" @click="queryData" icon="el-icon-fa-search" title="查询"></el-button>
          <el-button type="primary" @click="resetquery" icon="el-icon-fa-reply-all" title="重置"></el-button>
        </div>
      </template>
      <PageTable hideTitle ref="dataTable" :auto-load="true" :page-size="10" @load-data="dataTableLoad" :data="table.data" highlight-current-row stripe border>
        <el-table-column prop="pcip" label="执行者IP" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pcname" label="执行者名称" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jobname" label="Job名称" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="timecon" label="Job执行耗时" width="100" show-overflow-tooltip>
          <template slot-scope='scope'>{{scope.row.timecon/1000+"s"}}</template>
        </el-table-column>
        <el-table-column prop="recotime" label="记录/完成时间" width="140" show-overflow-tooltip>
          <template slot-scope='scope'>{{scope.row.recotime|date('%Y-%m-%d %T')}}</template>
        </el-table-column>
        <el-table-column prop="exceinfo" label="执行信息" show-overflow-tooltip></el-table-column>
      </PageTable>
    </el-card>
  </div>
</template>
<script>
import LogsQuartzAPI from "@/api/base/logs/LogsQuartz";

export default {
  data() {
    return {
      queryform: {
        pcip: "",
        pcname: "",
        jobName: "",
        startTime: null,
        endTime: null,
        logLevel: "1"
      },
      dateRange: [],
      table: {
        data: []
      }
    };
  },
  watch: {
    dateRange: {
      handler(val) {
        if (val && val.length === 2) {
          this.queryform.startTime = val[0];
          this.queryform.endTime = val[1];
        } else {
          this.queryform.startTime = null;
          this.queryform.endTime = null;
        }
      }
    }
  },
  methods: {
    queryData() {
      this.$refs.dataTable.load(this.queryform);
    },
    resetquery() {
      this.$refs.queryform.resetFields();
      this.queryform.logLevel = "1";
      this.dateRange = [];
    },
    dataTableLoad(params, resolve) {
      LogsQuartzAPI.queryLogsQuartz(params)
        .then(resolve) //  让表格解析你提供的数据 (主要解析页码等)
        .then(respData => (this.table.data = respData.datarows)); // 本地也记录一下数据 (提供给表示显示的数据)
    }
  }
};
</script>
