<template>
   <div class="drawer_info">
    <div class="title_pannel">
      <div class="drawer_title">日志列表</div>
      <el-form
        ref="dataForm"
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-row :gutter="10">
          <el-col :span="8" style="padding: 0">
             <el-form-item
              prop="jobId"
              label=""
              class="labelItem"
              style="display: flex; margin-bottom: 0"
            >
             <el-input
              v-model="dataForm.jobId"
              :placeholder="$t('schedule.jobId')"
              clearable
            />
             </el-form-item>
          </el-col>
          <el-col :span="4" style="padding: 0">
            <el-button type="primary" @click="query()">{{
              $t("query")
            }}</el-button>
            <el-button plain @click="resetForm('dataForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="drawer_list" style="padding:0 20px">
    <el-table
        v-loading="dataListLoading"
        :data="dataList"
        stripe
        :header-cell-style="{ background: '#e6e7ea', color: '#0C1935' }"
        style="width: 100%"
        @sort-change="dataListSortChangeHandle"
    >
      <el-table-column
        prop="jobId"
        :label="$t('schedule.jobId')"
        header-align="center"
        align="center"
        width="80"
      />
      <el-table-column
        prop="beanName"
        :label="$t('schedule.beanName')"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="params"
        :label="$t('schedule.params')"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="status"
        :label="$t('schedule.status')"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status === 1"
            size="small"
          >
            {{ $t('schedule.statusLog1') }}
          </el-tag>
          <el-tag
            v-else
            type="danger"
            size="small"
            style="cursor: pointer;"
            @click.native="showErrorInfo(scope.row.id)"
          >
            {{ $t('schedule.statusLog0') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="times"
        :label="$t('schedule.times')"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="createDate"
        :label="$t('schedule.createDate')"
        header-align="center"
        align="center"
        width="180"
      />
    </el-table>
    <el-pagination
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle"
    />
  </div>
   </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/scheduleLog/page',
        getDataListIsPage: true
      },
      dataForm: {
        jobId: ''
      }
    }
  },
  methods: {
     //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    init() {
      this.getDataList()
    },
    // 失败信息
    showErrorInfo(id) {
      this.$http
        .get(`/sys/scheduleLog/${id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$alert(res.data.error)
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.title_pannel {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d8d8d8;
  margin: 0 0 30px 0;
  .el-form {
    flex: 1;
    .el-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-left: 20px;
    }
  }
  .drawer_title {
    margin: 0;
    border-bottom: unset;
  }
}
</style>
