<script setup lang="ts" name="AssetLibrary">
import { ref, getCurrentInstance, nextTick, type ComponentInternalInstance } from 'vue'
import list from './list.vue'
import add from './addEdit.vue'

const widget = {
  list,
  add
}

const page = ref('list')
const params = ref({})

const includePages = ref<string[]>(['list'])
const excludePages = ref<string[]>([])

function onChangePage(val: string, param?: any, refresh?: boolean) {
  if (refresh) {
    if (!excludePages.value.includes(val)) {
      excludePages.value.push(val)
    }
  }
  page.value = val
  params.value = param ?? {}
  if (refresh) {
    nextTick(() => {
      excludePages.value = excludePages.value.filter(item => item !== val)
    })
  }
}

</script>

<template>
  <KeepAlive :include="includePages" :exclude="excludePages">
    <component
      :is="widget[page]"
      v-bind="params"
      @page="onChangePage" />
  </KeepAlive>
</template>

