<script setup lang="ts">
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

import { addIndexApi } from '../api';

defineOptions({
  name: 'AddIndexModal',
});

const tableName = ref('');
const columns = ref<any[]>([]);
const reloadCallback = ref<(() => void) | null>(null);

const columnOptions = computed(() => {
  return columns.value.map((col) => ({
    label: col.comment || col.name,
    value: col.name,
  }));
});

// 索引类型选项
const indexTypeOptions = [
  { label: 'BTREE', value: 'BTREE' },
  { label: 'HASH', value: 'HASH' },
  { label: 'FULLTEXT', value: 'FULLTEXT' },
  { label: 'SPATIAL', value: 'SPATIAL' },
];

const [Form, formApi] = useVbenForm({
  wrapperClass: 'grid-cols-12',
  commonConfig: {
    formItemClass: 'col-span-12',
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      fieldName: 'name',
      label: '索引名',
      formItemClass: 'col-span-12',
      componentProps: {
        placeholder: '请输入索引名',
      },
      rules: 'required',
    },
    {
      component: 'Select',
      fieldName: 'columns',
      label: '选择字段',
      formItemClass: 'col-span-12',
      componentProps: {
        mode: 'multiple',
        placeholder: '请选择字段',
        options: columnOptions,
      },
      rules: 'required',
    },
    {
      component: 'Switch',
      fieldName: 'unique',
      label: '唯一索引',
      formItemClass: 'col-span-12',
    },
    {
      component: 'Select',
      fieldName: 'type',
      label: '索引类型',
      formItemClass: 'col-span-12',
      componentProps: {
        options: indexTypeOptions,
        placeholder: '请选择索引类型（默认BTREE）',
      },
    },
  ],
  showDefaultActions: false,
});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    const valid = await formApi.validate();
    if (valid.valid) {
      const values = await formApi.getValues();
      if (!values.columns || values.columns.length === 0) {
        message.warning('请选择字段');
        return;
      }
      modalApi.setState({ loading: true, confirmLoading: true });
      try {
        await addIndexApi({
          table_name: tableName.value,
          index_name: values.name,
          columns: values.columns,
          unique: values.unique || false,
          type: values.type || 'BTREE',
        });
        message.success('添加成功');
        reloadCallback.value?.();
        modalApi.close();
      } catch (error: any) {
        message.error(error.message || '添加失败');
      } finally {
        modalApi.setState({ loading: false, confirmLoading: false });
      }
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<{
        tableName: string;
        columns: any[];
        reload: () => void;
      }>();
      if (data) {
        tableName.value = data.tableName;
        columns.value = data.columns;
        reloadCallback.value = data.reload;
        formApi.resetFields();
      }
    }
  },
});
</script>

<template>
  <Modal title="添加索引" class="w-[500px]">
    <Form />
  </Modal>
</template>
