<template>
  <ns-table ref="nsTableRef" v-bind="getBindValue" v-model="dataSourceRef">
    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
      <slot :name="item" v-bind="data"> </slot>
    </template>
  </ns-table>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, watch } from 'vue';
  import { tableProps } from '/nerv-lib/component/table/props';
  import { PropTypes } from '/nerv-lib/util/type';

  export default defineComponent({
    name: 'NsEditTable',
    props: {
      ...tableProps,
      // value: PropTypes.array.def(() => []),
    },
    setup(props, { attrs, emit }) {
      const nsTableRef = ref();
      const getBindValue = computed(() => ({
        ...attrs,
        ...props,
      }));
      const dataSourceRef = ref(props.dataSource);
      watch(
        () => dataSourceRef.value,
        () => {
          // console.log('getDataSource.value', dataSourceRef.value);

          emit('update:value', dataSourceRef.value);
          emit('change', dataSourceRef.value);
        },
        {
          deep: true,
        }
      );
      return { getBindValue, nsTableRef, dataSourceRef };
    },
  });
</script>

<style lang="less" scoped></style>