<template>
  <!-- <el-container class="fullheight single-padding">
    <el-container>
      <el-main> -->

  <div class="fullheight single-padding">
    <el-page-header @back="back" content="日志查询" style="margin-bottom:20px;">
    </el-page-header>
    <div style="width:100%;height:calc(100% - 44px);">
      <ht-table
        ref="executeJobTable"
        @load="loadData"
        @row-dblclick="handleDbClick"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        :default-sorter="[{direction: 'DESC', property: 'startTime'}]"
        quick-search-props="jobName,trigName"
        :show-export="false"
      >
        <template v-slot:toolbar>
          <!-- <el-button size="small" icon="icon-withdraw" @click="back"
              >返回</el-button
            > -->
          <ht-delete-button
            size="small"
            :url="executeJobDeleteUrl"
            :htTable="$refs.executeJobTable"
            >删除</ht-delete-button
          >
        </template>
        <template v-slot:search>
          <ht-table-search-panel :divide="3">
            <ht-table-search-field label="触发名称" prop="trigName" />
            <ht-table-search-field
              type="daterange"
              label="开始时间"
              prop="startTime"
              operation="BETWEEN"
            />
          </ht-table-search-panel>
        </template>
        <template>
          <ht-table-column
            type="index"
            width="50"
            align="center"
            label="序号"
          />
          <ht-table-column
            prop="jobName"
            label="执行名称"
            width="300"
            :sortable="true"
            :show-overflow-tooltip="true"
          />
          <ht-table-column
            prop="trigName"
            label="触发名称"
            sortable
            :show-overflow-tooltip="true"
          />
          <ht-table-column
            prop="startTime"
            label="开始时间"
            sortable
            width="160"
          />
          <ht-table-column
            prop="endTime"
            label="结束时间"
            sortable
            width="160"
          />
          <ht-table-column prop="content" label="日志内容">
            <template v-slot="{row}">
              <el-tooltip
                effect="dark"
                content="双击查看日志详情"
                placement="top"
                v-if="row.content.length"
              >
                <div class="oneLine">{{ row.content }}</div>
              </el-tooltip>
            </template>
          </ht-table-column>
          <ht-table-column
            prop="state"
            label="状态"
            width="80"
            :filters="[{text: '失败', value: 0}, {text: '正常', value: 1}]"
          >
            <template v-slot="{row}">
              <el-tag type="success" v-if="row.state == 1">正常</el-tag>
              <el-tag type="danger" v-if="row.state == 0">失败</el-tag>
            </template>
          </ht-table-column>
          <ht-table-column
            label="操作"
            width="145"
            :show-overflow-htoolitp="true"
          >
            <template v-slot="{row}">
              <el-button icon="el-icon-collection" @click="handleDetail(row)"
                >计算详情</el-button
              >
            </template>
          </ht-table-column>
        </template>
      </ht-table>
    </div>
    <common-dialog
      width="800px"
      title="日志详情"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="BizPointInfoForm" class="form-single-row">
        <ht-form-item label="状态">
          <el-tag type="success" v-if="log.state == 1">正常</el-tag>
          <el-tag type="danger" v-if="log.state == 0">失败</el-tag>
        </ht-form-item>
        <ht-form-item label="执行名称">
          <el-input v-model="log.jobName" readonly />
        </ht-form-item>
        <ht-form-item label="触发名称">
          <el-input v-model="log.trigName" readonly />
        </ht-form-item>
        <el-row :gutter="10">
          <el-col :span="12"
            ><ht-form-item label="开始时间">
              <el-input v-model="log.startTime" readonly /> </ht-form-item
          ></el-col>
          <el-col :span="12">
            <ht-form-item label="结束时间">
              <el-input v-model="log.endTime" readonly />
            </ht-form-item>
          </el-col>
        </el-row>

        <ht-form-item label="日志内容">
          <el-input type="textarea" v-model="log.content" autosize readonly />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="beforeCloseDialog">关闭</el-button>
      </div>
    </common-dialog>
  </div>
  <!-- </el-main>
    </el-container>
  </el-container> -->
</template>
<script>
import sys from '@/api/portal.js'
export default {
  name: 'executeJobList',
  components: {},
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      executeJob: {},
      log: {},
      startTime: '',
      dialogVisible: false
    }
  },
  computed: {
    executeJobDeleteUrl: function() {
      return window.context.portal + '/job/scheduler/v1/delJobLog'
    }
  },
  activated: function() {
    this.$refs.executeJobTable.load()
  },
  mounted() {
    // 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
    window.onresize = () => {
      this.$root.$emit('resize')
    }
  },
  methods: {
    handleDetail(row) {
      this.$router.push({
        name: 'LogDetail',
        params: {
          id: row.id,
          modelId: this.$route.params.row.modelId,
          jobName: row.jobName
        }
      })
    },
    handleDbClick(row) {
      this.log = row
      this.dialogVisible = true
    },
    beforeCloseDialog() {
      this.dialogVisible = false
    },
    back() {
      this.$router.push({
        name: 'ModelTask',
        params: {id: this.$route.params.row.modelId}
      })
    },
    loadData(param, cb) {
      let trigName = ''
      if (this.$route.params.trigName) {
        trigName = this.$route.params.trigName
      }
      sys
        .getSchedulerPageJsonbyJobName(
          window.context.portal +
            '/job/scheduler/v1/listJson?jobName=' +
            this.$route.params.row.jobName +
            '&trigName=' +
            trigName,
          param
        )
        .then(response => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
  padding: 20px;
}
/deep/ .el-page-header__content {
  font-size: 16px;
}
/deep/ .el-dialog__body {
  padding: 30px 70px 10px !important;
}
</style>
