<template>
  <BasicModal
    centered
    v-bind="$attrs"
    @register="registerProcessModal"
    :title="modalTitle"
    width="950px"
    @ok="handleOk"
    destroyOnClose
    @visible-change="visibleChange"
  >
    <Row>
      <BasicTable
        :columns="columns"
        v-bind="config"
        :useSearchForm="false"
        :formConfig="formConfig"
        :api="tablePageList"
        :searchInfo="searchInfo"
        :rowSelection="rowSelection"
      />
    </Row>
  </BasicModal>
</template>
<script lang="ts">
  import { defineAsyncComponent, defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner, useSelectBiz, selectProps, BasicTable } from '@jdlinker/ui';
  import { tablePageList } from './role.api';
  import { useAttrs } from '@jdlinker/func';
  import { Row } from 'ant-design-vue';
  export default defineComponent({
    name: 'RoleDataModal',
    components: {
      Row,
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: defineAsyncComponent(() => BasicTable)
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: '关联数据'
      },
      tableColumns: {
        type: Array
      },
      searchColumns: {
        type: Array
      }
    },
    emits: ['register', 'getSelectResult'],
    setup(props: any, { emit }) {
      const tableName = ref();
      //注册弹框
      const [registerProcessModal, { closeModal }] = useModalInner(async (data) => {
        tableName.value = data.tableName;
        columns.value = data.tableColumns;
      });
      const attrs = useAttrs();
      //表格配置
      const config = {
        bordered: true,
        size: 'small',
        showIndexColumn: false,
        rowKey: unref(props).rowKey,
        maxHeight: 200,
        beforeFetch(params) {
          params.tableName = tableName.value;
        }
      };
      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{ rowSelection, indexColumnProps, visibleChange, getSelectResult }] = useSelectBiz(tablePageList, getBindValue);
      const searchInfo = ref(props.params);
      //查询form
      const formConfig = ref({
        baseColProps: {
          md: 12,
          lg: 12
        },
        labelWidth: 80,
        actionColOptions: {
          style: {
            textAlign: 'right'
          }
        },
        schemas: props.searchColumns
      });
      const columns = ref([]);
      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
        });
      }

      return {
        config,
        handleOk,
        searchInfo,
        registerProcessModal,
        indexColumnProps,
        visibleChange,
        tablePageList,
        formConfig,
        getBindValue,
        columns,
        rowSelection
      };
    }
  });
</script>
<style lang="less" scoped>
  :deep(.jeecg-basic-table-form-container) {
    padding: 0;
  }
  :deep(.ant-form) {
    padding: 0;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table.ant-table-bordered .ant-table-title) {
    min-height: 0;
  }
  :deep(.jeecg-basic-table-form-container .ant-form) {
    padding: 4px 4px 10px 4px;
    margin-bottom: 0;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper) {
    padding: 0;
  }
</style>
