<script setup lang="ts">
	import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
	import { useRouter } from 'vue-router'
	//const props = defineProps({
	//})
	//const emit = defineEmits([
	//])
	let data = reactive({})
	onMounted(() => {})
	onUnmounted(() => {})
	defineExpose({})
	const {} = toRefs(data)
	const workshopContent = ref<HTMLDivElement>()
	const router = useRouter()

	const viewType = ref(0)
	watch(
		() => router.currentRoute.value,
		() => (viewType.value = 0)
	)
	const changeViewType = (v: number) => {
		viewType.value = v
	}
</script>
<template>
	<div class="workshop" :view-type="viewType">
		<router-view @view-type="changeViewType" />
	</div>
</template>
<style lang="less" scoped>
	.workshop {
		width: 100%;
		height: 100%;
		position: relative;
		font-family: 'satoshiRegular';
		&[view-type='1'] {
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
	}
</style>