<script setup lang="ts" name="FormGroup">
import { el } from "element-plus/es/locale";
import { ref, toRefs, reactive, watch } from "vue";
const emit = defineEmits(['cancel','confirm'])

const props = withDefaults(
  defineProps<{
    id?: string;
    page?: string;
    title?: string;
  }>(),
  {
    id: "",
    page: ""
  }
);

const readOnly = ref(true);
const modalData = reactive({
  show: false,
  text: "",
});

const data = reactive({
  form: {
    name: "",
  },
  rules: {},
});

const { form, rules } = toRefs(data);

watch(
  () => props.id,
  (newVal) => {
    readOnly.value = props.id ? true : false;
  },
  { deep: true, immediate: true }
);

// 确定
const onConfirm = () => {
  modalData.show = true;
  modalData.text = props.page === 'add' ? '新增成功' : '修改成功';
};

// 成功回调
const modalConfirm = () => {
  modalData.show = false;
  emit('confirm')
  if (props.page === 'edit') {
    readOnly.value = true
  }
};

// 取消
const onCancel = () => {
  if (props.page === 'add') {
    emit('cancel')
  } else {
    readOnly.value = true
  }
}

// 测试
const test = () => {
  console.log('测试')
}

// 检测
const detection = () => {
  console.log('检测')
}
</script>

<template>
  <div class="dataList">
    <el-form ref="formRef" :model="form" label-width="150px" :disabled="readOnly">
      <el-form-item label="数据源名称" required>
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="连接类型" v-if="props.title === 'ORACLE'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name" v-if="readOnly"></el-input>
          <el-select v-model="form.name" v-if="!readOnly">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="服务名" required v-if="props.title === 'ORACLE'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="IP地址" required>
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="端口号" required>
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="实例名" required v-if="props.title === 'GBASE8S'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="数据库名" required v-if="props.title !== 'ES' && props.title !== 'KAFKA' && props.title !== 'ORACLE' && props.title !== 'HIVE_TDH'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="HIVE 数据库名" required v-if="props.title === 'HIVE_TDH'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="Driver Classpath" v-if="props.title === 'HIVE'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="用户名" required v-if="props.title !== 'KAFKA'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="密码" required v-if="props.title !== 'KAFKA'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name" show-password></el-input>
        </div>
      </el-form-item>
      <el-form-item label="数据库版本" :required="props.title !== 'KAFKA'">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name" v-if="readOnly"></el-input>
          <el-select v-model="form.name" v-if="!readOnly">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="字符编码" required>
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;display: flex;">
          <el-input v-model="form.name" v-if="readOnly"></el-input>
          <el-select v-model="form.name" v-if="!readOnly">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="primary" @click="detection" v-if="!readOnly">检测</el-button>
        </div>
      </el-form-item>
      <el-form-item label="授权用户">
        <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
          <el-input v-model="form.name" v-if="readOnly"></el-input>
          <el-select v-model="form.name" v-if="!readOnly">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-form>
    <div class="buttonBox mt20">
      <el-button v-if="!readOnly" type="primary" style="width: 150px;" @click="onConfirm">确认</el-button>
      <el-button v-if="!readOnly" type="primary" style="width: 150px;" @click="test">测试</el-button>
      <el-button v-if="!readOnly" type="info" style="width: 150px;" @click="onCancel">取消</el-button>
      <el-button v-if="readOnly" type="primary" style="width: 150px;" @click="readOnly = false">编辑</el-button>
    </div>
    <Modal v-model="modalData.show" icon="success" :cancel="false" :text="modalData.text" @confirm="modalConfirm">
    </Modal>
  </div>
</template>

<style lang="scss" scoped>
.buttonBox {
  display: flex;
  justify-content: center;
}
.dataList {
  :deep(.el-form-item__label) {
    background: #f0f0f0;
  }
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-select__wrapper){
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
  }
}
</style>

