<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import display from './display/index.vue'
import { useDisplayStore } from '@/stores'

const route = useRoute()
const useDisplay = useDisplayStore()
const dialogBoxRef = ref(null)

const shouldShowDisplay = computed(() => route.path === '/home')
const loading = computed(() => route.query.loading ? false : (route.path === '/home'))
const Generate = computed(() => route.query.Generate || false)
const type = computed(() => route.query.type || 'Painting')
console.log(type.value)

watch(dialogBoxRef, (newRef) => {
  if (newRef) {
    useDisplay.setDialogBoxRef(newRef)
  }
}, { immediate: true })

onMounted(() => {
  if (dialogBoxRef.value) {
    useDisplay.setDialogBoxRef(dialogBoxRef.value)
  }
})
</script>

<template>
  <div class="app-container">
    <dialogBox ref="dialogBoxRef" :is-generate="shouldShowDisplay" :type="type" :generate="Generate" :loading="loading" />

    <display :if="shouldShowDisplay" :type="type" :loading="loading" />
  </div>
</template>

<style lang="less" scoped>
/* app-container 设置 */
.app-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}
</style>
