<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerImportModal"
    :canFullscreen="false"
    :defaultFullscreen="false"
    :maskClosable="false"
    :width="800"
    title="数据表选择"
    @ok="dataBaseClick"
  >
    <BasicTable @register="registerImportTable" />
  </BasicModal>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :canFullscreen="false"
    :defaultFullscreen="false"
    :maskClosable="false"
    :width="800"
    title="数据对象选择"
    @ok="modalSuReClick"
  >
    <BasicTable @register="registerDataTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'stateSlot'">
          <div>
            <span class="tbBtnBox" @click="tbBtnClick(record)">同步</span>
          </div>
        </template>
      </template>
    </BasicTable>
    <template #centerFooter>
      <a-button type="success" @click="handleAddForm"> 导入表 </a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { columns, searchFormSchema, importColumns } from './dataobject.data';
  import { BasicTable, useTable } from '@/components/Table';
  import {
    getDataBaseTableList,
    getImportBaseTableList,
    importDataBaseTable,
  } from '@/api/formdesign/index';
  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
  import { message } from 'ant-design-vue';

  const emit = defineEmits(['backrows']);
  const receiceDbCode = ref();
  const [registerModal, { closeModal: closeBaseModal }] = useModalInner((data: any) => {
    receiceDbCode.value = data.dbCode;
    clearBaseSelectedRowKeys();
    reload();
  });
  const [registerImportModal, { openModal: openImportTableModal, closeModal: closeImportModal }] =
    useModal();

  const [
    registerDataTable,
    { reload, clearSelectedRowKeys: clearBaseSelectedRowKeys, getSelectRows: getBaseSelectRows },
  ] = useTable({
    title: '',
    rowKey: 'id',
    api: getDataBaseTableList,
    formConfig: {
      labelWidth: 80,
      schemas: searchFormSchema,
    },
    columns,
    size: 'small',
    rowSelection: {
      //多选框
      type: 'checkbox',
      // type: 'radio',
    },
    useSearchForm: true,
    showTableSetting: false,
    canResize: false,
    bordered: true,
    pagination: {
      pageSize: 10,
    },
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      var temp = {
        page: data.page,
        limit: data.limit,
        keyWord: data.key,
        dbCode: receiceDbCode.value,
      };
      return temp;
    },
  });
  const [
    registerImportTable,
    { clearSelectedRowKeys: clearImportSelectedRowKeys, getSelectRows: getImportSelectRows },
  ] = useTable({
    title: '',
    rowKey: 'name',
    api: getImportBaseTableList,
    formConfig: {
      labelWidth: 80,
      schemas: searchFormSchema,
    },
    columns: importColumns,
    size: 'small',
    rowSelection: {
      //多选框
      type: 'checkbox',
      // type: 'radio',
    },
    useSearchForm: true,
    showTableSetting: false,
    canResize: false,
    bordered: true,
    pagination: {
      pageSize: 10,
    },
    beforeFetch: (data) => {
      var temp = {
        code: receiceDbCode.value,
        key: data.key,
      };
      return temp;
    },
  });

  function modalSuReClick() {
    let rows = getBaseSelectRows();
    emit('backrows', rows);
    closeBaseModal();
  }

  function handleAddForm() {
    openImportTableModal(true);
    setTimeout(() => {
      clearImportSelectedRowKeys();
    }, 200);
  }
  function tbBtnClick(record: Recordable) {
    let obj = [
      {
        name: record.tableName,
        description: record.description,
      },
    ];
    let param = {
      dbCode: receiceDbCode.value,
      tableList: obj,
    };
    importDataBaseTable(param).then((res: Recordable) => {
      console.log(res);
      message.success('同步成功', 2);
      reload();
    });
  }
  function dataBaseClick() {
    let rows = getImportSelectRows();
    let param = {
      dbCode: receiceDbCode.value,
      tableList: rows,
    };
    importDataBaseTable(param).then((res: Recordable) => {
      console.log(res);
      message.success('导入成功', 2);
      closeImportModal();
      reload();
    });
  }
</script>
<style lang="less">
  .tbBtnBox {
    padding: 2px 8px;
    background: #67c23a;
    color: #fff;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
  }
</style>
