<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <bg-form-gap title="基本信息"></bg-form-gap>
      <bg-detail-table2 style="width: 1076px; margin-bottom: 20px" :list="state.baseInfo"> </bg-detail-table2>

      <bg-form-gap title="执行脚本"></bg-form-gap>
      <div v-if="state.docFile.length == 0" style="height: 260px; margin-bottom: 20px; width: 1076px">
        <bg-code-editor :disabled="true" v-model="state.useText"></bg-code-editor>
      </div>
      <div class="file-box" v-for="(item, index) in state.docFile">
        <bg-icon icon="#bg-ic-c-file-data"></bg-icon>&nbsp;&nbsp; {{ item.name }}
        <el-button type="primary" @click="download(item.url, item.name)"
          ><bg-icon icon="#bg-ic-to-bottom"></bg-icon>&nbsp;&nbsp;下载</el-button
        >
      </div>

      <bg-form-gap title="执行主机"></bg-form-gap>
      <bg-table
        class="pc-box input_table"
        :headers="state.pcHeaders"
        :rows="state.pcTableRows"
        :border="true"
        :isIndex="true">
        <template v-slot:account="{ row }">
          <span>
            {{ row.account }}
          </span>
        </template>
      </bg-table>

      <bg-form-gap title="任务历史"></bg-form-gap>
      <bg-table style="width: 1076px" :headers="state.historyHeaders" :rows="state.historyTableRows" :stripe="true">
        <template v-slot:state="{ row }">
          <span>
            <bg-icon
              :style="{
                color: ['#2b4695', '#429e8a', '#d75138'][row.state],
              }"
              :icon="
                ['#bg-ic-s-circle-restart', '#bg-ic-s-circle-check', '#bg-ic-s-circle-close'][row.state]
              "></bg-icon>
            {{ ["执行中", "成功", "失败"][row.state] }}
          </span>
        </template>

        <template v-slot:exec_start_time="{ row }">
          <span>{{ dateStringTransform(row.exec_start_time) }}</span>
        </template>
      </bg-table>
      <div style="width: 1076px" v-if="state.tableTotal > 10">
        <bg-pagination
          :page="state.filter.page"
          :size="state.filter.size"
          :total="state.tableTotal"
          @change-page="changePage"
          @change-size="changeSize">
        </bg-pagination>
      </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 axios from "@/request/http.js";
import { dateStringTransform, downloadFile } from "@/services/helper.js";
const router = useRouter();
const route = useRoute();
const state = reactive({
  baseInfo: [
    {
      label: "任务名称",
      value: "",
    },
    {
      label: "执行次数",
      value: "",
    },
    {
      label: "执行成功次数",
      value: "",
    },
    {
      label: "执行失败次数",
      value: "",
    },
    {
      label: "创建人",
      value: "",
    },
    {
      label: "创建时间",
      value: "",
    },
    {
      label: "任务描述",
      value: "",
    },
  ],
  useText: "",
  docFile: [],
  historyHeaders: [
    {
      label: "状态",
      prop: "state",
    },
    {
      label: "执行说明",
      prop: "exec_desc",
    },
    {
      label: "执行开始时间",
      prop: "exec_start_time",
    },
    {
      label: "执行耗时(s)",
      prop: "exec_time",
    },
    {
      label: "操作人",
      prop: "create_user",
    },
  ],
  historyTableRows: [],
  filter: {
    page: 1,
    size: 10,
  },
  tableTotal: 0,
  pcHeaders: [
    {
      label: "IP",
      prop: "ip",
    },
    {
      label: "端口",
      prop: "port",
    },
  ],
  pcTableRows: [],
});

const download = (url, name) => {
  downloadFile(url, name);
};

const changePage = (page) => {
  state.filter.page = page;
  getTableRows();
};
const changeSize = (size) => {
  state.filter.size = size;
  changePage(1);
};

const getTableRows = () => {
  axios
    .get(`/v1/api/automated_mainten/task_history/task_info_list`, {
      params: {
        task_id: route.query.id,
        page: state.filter.page,
        page_size: state.filter.size,
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        state.historyTableRows = res.data.data;
        state.tableTotal = res.data.total;
      }
    });
};

const getDetails = () => {
  axios
    .get(`/v1/api/automated_mainten/task_manage/details`, {
      params: {
        id: route.query.id,
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        let data = res.data.data;
        state.baseInfo[0].value = data.task_name;
        state.baseInfo[1].value = data.exec_cnt;
        state.baseInfo[2].value = data.success_cnt;
        state.baseInfo[3].value = data.fail_cnt;
        state.baseInfo[4].value = data.create_user;
        state.baseInfo[5].value = data.create_time.split("+")[0].replace("T", " ").replace("Z", " ");
        state.baseInfo[6].value = data.task_desc;

        state.useText = data.yaml_desc;
        state.docFile = data.yaml_url ? JSON.parse(data.yaml_url) : [];

        state.pcTableRows = data.host_list || [];
      }
    });
};

onBeforeMount(() => {
  getDetails();
  getTableRows();
});
</script>

<style lang="scss" scoped>
.main_container {
  padding: 24px 32px;
  display: block;
}
.use {
  width: 6px;
  height: 6px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #48ad97;
}

.file-box {
  width: 1076px;
  height: 48px;
  line-height: 48px;
  background-color: #fafafa;
  border-radius: 4px;
  font-size: 14px;
  color: #202531;
  padding: 0 12px;
  margin-bottom: 20px;
  .bg-icon {
    font-size: 24px;
    vertical-align: middle;
  }
  .el-button {
    float: right;
    margin-top: 6px;
    .bg-icon {
      font-size: 10px;
    }
  }
}

.vue-ace-editor {
  margin-top: 0;
}

.pc-box {
  width: 1076px;
  margin-bottom: 20px;
}

.input_table {
  :deep() {
    .el-table__header {
      th {
        background-color: #f5f6f9;
        border-color: #dadee7;
        border-top: 1px solid #dadee7 !important;
        &:first-child {
          border-left: 1px solid #dadee7;
        }
        &:last-child {
          border-right: 1px solid #dadee7;
        }
      }
    }
    .el-scrollbar {
      border-radius: 0px;
    }

    .el-table__border-left-patch {
      width: 0;
    }

    .el-table__inner-wrapper .el-table__row td:nth-of-type(1) {
      border-left: 1px solid #dadee7;
    }
  }
}
</style>
