<template>
  <div class="my-business-detail">
    <div class="breadcrumb">
      <bg-breadcrumb />
    </div>
    <div class="content bg-scroll">
      <div class="go-back">
        <goBack />
      </div>
      <gap-title :hasLine="true" title="基本信息"></gap-title>
      <div class="info">
        <Info :labelData="labelData" :valueData="basicInfo"> </Info>
      </div>
      <gap-title :hasLine="true" title="主机列表"></gap-title>
      <div class="info">
        <div class="host-lists">
          <bg-table border ref="hostTable" :headers="hostHeaders" :rows="hostRows" height="100%" :isIndex="true">
          </bg-table>
        </div>
        <div style="margin-top: 10px" v-if="fileUrl">
          <a download :href="fileUrl">{{ downloadFileFormat(fileUrl) }}</a>
        </div>
      </div>
      <gap-title :hasLine="true" title="任务列表"></gap-title>
      <div class="info">
        <div class="task-lists">
          <div class="table">
            <bg-table ref="taskTable" :headers="taskHeaders" :rows="taskRows" :isIndex="true" :stripe="true">
            </bg-table>
          </div>
          <!-- <bg-pagination
            :page="filter.page"
            :size="filter.size"
            :total="tableTotal"
            @change-page="changePage"
            @change-size="changeSize">
          </bg-pagination> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import goBack from "@/components/go-back/index.vue";
import { downloadFileFormat } from "@/services/helper.js";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { $api } = proxy;
const router = useRouter();
const route = useRoute();

const labelData = [
  [
    {
      label: "主机分组名称",
      prop: "host_name",
    },
  ],
  [
    {
      label: "任务数量",
      prop: "task_cnt",
    },
    {
      label: "IP数量",
      prop: "ip_cnt",
    },
  ],
  [
    {
      label: "创建人",
      prop: "create_user",
    },
    {
      label: "创建时间",
      prop: "create_time",
    },
  ],
];
const basicInfo = ref({
  host_name: "",
  task_cnt: "",
  ip_cnt: "",
  create_user: "",
  create_time: "",
});
const hostHeaders = [
  {
    prop: "ip",
    label: "IP",
  },
  {
    prop: "port",
    label: "端口",
  },
];
const hostRows = ref([,]);
const taskHeaders = [
  {
    prop: "task_name",
    label: "任务名称",
  },
  {
    prop: "exec_cnt",
    label: "执行次数",
  },
  {
    prop: "task_desc",
    label: "描述",
  },
];
const taskRows = ref([]);
const filter = ref({
  page: 1,
  size: 10,
});
const tableTotal = ref(0);
const changePage = (page) => {
  filter.value.page = page;
  getTableRows();
}; // 改变页码

const changeSize = (size) => {
  filter.value.size = size;
  changePage(1);
}; // 改变每页条数

const getTableRows = () => {};

const fileUrl = ref("");
const downloadFile = (url) => {
  if (url) {
    const a = document.createElement("a"); // 创建a标签
    a.setAttribute("download", ""); // download属性
    a.setAttribute("href", url); // href链接
    a.click(); // 自执行点击事件
  }
};

const getHostManageDetail = () => {
  $api.autoMaintenance.getHostManageDetail(route.query.id).then((res) => {
    if (res.data.code == 200) {
      let data = res.data.data;
      // 基本信息
      basicInfo.value.host_name = data.host_name;
      basicInfo.value.task_cnt = data.task_cnt;
      basicInfo.value.ip_cnt = data.ip_cnt;
      basicInfo.value.create_user = data.create_user;
      basicInfo.value.create_time = data.create_time.split("+")[0].replace("T", " ").replace("Z", " ");
      // 主机列表
      hostRows.value = data.host_list || [];
      fileUrl.value = data.host_file_url;
      // 任务列表
      taskRows.value = data.task_list || [];
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
onMounted(() => {
  getHostManageDetail();
});
</script>

<style lang="scss" scoped>
.my-business-detail {
  width: 100%;
  height: 100%;
  padding: 0 24px 16px;
  .breadcrumb {
    width: 100%;
    height: 46px;
  }
  .content {
    width: 100%;
    height: calc(100% - 46px);
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    padding: 24px;
    .go-back {
      margin-bottom: 24px;
    }
    :deep(.gap-title) {
      margin-bottom: 16px;
    }
    .info,
    .feedback-info {
      max-width: 1072px;
      width: 100%;
      padding: 0 8px 0;
      &:not(:last-child) {
        padding-bottom: 24px;
      }
      .status {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
        $statusObj: (
          finish: #48ad97,
          close: #9e9e9e,
          info: #3759be,
        );
        @each $status, $color in $statusObj {
          &-#{$status} {
            background-color: $color;
          }
        }
      }
      .status-body {
        display: flex;
        align-items: center;
      }
      .host-lists {
        margin-top: 16px;
      }
      .task-lists {
        margin-top: 16px;
        overflow: hidden;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
