<script setup lang="ts">
	import { ref, reactive, onMounted, watch, computed } from 'vue'
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import CreationList from '@/views/Workshop/creation/creation-list.vue'
	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'

	import { useRouter } from 'vue-router'
	const router = useRouter()
	const styleUrl = computed(() => router.currentRoute.value.query.styleUrl);
	const emit = defineEmits(['view-type'])
	watch(
		() => router.currentRoute.value,
		() => emit('view-type', 1)
	)
	
	onMounted(() => {
		emit('view-type', 1)
	})
</script>

<template>
	<header-title style-type="2" />
	<creation-list v-show="!styleUrl" />
	<creation-details v-if="styleUrl" />
	<footer-navigation is-placeholder />
</template>

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