<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)" time="00:00:11"></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";
const router = useRouter();
const route = useRoute();
const state = reactive({ data: 1 });
const { data } = toRefs(state);
</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>
