<!-- 调度日志 -->
<template style="background:#e6ebf5;z-index:100;">
  <div class="app-container">
    <!-- 标题 -->
    <div class="main-title" style="padding:10px 0;">
        <i class="el-icon-date" style="color:#1890ff"></i>
        <span style="padding:0 10px;">调度日志</span>
    </div>
    <!-- 分割线 -->
    <div class="border-line"></div>
    <!-- 表单查询条件 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item
        label="任务名称"
        prop="jobName"
      >
        <el-input
          v-model="queryParams.jobName"
          placeholder="请输入任务名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label="任务组名"
        prop="jobGroup"
      >
        <el-select
          v-model="queryParams.jobGroup"
          placeholder="请选择任务组名"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in jobGroupOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="执行时间"
        prop="jobRangeDateTime"
      >
        <el-date-picker
          v-model="queryParams.jobRangeDateTime"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="执行状态"
        prop="status"
      >
        <el-select
          v-model="queryParams.status"
          placeholder="请选择执行状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
        <el-button
          icon="el-icon-refresh-right"
          size="mini"
          @click="handleRefresh"
        >刷新</el-button>
        <el-button
          icon="el-icon-back"
          size="mini"
          @click="handleBack"
        >返回</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格分页列表 -->
    <el-table
      v-loading="loading"
      :data="showData"
      :height="tableHeight"
      style="width:100%;"
      v-tableHeight="{bottomOffset:60}"
    >
      <el-table-column
        min-width="220px"
        label="执行时间"
        align="center"
        prop="jobRangeDateTime"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{scope.row.jobRangeDateTime.join(' ~ ')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="任务名称"
        align="center"
        prop="jobName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="任务组名"
        align="center"
        prop="jobGroup"
        :formatter="jobGroupFormat"
      />
      <el-table-column
        label="任务地址"
        align="center"
        prop="jobAddr"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="执行状态"
        align="center"
        prop="status"
        :formatter="jobStatusFormat"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="失败原因"
        align="center"
        prop="failReason"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="任务参数"
        align="center"
        prop="taskParams"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <el-pagination
      background
      v-show="total>0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 脚垫 -->
    <div style="height:10px;"></div>
  </div>
</template>

<script>
// 引入json数据库
import lowdb from 'lowdb'
import fileSync from 'lowdb/adapters/FileSync'
let adapter = new fileSync('db.json');
const db = lowdb(adapter);
import {changeArr } from '@/utils/index'
export default {
  data () {
    return {
      tableHeight:450,
      showData:[],
      jobId:null,
      currentPage: 1,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 任务组名字典
      jobGroupOptions: [],
      // 状态字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        jobName: undefined,
        jobAddr: undefined,
        jobGroup: undefined,
        status: undefined,
        jobRangeDateTime: undefined,
        type: undefined,
      },
    };
  },
  created () {
    this.jobGroupOptions=[
      {dictLabel:'默认',dictValue:'default'},
      {dictLabel:'系统',dictValue:'system'},
    ];
    this.statusOptions=[
      {dictLabel:'开启',dictValue:'0'},
      {dictLabel:'关闭',dictValue:'1'},
    ];
  },
  mounted () {
    //获取传参jobId
    this.jobId=this.$route.params.jobId?this.$route.params.jobId:sessionStorage.getItem('jobId');
    // 获取表格数据
    this.getList();
  },
  methods: {
    /** 查询调度日志列表 */
    getList(params,fun) {
      this.loading=true;
      params=params||{
          pageNum:this.queryParams.pageNum,
          pageSize:this.queryParams.pageSize,
          type:this.queryParams.type
      }
      let resData = db.read().get('logDB').value()[this.jobId];
      // console.log('resData',resData);
      if(params.type==='filter'){
        resData=this.getFilterData(resData);
      }
      this.showData=[];//清空列表
      this.total = resData?resData.length:0;
      if(this.total>0){
        resData=changeArr(resData,params.pageSize);//保存分组后的全部数据，默认一页10条
        this.showData=resData[params.pageNum-1];//显示第一页数据
      }
      this.loading=false;
      if(fun){
        fun();
      }
    },
    getFilterData(filterData=[]){
      // 按条件一层层过滤
      //  任务名称
      if(this.queryParams['jobName']){
        filterData=filterData.filter((item)=>{return item.jobName.indexOf(this.queryParams['jobName'])!=-1});
        // console.log('filter-jobName',filterData);
      }
      // 任务组名
      if(this.queryParams['jobGroup']){
        filterData=filterData.filter((item)=>{return item.jobGroup===this.queryParams['jobGroup']});
        // console.log('filter-jobGroup',filterData);
      }
      // 执行状态
      if(this.queryParams['status']!==undefined){
        filterData=filterData.filter((item)=>{return item.status===this.queryParams['status']});
        // console.log('filter-status',filterData);
      }
      // // 任务地址
      // if(this.queryParams['jobAddr']){
      //   filterData=filterData.filter((item)=>{return item.jobAddr.indexOf(this.queryParams['jobAddr'])!=-1});
      //   // console.log('filter-jobAddr',filterData);
      // }
      // 执行时间
      if(this.queryParams['jobRangeDateTime']&&this.queryParams['jobRangeDateTime'].length===2){
        console.log('jobRangeDateTime',this.queryParams['jobRangeDateTime']);
        filterData=filterData.filter((item)=>{
          let condition1=item.runStartTime>=this.queryParams['jobRangeDateTime'][0]&&item.runEndTime<=this.queryParams['jobRangeDateTime'][1],
              condition2=item.runStartTime<this.queryParams['jobRangeDateTime'][0]&&item.runEndTime>this.queryParams['jobRangeDateTime'][0]&&item.runEndTime<this.queryParams['jobRangeDateTime'][1],
              condition3=item.runStartTime>this.queryParams['jobRangeDateTime'][0]&&item.runEndTime>this.queryParams['jobRangeDateTime'][1];
          if(condition1||condition2||condition3){
            return true
          }
        });
        console.log('filterData',filterData);
      }
      return filterData;
    },
    selectDictLabel(datas, value) {
      var actions = [];
      Object.keys(datas).some((key) => {
        if (datas[key].dictValue == ('' + value)) {
          actions.push(datas[key].dictLabel);
          return true;
        }
      })
      return actions.join('');
    },
    // 任务组名字典翻译
    jobGroupFormat(row) {
      return this.selectDictLabel(this.jobGroupOptions, row.jobGroup);
    },
    // 执行状态字典翻译
    jobStatusFormat(row) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    handleQuery(){
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.queryParams.type='filter';
          this.getList()
        }
      })
    },
    handleRefresh () {
      location.reload()
    },
    handleBack () {
      // window.history.go(-1);
      this.$router.push({name:'TimingTask'});
    },
    resetQuery () {
      this.$refs['queryForm'].resetFields()
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
        jobName: undefined,
        jobAddr: undefined,
        jobGroup: undefined,
        status: undefined,
        jobRangeDateTime: undefined,
        type: undefined,
      },
      this.getList()
    },
    handleSizeChange (val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.queryParams.pageNum = val
      this.getList()
    },
  }
}
</script>