<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
    :defaultFullscreen="true"
    ok-text="关闭"
  >
    <Tabs v-model:activeKey="activeKey">
      <template v-for="item in settingData" :key="item.key">
        <TabPane :tab="item.tab" :tabKey="item.key">
          <div v-if="item.key == 'field'">
            <BasicTable @register="registerTable">
              <template #toolbar>
                <a-button type="primary" @click="genSubmit">保存配置</a-button>
              </template>
            </BasicTable>
          </div>
          <div v-else>
            <BasicForm @register="registerForm" />
          </div>
        </TabPane>
      </template>
    </Tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { columnsEdit, genFormSchema } from './data';
  import { genColumnTableId, genEdit } from '/@/api/sys/sysGenApi';
  defineEmits(['register']);
  const getTitle = ref('生成配置');
  const rowId = ref();
  const activeKey = ref('field');
  const settingData = [
    {
      key: 'field',
      tab: '字段配置',
    },
    {
      key: 'info',
      tab: '生成配置',
    },
  ];
  const { createMessage } = useMessage();
  const [registerTable, { setTableData, getDataSource }] = useTable({
    dataSource: [] as any,
    columns: columnsEdit,
    showIndexColumn: true,
    pagination: false,
    indexColumnProps: {
      fixed: 'left',
    },
    bordered: true,
  });
  const [registerForm, { resetFields, validate }] = useForm({
    labelWidth: 100,
    schemas: genFormSchema,
    baseColProps: { xs: 24, md: 12, xl: 8, xxl: 8 },
    actionColOptions: {
      span: 24,
    },
    resetButtonOptions: {
      preIcon: 'ant-design:delete-outlined',
      text: '重置',
    },
    submitButtonOptions: {
      preIcon: 'ant-design:check-outlined',
      text: '保存',
    },
    submitFunc: handleGenInfo,
  });
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
    setModalProps({ confirmLoading: false });
    await resetFields();
    getTitle.value = `生成配置  - ${data.record.tableComment}`;
    rowId.value = data.record.tableId;
    const resData = await genColumnTableId(data.record.tableId);
    setTableData(resData);
  });

  // 提交按钮事件
  async function handleSubmit() {
    createMessage.success('关闭');
    closeModal();
    setModalProps({ confirmLoading: false });
  }

  async function handleGenInfo() {
    try {
      const values = await validate();
      console.log('🚀 ~ file: EditModal.vue ~ line 92 ~ handleGenInfo ~ values', values);
      setModalProps({ confirmLoading: true });
      // !unref(isUpdate)
      //   ? await addObj([{ ...values }])
      //   : await editObj({ ...values, id: rowId.value });
      // !unref(isUpdate) ? createMessage.success('新增成功！') : createMessage.success('编辑成功！');
      // emit('success');
      closeModal();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  async function genSubmit() {
    console.log('生成');
    const tableData = getDataSource();
    const res = await genEdit(tableData);
    console.log('🚀 ~ file: EditModal.vue ~ line 80 ~ genSubmit ~ res', res);
  }
</script>
<style lang="less" scoped>
  .code-content {
    height: calc(100vh - 176px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
