<template>
  <div class="dropdown">
    <ns-form
      ref="nsTableRef"
      class="ns-table-form"
      v-bind="formConfig"
      :model="formModel"
      @finish="formFinish" />
  </div>
  <div class="table">
    <ns-table v-bind="tableConfig" :params="params" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, unref, ref, reactive } from 'vue';

  export default defineComponent({
    name: 'NsFilterTable',
    props: {
      tableConfig: Object,
      formConfig: Object,
    },
    setup(props) {
      const nsTableRef = ref();
      const formConfig = props['formConfig'];
      let params = reactive(props['tableConfig']['params']);

      unref(formConfig)['schemas'].forEach((item) => {
        if (item['immediate']) {
          item['componentProps'][item['immediateName']] = function () {
            unref(nsTableRef).triggerSubmit();
          };
        }
      });

      const formModel = reactive<Record<string, any>>({});
      const formFinish = function (data: object) {
        params = Object.assign(params, data);
      };
      return {
        nsTableRef,
        formModel,
        params,
        formFinish,
      };
    },
  });
</script>

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