<template>
  <el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="60%" @open="init">
    <!-- 搜索 -->
    <div class="head-container" style="margin-top: 20px;">
      <el-input
        v-model="query.jobGroupName"
        clearable
        size="small"
        placeholder="输入任务组名称搜索"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <el-input
        v-model="query.jobName"
        clearable
        size="small"
        placeholder="输入任务名称搜索"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <date-range-picker v-model="customs.timeRange" type="datetimerange" class="datetime-item" />
      <el-select
        v-model="query.logStatus"
        placeholder="日志状态"
        clearable
        size="small"
        class="filter-item"
        style="width: 110px"
        @change="crud.toQuery"
      >
        <el-option
          v-for="item in enabledTypeOptions"
          :key="item.key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <rrOperation />
    </div>
    <!--表格渲染-->
    <el-table v-loading="crud.loading" :data="crud.data" style="width: 100%; margin-top: -10px">
      <el-table-column
        :show-overflow-tooltip="true"
        prop="jobGroupName"
        width="100px"
        label="任务组名称"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="jobName"
        width="200px"
        label="任务名称"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="remark"
        label="备注"
        align="center"
      />
      <el-table-column align="center" prop="logStatus" width="100px" label="执行状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.logStatus ? 'success' : 'danger'">{{
            scope.row.logStatus ? '成功' : '失败'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        width="160px"
        prop="baseCreateTime"
        label="创建日期"
        align="center"
      />
    </el-table>
    <!--分页组件-->
    <pagination />
  </el-dialog>
</template>

<script>
import crudJobLog from '@/api/report/jobLog'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
export default {
  name: 'ReportJobLog',
  mixins: [presenter(), header(), crud()],
  components: { ...crudComps, DateRangePicker },
  cruds() {
    return CRUD({
      title: '报表任务日志',
      url: 'report/jobLog/getList',
      listOrder: [],
      crudMethod: { ...crudJobLog },
    })
  },
  data() {
    return {
      title: '报表任务日志',
      dialog: false,
      errorInfo: '',
      errorDialog: false,
      enabledTypeOptions: [
        { value: 1, label: '成功' },
        { value: 0, label: '失败' },
      ],
    }
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
  },
  methods: {
    // 异常详情
    init() {
      this.crud.resetQuery()
    },
    // 异常详情
    info(errorInfo) {
      this.errorInfo = errorInfo
      this.errorDialog = true
    },
  },
}
</script>

<style scoped>
.java.hljs {
  color: #444;
  background: #ffffff !important;
}
::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>
