<!--
 * @Author: 田鑫
 * @Date: 2023-02-16 14:40:38
 * @LastEditors: 田鑫
 * @LastEditTime: 2023-02-16 16:37:52
 * @Description: table公用封装
-->

<template>
  <div>
    <a-table
      :loading="loading"
      :size="size"
      :data="tableData"
      :bordered="{ cell: borderCell }"
      :pagination="setPagination"
      page-position="br"
      v-bind="propsRes"
      v-on="propsEvent"
    >
      <template #columns>
        <slot></slot>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import type { PaginationProps, TableData } from '@arco-design/web-vue';
import type { PropType } from 'vue-demi';
import Components from 'unplugin-vue-components/vite';

type Size = 'mini' | 'small' | 'medium' | 'large';

const props = defineProps({
  size: {
    type: String as PropType<Size>,
    default: 'large',
  },
  tableData: {
    type: Array as PropType<TableData[]>,
    default: () => [],
  },
  borderCell: {
    type: Boolean,
    default: true,
  },
  pagination: {
    type: Object as PropType<PaginationProps>,
    default: () => {},
  },
});
const loading = ref(false);

const setPagination = computed(() => {
  const defaultPagination: PaginationProps = {
    showPageSize: true,
    showTotal: true,
    showMore: true,
    size: 'large',
  };
  return Object.assign(defaultPagination, props.pagination);
});

watchEffect(() => {
  if (props.tableData.length === 0) {
    loading.value = true;
  } else {
    loading.value = false;
  }
});
</script>
<style lang="less" scoped></style>
