<template>
  <div>
    <w-form
      ref="formRef"
      :fields="[
        {
          name: 'datasourceName',
          label: 'datasourceName',
          type: 'select',
          options: datasourceOptionsRef,
          'onUpdate:modelValue': (value) => {
            datasourceNameChanged(value);
          },
        },
        {
          name: 'schemaName',
          label: 'schemaName',
          type: 'select',
          options: schemaNameOptionsRef,
          'onUpdate:modelValue': (value) => {
            schemaNameChanged(formRef.getFieldValue('datasourceName'), value);
          },
        },
        { name: 'tableName', label: 'tableName', type: 'select', multiple: true, options: tableNameOptionsRef },
        { name: 'fetchSize', label: 'fetchSize', type: 'number', defaultValue: 1000 },
        { name: 'sql', label: 'sql', type: 'code-mirror', colSpan: 4, rows: 5, lang: 'sql' },
      ]"
    >
    </w-form>
    <w-grid
      ref="gridRef"
      :title="$t('queryResult')"
      :config-button="false"
      selection="multiple"
      :checkbox-selection="false"
      :data-url="Environment.apiContextPath('/api/system/datasource')"
      :query-form-fields="[]"
      :toolbar-configure="{ noIcon: false }"
      :toolbar-actions="[
        'query',
        'refresh',
        {
          name: 'export',
          label: $t('export'),
          icon: '',
          click: () => {},
        },
      ]"
      :columns="[]"
    >
    </w-grid>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUpdated } from 'vue';
import { axios, Environment, EnumTools, Formater, Options, DialogManager, NotifyManager } from 'platform-core';

const formRef = ref();
const datasourceOptionsRef = ref([]);
const schemaNameOptionsRef = ref([]);
const tableNameOptionsRef = ref([]);

const loadDatasource = () => {
  axios.get(Environment.apiContextPath('/api/system/datasource?pageable=false&sortBy=name')).then((response) => {
    const data = response?.data.content;
    if (data && data.length > 0) {
      datasourceOptionsRef.value.splice(0, datasourceOptionsRef.value.length);
      for (let item of data) {
        datasourceOptionsRef.value.push({ label: item.name, value: item.name });
      }
    }
  });
};

const datasourceNameChanged = (datasourceName: string) => {
  axios.get(Environment.apiContextPath('/api/jdbc/metadata/getSchemaNames/' + datasourceName)).then((response) => {
    const data = response?.data;
    if (data && data.length > 0) {
      schemaNameOptionsRef.value.splice(0, schemaNameOptionsRef.value.length);
      for (let item of data) {
        schemaNameOptionsRef.value.push({ label: item.name, value: item.name });
      }
    }
  });
};

const schemaNameChanged = (datasourceName: string, schemaName: string) => {
  axios.get(Environment.apiContextPath('/api/jdbc/metadata/getTables/' + datasourceName + '/' + schemaName)).then((response) => {
    const data = response?.data;
    if (data && data.length > 0) {
      tableNameOptionsRef.value.splice(0, tableNameOptionsRef.value.length);
      for (let item of data) {
        tableNameOptionsRef.value.push(item.name);
      }
    }
  });
};

onMounted(() => {
  loadDatasource();
});
</script>
