<template>
  <a-modal :open="open" @ok="handleOk">
    <a-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item label="所属项目" name="project_id">
        <a-select
          placeholder="请选择所属项目"
          v-model:value="formData.project_id"
          :options="projectSelect"
          @change="toGetDbTable"
        />
      </a-form-item>
      <a-form-item label="数据来源" name="modular_name">
        <a-input
          placeholder="请输入数据来源"
          v-model:value="formData.modular_name"
        />
      </a-form-item>
      <a-form-item label="展示状态" name="is_show">
        <a-switch
          v-model:checked="formData.is_show"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item label="数据源类型" name="original_type">
        <a-radio-group v-model:value="formData.original_type">
          <a-radio :value="1">自定义</a-radio>
          <a-radio :value="2">指定表</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="formData.original_type === 1"
        label="sql数据源"
        name="original_sql"
      >
        <a-input
          placeholder="请输入sql数据源"
          v-model:value="formData.original_sql"
        />
      </a-form-item>
      <a-form-item
        v-if="formData.original_type === 2"
        label="数据表"
        name="table"
      >
        <a-select
          placeholder="请先选择项目再选择数据表"
          v-model:value="formData.table"
          :options="tableTypes"
        />
      </a-form-item>
      <a-form-item label="数据库特殊配置" name="is_other_database">
        <a-switch
          v-model:checked="formData.is_other_database"
          :checkedValue="1"
          :unCheckedValue="0"
          @change="isOtherChange"
        />
      </a-form-item>
      <template v-if="formData.is_other_database">
        <a-form-item label="数据库驱动" name="drive_type">
          <a-radio-group v-model:value="formData.drive_type">
            <a-radio :value="1">MySQL</a-radio>
            <a-radio :value="2">Click House</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="数据库地址" name="database_address">
          <a-input
            placeholder="请输入数据库地址"
            v-model:value="formData.database_address"
          />
        </a-form-item>
        <a-form-item label="数据库端口" name="database_port">
          <a-input-number
            placeholder="请输入数据库端口"
            v-model:value="formData.database_port"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="数据库名称" name="database_name">
          <a-input
            placeholder="请输入数据库名称"
            v-model:value="formData.database_name"
          />
        </a-form-item>
        <a-form-item label="数据库用户" name="database_username">
          <a-input
            placeholder="请输入数据库用户"
            v-model:value="formData.database_username"
          />
        </a-form-item>
        <a-form-item label="数据库密码" name="database_password">
          <a-space>
            <a-input-password
              placeholder="请输入数据库密码"
              v-model:value="formData.database_password"
            />
          </a-space>
        </a-form-item>
      </template>
      
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch } from "vue";
import { getDbTableSelect } from "@/views/config-manage/module-cfg/service";

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "add",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  projectSelect: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["ok"]);
const formRules = ref({
  modular_name: [
    { required: true, message: "请输入数据来源", trigger: "submit" },
  ],
  original_type: [{ required: true, message: "请选择", trigger: "submit" }],
  original_sql: [{ required: true, message: "请输入", trigger: "submit" }],
  table: [{ required: true, message: "请选择", trigger: "submit" }],
});

const tableTypes = ref([]);
const formRef = ref();
const formData = ref({
  project_id: undefined,
  modular_name: undefined,
  is_show: 0,
  original_type: 1, // 1 - 自定义，2 - 指定表
  original_sql: undefined,
  table: undefined,
  is_other_database: 0,
  drive_type: 1,
  database_address: undefined,
  database_port: undefined,
  database_name: undefined,
  database_username: undefined,
  database_password: undefined,
});

watch(
  () => props.data,
  (newVal) => {
    if (props.type === "add") {
      resetFormData();
    } else {
      formData.value = {
        modular_id: newVal.modular_id,
        project_id: newVal.project_id,
        modular_name: newVal.modular_name,
        is_show: newVal.is_show,
        original_type: newVal.original_type,
        original_sql: newVal.original_sql,
        table: newVal.table,
        drive_type: newVal.drive_type,
        is_other_database: newVal.is_other_database,
        database_address: newVal.database_address,
        database_port: newVal.database_port,
        database_name: newVal.database_name,
        database_username: newVal.database_username,
        database_password: newVal.database_password,
      };
    }
  }
);

const toGetDbTable = () => {
  getDbTableSelect({ projectId: formData.value.project_id }).then((res) => {
    tableTypes.value = res.data;
  });
};

const isOtherChange = (val) => {
  formData.value.drive_type = val ? 1 : undefined
  formData.value.database_address = undefined
  formData.value.database_port = undefined
  formData.value.database_name = undefined
  formData.value.database_username = undefined
  formData.value.database_password = undefined
}

const resetFormData = () => {
  formData.value = {
    project_id: undefined,
    modular_name: undefined,
    is_show: 0,
    original_type: 1, // 1 - 自定义，2 - 指定表
    original_sql: undefined,
    table: undefined,
    is_other_database: 0,
    drive_type: undefined,
    database_address: undefined,
    database_port: undefined,
    database_name: undefined,
    database_username: undefined,
    database_password: undefined,
  };
};

const handleOk = () => {
  formRef.value.validate().then(() => {
    emit("ok", formData.value);
  });
};
</script>
