import { App, computed, defineComponent, PropType, watch } from 'vue';
import TableAlias from 'ant-design-vue/es/table';
import 'ant-design-vue/es/table/style';
import config from './config';
// @ts-ignore
import style from './style/index.module.less';

const Table = defineComponent({
  name: 'ATable',
  props: {
    pagination: {
      type: [Object, Boolean],
      default: () => config.props.pagination
    },
    scroll: {
      type: Object,
      default: () => config.props.scroll
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  inheritAttrs: false,
  setup(props, { attrs, slots }) {
    const _columns = computed(() => {
      props.columns.forEach((item: any) => {
        // 默认 left
        item.align = item.align ?? config.props.column.align;
      });
      return props.columns as any;
    });
    return () => (
      <TableAlias
        class={style['table-extend']}
        {...config.props}
        {...attrs}
        /**
         * 由于需要对深层对象进行一次合并覆盖，所以用 props 接收的方式，将它从 attrs 列表排除
         * pagination 可被置为 false 这里做判断
         */
        // @ts-ignore
        pagination={
          props.pagination
            ? {
                ...config.props.pagination,
                ...(props.pagination as Record<string, any>)
              }
            : false
        }
        scroll={
          props.scroll
            ? {
                ...config.props.scroll,
                ...props.scroll
              }
            : undefined
        }
        columns={_columns.value}
        v-slots={slots}
      />
    );
  }
});

export default Table as typeof Table & {
  install: (app: App, ...options: any[]) => any;
};
