<template>
  <div>
    <el-row class="content">
      <el-skeleton :loading="isLoading" animated :rows="20">
      </el-skeleton>
      <span v-html="logDetail" v-if="!isLoading"></span>
    </el-row>
    <el-row style="text-align: center;margin-top: 5px">
      <el-button type="primary" @click="scrollToTop"><i class="el-icon-caret-top"></i> 回到顶部</el-button>
      <el-button type="primary" @click="scrollToBottom"><i class="el-icon-caret-bottom"></i> 查看底部</el-button>
      <el-button type="success" @click="refreshLog"><i class="el-icon-refresh"></i> 刷新日志</el-button>
    </el-row>
  </div>
</template>
<script>
import logApi from '../../js/api/logApi'
import {Loading, Skeleton, SkeletonItem, Row, Col, Button} from "element-ui";
import Vue from "vue";

Vue.use(Loading);
Vue.use(Skeleton);
Vue.use(SkeletonItem);
Vue.use(Row);
Vue.use(Col);
Vue.use(Button);

export default {
  name: 'logdetail',
  data() {
    return {
      logDetail: '',
      isLoading: true
    }
  },
  methods: {
    scrollToTop() {
      document.getElementsByClassName("content")[0].scrollTop = 0;
    },
    scrollToBottom() {
      document.getElementsByClassName("content")[0].scrollTop = document.getElementsByClassName("content")[0].scrollHeight;
    },
    refreshLog() {
      this.isLoading = true;
      logApi.getLogDetail(this.$route.params.jobid, response => {
        if (response.data.code === 200) {
          this.isLoading = false;
          this.logDetail = response.data.content.replaceAll("\n", "<br>");
        } else {
          this.isLoading = false;
          this.logDetail = response.data.message
        }
      })
    }
  },
  mounted: function () {
    this.refreshLog();
  }
}
</script>
<style>
.content {
  color: #333;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  padding: 10px;
  width: 95%;
  position: relative;
  left: 30px;
  border-radius: 5px;
  border: 1px solid rgb(232, 232, 232);
  overflow-y: scroll;
  height: 85vh;
}
</style>