<!-- 编辑器主入口 -->
<script setup lang="ts">
import ToolbarLeft from '@/editor/toolbar/ToolbarLeft.vue'
import ToolbarRight from '@/editor/toolbar/ToolbarRight.vue'
import MaterialPanel from '@/editor/panels/material/index.vue'
import LayerPanel from '@/editor/panels/layer/index.vue'
import CanvasRoot from '@/editor/canvas/index.vue'
import PropertyPanel from '@/editor/panels/property/index.vue'
import { useEditorStore } from '@/stores/editor'
import { storeToRefs } from 'pinia'

defineOptions({
  name: 'ScreenEditor',
})
const editorStore = useEditorStore()
const { panelVisible } = storeToRefs(editorStore)

const materialWidth = computed(() => (panelVisible.value.material ? '260px' : '0'))
const propertyWidth = computed(() => (panelVisible.value.property ? '160px' : '0'))
const layerWidth = computed(() => (panelVisible.value.layer ? '260px' : '0'))
</script>

<template>
  <div class="h-screen select-none">
    <header class="flex items-center justify-between h-14 border-b border-white/20 px-5">
      <div class="w-75"><ToolbarLeft /></div>
      <div class="">工作区</div>
      <div class="w-75"><ToolbarRight /></div>
    </header>
    <main class="h-[calc(100%-56px)] flex">
      <!-- 物料 -->
      <MaterialPanel
        class="w-[256px] overflow-hidden transition-all"
        :style="{ width: materialWidth }"
      >
      </MaterialPanel>
      <!-- 图层 -->
      <LayerPanel
        class="w-38 border-l border-r border-white/20 overflow-hidden transition-all"
        :style="{ width: propertyWidth }"
      >
        图层
      </LayerPanel>
      <!-- 画布 -->
      <CanvasRoot class="canvas flex-1">画布</CanvasRoot>
      <!-- 属性 -->
      <PropertyPanel
        class="w-[256px] border-l border-white/20 overflow-hidden transition-all"
        :style="{ width: layerWidth }"
      >
        属性
      </PropertyPanel>
    </main>
  </div>
</template>

<style scoped></style>
