<template>
  <fs-page class="fs-page-custom">
    <fs-crud ref="crudRef" v-bind="crudBinding">
    </fs-crud>
  </fs-page>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch, onBeforeMount } from 'vue'
import { useFs, FsPage } from '@fast-crud/fast-crud'
import { createCrudOptions } from './crud'
import { LocationQueryValue } from 'vue-router'

interface Props {
  adGroupId: LocationQueryValue | LocationQueryValue[]
}
const props = defineProps<Props>()
const queryParams = ref({
  adGroupId: props.adGroupId,
})
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })

onMounted(async () => {
  crudExpose.doRefresh()
})
watch(
  queryParams,
  async () => {
    crudExpose.doRefresh()
  },
  { deep: true }
)
</script>

<style scoped></style>
