<script setup lang="ts">
import { defineAsyncComponent, computed, watch } from 'vue'
import { useVueFileStore } from '../../stores/vueFileStore'
import InteractiveWrapper from './InteractiveWrapper.vue'
import config from './index.json'

const vueFileStore = useVueFileStore()

// 扫描所有views目录下的Vue文件
const viewModules = import.meta.glob('../../../views/**/*.vue')

// 当前选中的Vue页面组件
const selectedPageComponent = computed(() => {
  if (!vueFileStore.selectedFilePath) {
    return null
  }
  
  // 动态加载选中的组件
  const loader = viewModules[vueFileStore.selectedFilePath]
  if (loader) {
    return defineAsyncComponent(loader as any)
  }
  
  return null
})

// 监听选中文件变化
watch(() => vueFileStore.selectedFilePath, (newPath) => {
  console.log('设计中心：选中的文件路径变化', newPath)
})
</script>

<template>
  <div class="design-center">
    <div class="center-header">
      <span class="title">{{ config.name }}</span>
      <span class="file-info" v-if="vueFileStore.selectedFilePath">
        📄 {{ vueFileStore.selectedFileName }}
      </span>
    </div>
    <div class="center-body">
      <!-- 动态渲染选中的Vue页面（使用InteractiveWrapper注入交互事件） -->
      <div v-if="selectedPageComponent" class="page-preview">
        <InteractiveWrapper :component="selectedPageComponent" />
      </div>
      
      <!-- 空状态 -->
      <div v-else class="empty-tip">
        <div class="empty-icon">🎨</div>
        <div>暂无内容</div>
        <div class="empty-hint">
          点击“页面管理”选择Vue页面开始设计
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.design-center {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1e1e1e;
}

.center-header {
  padding: 8px 12px;
  background: #2d2d2d;
  border-bottom: 1px solid #3c3c3c;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
}

.file-info {
  color: #4fc3f7;
  font-size: 12px;
  font-weight: 500;
}

.center-body {
  flex: 1;
  padding: 12px;
  overflow: auto;
}

.page-preview {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 8px;
  overflow: auto;
}

.empty-tip {
  color: #666666;
  text-align: center;
  padding: 40px 20px;
  font-size: 13px;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-hint {
  font-size: 11px;
  margin-top: 8px;
  color: #555555;
}
</style>
