<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="生成代码"
    :width="600"
    @ok="handleSuccess"
  >
    <div class="h-500px">
      <CategoryTree @select="handleSelect" />
    </div>
  </BasicModal>
  <div
    style="
      width: 100%;
      background: rgb(255 255 255 / 50%);
      height: 100%;
      position: fixed;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
      left: 0;
    "
    v-if="spinShow"
  >
    <a-spin tip="在线接口生成中，请稍等......" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import CategoryTree from '/@/components/ApiConfig/src/components/CategoryTree.vue';
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getTableInterface } from '/@/api/system/interface/index';
  const { t } = useI18n();
  const categoryId = ref();
  const tableName = ref();
  const spinShow = ref(false);
  const { createMessage } = useMessage();
  const emit = defineEmits(['success']);

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    tableName.value = data;
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
    });
  });
  const handleSuccess = async () => {
    if (!categoryId.value) {
      createMessage.error(t('请选择一个分类！'));
      return;
    }
    spinShow.value = true;
    try {
      await getTableInterface({ groupId: categoryId.value, tableName: tableName.value });
      createMessage.success(t('创建成功！请到【在线接口】中查看!'));
      emit('success');
    } catch (error) {
      createMessage.error(t('创建失败！'));
    }
    spinShow.value = false;
    closeModal();
  };
  async function handleSelect(id = '') {
    categoryId.value = id;
  }
</script>
