<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>
        {{ state.taskName }} / {{ state.desc }}
      </div>
      <div class="middle-container">
        <finish-use
          height="calc(100vh - 330px)"
          :state="state.state"
          :codes="state.logArr"
          :time="state.time"></finish-use>
      </div>
      <div class="bottom-container">
        <el-button class="use-script" type="primary" @click="state.useScriptShow = true"> 重新执行 </el-button>
      </div>
    </div>

    <el-dialog
      class="dialog_box"
      title="立即执行"
      :close-on-click-modal="false"
      v-model="state.useScriptShow"
      width="1024px">
      <div>
        <div class="dialog-tips">
          <bg-icon icon="#bg-ic-s-circle-warning" style="color: #a9b1c7"></bg-icon> 向执行脚本传递额外的命令行变量。这是
          ansible-playbook 的 -e 或 --extra-vars 命令行参数。使用 YAML 或 JSON 提供键/值对，此项为非必填项。
        </div>
        <bg-inner-tabs v-model="state.useType" :data="state.useData" style="float: left"></bg-inner-tabs>
        <div style="clear: both"></div>
        <div style="height: 370px">
          <bg-code-editor v-model="state.useText"></bg-code-editor>
        </div>
      </div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="cancelUse">取消</el-button>
          <el-button type="primary" @click="confirmUse">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </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: "",
  state: -1,
  logArr: [],
  taskName: "",
  desc: "",
  useScriptShow: false,
  useType: 0,
  useText: "",
  useData: ["yaml", "json"],
});

const getLog = (id) => {
  axios.get(`/v1/api/automated_mainten/task_history/task_exec_log?id=${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");
      state.state = data.state;
      state.taskName = data.task_name;
      state.desc = data.exec_desc;

      if (data.state == 0) {
        setTimeout(() => {
          getLog(id);
        }, 2000);
      }
    }
  });
};

const cancelUse = () => {
  state.useScriptShow = false;
};

const confirmUse = () => {
  state.useScriptShow = false;
  let params = new FormData();
  params.append("task_id", route.query.task_id);
  params.append("type", state.useType + 1);
  params.append("value", state.useText);
  axios
    .post(`/v1/api/automated_mainten/task_manage/exec/script`, params)
    .then((res) => {
      if (res.data.code == 200) {
        router.push(`/auto-maintenance/task-history/list/record?id=${res.data.data}&task_id=${route.query.task_id}`);
        getLog(res.data.data);
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .finally(() => {
      state.useType = 0;
      state.useText = "";
    });
};

onBeforeMount(() => {
  getLog(route.query.id);
});
</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;
  }
}

.dialog-tips {
  height: 38px;
  line-height: 38px;
  background-color: #f7f7f9;
  border-radius: 4px;
  font-size: 14px;
  color: #404a62;
  margin-bottom: 16px;
}
</style>
