<script setup lang="ts" name="AddEdit">
import { ref, toRefs, reactive, getCurrentInstance, computed } from "vue";
import FormGroup from "./modules/formGroup.vue";
import img from "@/assets/images/assetLibrary/index.js";

const emit = defineEmits(["update:visibl", "confirm"]);

const props = defineProps<{
  visible: any;
}>();

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit("update:visible", value),
});

const step = ref("edit"); // select  edit
const selectData = reactive({
  name: "",
  type: "",
});

const listData = ref([
  {
    name: "MYSQL",
  },
  {
    name: "ORACLE",
  },
  {
    name: "POSTGRESQL",
  },
  // {
  //   name: "DB2",
  // },
  {
    name: "MSSQLSERVER",
  },
  // {
  //   name: "MARIADB",
  // },
  // {
  //   name: "GBASE8S",
  // },
  {
    name: "KINGBASE",
  },
  {
    name: "DM",
  },
  // {
  //   name: "GREENPLUM",
  // },
  // {
  //   name: "GAUSS",
  // },
  // {
  //   name: "OCEANBASE",
  // },
  // {
  //   name: "GAUSSDB",
  // },
  // {
  //   name: "ES",
  // },
  // {
  //   name: "MONGODB",
  // },
  // {
  //   name: "KAFKA",
  // },
  // {
  //   name: "Apache",
  //   type: 4,
  //   list: [
  //     {
  //       name: "HIVE",
  //     },
  //   ],
  // },
  // {
  //   name: "CLOUDERA",
  //   type: 4,
  //   list: [
  //     {
  //       name: "HIVE",
  //     },
  //   ],
  // },
  // {
  //   name: "星环",
  //   type: 4,
  //   list: [
  //     {
  //       name: "HIVE_TDH",
  //     },
  //   ],
  // },
]);

// 新增回调
const modalConfirm = () => {
  console.log("modalConfirm");
  dialogVisible.value = false;
  confirm;
  emit("confirm");
};

// 关闭弹窗前处理
const handleClose = (done) => {
  done();
};
</script>

<template>
  <el-dialog title="新增数据源" v-model="dialogVisible" :before-close="handleClose" width="1100">
    <div class="addForm" v-if="step === 'edit'">
      <FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="dialogVisible = false"
        @confirm="modalConfirm" :typeData="listData" />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.addForm {
  padding: 0 20px;
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  :deep(.el-form-item__label) {
    background: #fff;
    color: rgba(148, 148, 148, 1);
  }
  :deep(.el-input__inner),
  :deep(.el-select__wrapper) {
    height: 34px;
  }
  :deep(.el-form-item__error) {
    left: 0;
    top: 100%;
  }
}
</style>