<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="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-position="top" label-width="120px">
      <el-form-item label="主机分组名称" prop="name" style="width: 1100px">
        <el-select v-model="state.ruleForm.name" style="width: 1020px" clearable placeholder="请选择">
          <el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span class="add-pc">去创建</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const state = reactive({
  useType: 0,
  useData: ["文本执行", "文件执行"],
  useText: "",
  doc_file: [],
  ruleForm: {
    name: "",
  },
  rules: {
    name: [{ required: true, message: "请选择主机分组", trigger: "change" }],
  },
  options: [
    {
      label: "12",
      value: "qwqw",
    },
  ],
});
</script>

<style lang="scss" scoped>
.add-pc {
  font-size: 14px;
  color: #3759be;
  margin-left: 10px;
  cursor: pointer;
}

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