<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <div class="content_main bg-scroll">
        <el-form
          label-position="top"
          label-width="100px"
          ref="ruleFormRef"
          :model="formData"
          :rules="formRules"
          style="max-width: 70%">
          <el-form-item label="主机分组名称" prop="host_name">
            <el-input
              :disabled="route.query.id"
              clearable
              v-model="formData.host_name"
              maxlength="20"
              placeholder="请输入主机分组名称"
              show-word-limit />
          </el-form-item>
        </el-form>
        <bg-inner-tabs v-model="currentTab" :data="tabOptions"></bg-inner-tabs>
        <listTable v-show="currentTab == 0" ref="listTableRef" :initTableData="initTableData"></listTable>
        <div class="upload_container" v-show="currentTab == 1">
          <div class="upload_top">
            <div class="required-item">上传文件</div>
            <div>
              模版下载：<span class="file" @click="downloadFile(`/主机IP模板.xlsx`)"
                >IP主机模板<bg-icon icon="#bg-ic-to-bottom"></bg-icon
              ></span>
            </div>
          </div>
          <bg-upload
            :httpRequest="httpRequest"
            style="width: 360px"
            v-model="attachment"
            customTips
            :limit="1"
            :fileTypes="['xlsx', 'xls']">
            <span>将文件拖到此处，或 点击上传</span><br />
            <span>支持上传一个后缀为.xlsx或.xls的文件，文件大小不超过20M，最多解析1000个IP</span>
          </bg-upload>
        </div>
      </div>
      <div class="content_foot apaas_button">
        <el-button type="default" @click="back"> 取消 </el-button>
        <el-button type="primary" @click="save"> 保存 </el-button>
      </div>
    </div>
    <checkStatusDialog v-model="checkStatusVisible" :enter="1" :checkStatusData="checkStatusData"></checkStatusDialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import listTable from "../components/list-table.vue";
import checkStatusDialog from "../components/check-status-dialog.vue";
import { downloadFileFormat } from "@/services/helper.js";

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

const formData = reactive({
  host_name: "",
});
const formRules = reactive({
  host_name: [{ required: true, message: "主机分组名称不能为空", trigger: "blur" }],
});

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

const currentTab = ref(0);
const tabOptions = ref(["列表维护", "文件上传"]);

const ruleFormRef = ref();
const listTableRef = ref();
const checkStatusVisible = ref(false);
const checkStatusData = ref({});
const save = () => {
  ruleFormRef.value.validate((valid) => {
    if (currentTab.value == 0) {
      let { flag, list } = listTableRef.value.getData();
      if (flag && valid) {
        checkStatusData.value = {
          detection_type: 2,
          host_manage_list: list,
          host_name: formData.host_name,
        };
        checkStatusVisible.value = true;
      }
    } else {
      if (attachment.value.length == 0) {
        return ElMessage.error("请上传文件");
      }
      checkStatusData.value = {
        detection_type: 3,
        file_name: attachment.value[0].url.split("/").at(-1),
        host_file_url: attachment.value[0].url,
        host_name: formData.host_name,
      };
      if (valid) {
        checkStatusVisible.value = true;
      }
    }
  });
};
const back = () => {
  router.back();
};

const initTableData = ref([]);
const getHostManageDetail = () => {
  $api.autoMaintenance.getHostManageDetail(route.query.id).then((res) => {
    if (res.data.code == 200) {
      let data = res.data.data;
      formData.host_name = data.host_name;
      initTableData.value = data.host_list || [];
      if (data.host_file_url) {
        currentTab.value = 1;
        attachment.value = [
          {
            name: downloadFileFormat(data.host_file_url),
            url: data.host_file_url,
          },
        ];
      }
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

const httpRequest = (file) => {
  let formData = new FormData();
  formData.append("upload_file", file.file);
  $api.autoMaintenance.uploadHostManageFile(formData).then((res) => {
    if (res.data.code == 200) {
      let data = res.data.data;
      file.onSuccess({
        data,
      });
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

onMounted(() => {
  if (route.query.id) {
    getHostManageDetail();
  }
});
</script>

<style lang="scss" scoped>
.main_container {
  .content_main {
    padding: 30px;
    height: 0;
    flex: auto;
    overflow: auto;
  }
  .content_foot {
    border-top: 1px solid #e6e9ef;
    padding: 16px 16px 0 16px;
    display: flex;
    justify-content: flex-end;
  }
  .upload_container {
    width: 360px;
    .upload_top {
      margin: 16px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #404a62;
      .file {
        color: #3759be;
        cursor: pointer;
      }
    }
  }
  .required-item::before {
    content: "*";
    color: #d75138;
    margin-right: 4px;
  }
}
</style>
