<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <div class="top-container">
        <el-button class="back" type="default" @click="router.go(-1)"> 返回 </el-button>
        执行ping命令 / 执行说明1
      </div>
      <div class="middle-container">
        <finish-use :state="true" height="calc(100vh - 330px)" :codes="state.logArr" :time="state.time"></finish-use>
      </div>
      <div class="bottom-container">
        <el-button class="use-script" type="primary" @click="router.go(-1)"> 重新执行 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import finishUse from "@/page/main/auto-maintenance/task-manage/add/finish-use.vue";
import axios from "@/request/http.js";
import { secondeToHour } from "@/services/helper.js";

const router = useRouter();
const route = useRoute();
const state = reactive({
  time: "",
  logArr: [],
});

const getLog = () => {
  axios.get(`/v1/api/automated_mainten/task_history/task_exec_log?id=${route.query.id}`).then((res) => {
    if (res.data.code == 200) {
      let data = res.data.data;
      state.time = secondeToHour(data.exec_time);
      state.logArr = data.exec_log.split("\n");
    }
  });
};

onBeforeMount(() => {
  getLog();
});
</script>

<style lang="scss" scoped>
.top-container {
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 14px;
  color: #202531;
  position: relative;
  .back {
    position: absolute;
    top: 16px;
    left: 16px;
  }
}
.middle-container {
  flex: 1;
  padding: 30px 30px 10px 30px;
  border-top: 1px solid #e6e9ef;
  border-bottom: 1px solid #e6e9ef;
}
.bottom-container {
  width: 100%;
  height: 50px;
  .use-script {
    margin: 16px;
    float: right;
  }
}
</style>
