<template>
  <div>
    <bg-form-gap title="执行脚本"></bg-form-gap>
    <bg-inner-tabs v-model="state.useType" :data="state.useData"></bg-inner-tabs>
    <div style="height: 493px; margin-bottom: 23px" v-show="state.useType == 0">
      <bg-code-editor v-model="state.useText"></bg-code-editor>
    </div>
    <div v-show="state.useType == 1" class="file-box">
      <p>上传文件</p>
      <bg-upload v-model="state.doc_file" custom-tips :file-types="['yaml', 'yml']" :file-max-size="20" :limit="1">
        <span>将文件拖到此处，或 点击上传</span><br />
        <span>支持上传一个后缀为.yaml或.yml的文件</span><br />
        <span>文件大小不超过20M</span>
      </bg-upload>
    </div>
    <bg-form-gap title="执行主机"></bg-form-gap>
    <el-form ref="pcFormRef" :model="state.ruleForm" :rules="state.rules" label-position="top" label-width="120px">
      <el-form-item label="主机分组名称" prop="pcName" style="width: 1100px">
        <el-select v-model="state.ruleForm.pcName" style="width: 1020px" clearable placeholder="请选择">
          <el-option v-for="item in state.options" :key="item.id" :label="item.host_name" :value="item.id" />
        </el-select>
        <span class="add-pc can_click_text" @click="gotoPage(`/auto-maintenance/host-manage/add`)">去创建</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const pcFormRef = ref(null);

const state = reactive({
  useType: 0,
  useData: ["文本执行", "文件执行"],
  useText: props.data?.useText || "",
  doc_file: props.data?.doc_file || [],
  ruleForm: {
    pcName: props.data?.pcName || "",
  },
  rules: {
    pcName: [{ required: true, message: "请选择主机分组", trigger: "change" }],
  },
  options: [],
});

const gotoPage = (url) => {
  router.push(url);
};

const save = () => {
  return new Promise((resolve, reject) => {
    pcFormRef.value.validate((valid, fields) => {
      if (valid) {
        props.data.pcName = state.ruleForm.pcName;
        if (state.useType == 0) {
          props.data.useText = state.useText;
          props.data.doc_file = [];
        } else {
          props.data.useText = "";
          props.data.doc_file = state.doc_file;
        }
        resolve();
      } else {
        reject();
        console.log("error submit!", fields);
      }
    });
  });
};

const clear = () => {
  pcFormRef.value.resetFields();
  state.useText = "";
  state.doc_file = [];
  state.useType = 0;
};

const getPC = () => {
  axios.get(`/v1/api/automated_mainten/host_manage/list`).then((res) => {
    if (res.data.code == 200) {
      state.options = res.data.data || [];
    }
  });
};

onMounted(() => {
  if (
    (props.data && props.data.useText == "" && props.data.doc_file.length == 0) ||
    (!props.data.useText && !props.data.doc_file)
  ) {
    state.useType = 0;
  } else if (props.data && props.data.useText == "") {
    state.useType = 1;
  } else if (props.data && props.data.doc_file.length == 0) {
    state.useType = 0;
  }
  getPC();
});

defineExpose({
  save,
  clear,
});
</script>

<style lang="scss" scoped>
.add-pc {
  font-size: 14px;
  margin-left: 10px;
}

.file-box {
  margin-top: 20px;
  margin-bottom: 20px;
  p {
    color: #202531;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
</style>
