<template>
  <div class="lite-design-editor">
    <header class="editor-header">
      <h3>🎨 页面装修 - {{pageName}}</h3>
      <div class="actions">
        <el-button @click="saveDraft" :loading="saving">💾 保存草稿</el-button>
        <el-button type="primary" @click="handlePublish" :loading="publishing">📢 发布上线</el-button>
      </div>
    </header>

    <div class="editor-body">
      <!-- 左侧：组件库 -->
      <aside class="widget-panel">
        <h4>🧩 组件库</h4>
        <div class="widget-item" v-for="w in widgetList" :key="w.type" @click="addWidget(w)">
          <span class="w-icon">{{w.icon}}</span>
          <span class="w-name">{{w.name}}</span>
        </div>
      </aside>

      <!-- 中间：手机预览 -->
      <main class="canvas-panel">
        <div class="phone-mockup">
          <div class="phone-status">9:41</div>
          <div class="phone-screen">
            <div v-for="(comp,idx) in pageConfig.components" :key="comp.uid"
              class="canvas-component" :class="{active:currentUid===comp.uid}"
              @click="selectComponent(comp)">
              <div class="comp-placeholder">
                <div class="comp-type">{{comp.type}}</div>
                <div class="comp-desc">{{getWidgetDesc(comp.type)}}</div>
              </div>
              <div class="del-btn" @click.stop="removeComponent(idx)">✕</div>
            </div>
            <div v-if="!pageConfig.components.length" class="empty-hint">
              <div style="font-size:40px;margin-bottom:8px">🎨</div>
              <div>点击左侧组件添加到页面</div>
            </div>
          </div>
          <div class="phone-home">▬</div>
        </div>
      </main>

      <!-- 右侧：属性配置 -->
      <aside class="config-panel" v-if="currentComp">
        <h4>⚙️ {{currentComp.type}} 设置</h4>
        <el-form label-width="70px" size="small">
          <el-form-item label="上边距"><el-slider v-model="currentComp.styles.marginTop" :min="0" :max="50" /></el-form-item>
          <el-form-item label="下边距"><el-slider v-model="currentComp.styles.marginBottom" :min="0" :max="50" /></el-form-item>

          <template v-if="currentComp.type==='BannerSlider'">
            <el-form-item label="图片"><el-input v-model="currentComp.data.image1" placeholder="图片URL1" /></el-form-item>
            <el-form-item><el-input v-model="currentComp.data.image2" placeholder="图片URL2" /></el-form-item>
            <el-form-item><el-input v-model="currentComp.data.image3" placeholder="图片URL3" /></el-form-item>
          </template>

          <template v-if="currentComp.type==='GoodsRecommend'">
            <el-form-item label="标题"><el-input v-model="currentComp.data.title" placeholder="推荐商品" /></el-form-item>
            <el-form-item label="显示数量">
              <el-select v-model="currentComp.data.limit">
                <el-option label="4个" :value="4" /><el-option label="6个" :value="6" /><el-option label="8个" :value="8" />
              </el-select>
            </el-form-item>
          </template>

          <template v-if="currentComp.type==='NoticeBar'">
            <el-form-item label="通知内容"><el-input v-model="currentComp.data.text" placeholder="输入通知内容" /></el-form-item>
          </template>

          <template v-if="currentComp.type==='RichText'">
            <el-form-item label="内容"><el-input type="textarea" v-model="currentComp.data.html" :rows="4" /></el-form-item>
          </template>
        </el-form>
      </aside>
      <aside class="config-panel empty" v-else>
        <p>← 点击画布中的组件进行配置</p>
      </aside>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../../utils/request'

const pageName = ref('商城首页')
const saving = ref(false)
const publishing = ref(false)
const currentUid = ref('')
const pageConfig = reactive({ global: { styles: {} }, components: [] })

const widgetList = [
  { type: 'BannerSlider', name: '图片轮播', icon: '🖼️' },
  { type: 'GoodsRecommend', name: '商品推荐', icon: '🏷️' },
  { type: 'NoticeBar', name: '通知栏', icon: '🔔' },
  { type: 'RichText', name: '富文本', icon: '📝' },
  { type: 'CategoryNav', name: '分类导航', icon: '📂' },
  { type: 'AdImage', name: '广告图', icon: '🖼️' }
]

const currentComp = computed(() => pageConfig.components.find(c => c.uid === currentUid.value))

function getWidgetDesc(type) {
  return { BannerSlider: '轮播展示图片', GoodsRecommend: '推荐商品列表', NoticeBar: '滚动通知', RichText: '自定义内容', CategoryNav: '分类入口', AdImage: '单图广告' }[type] || ''
}

function addWidget(w) {
  pageConfig.components.push({
    uid: Date.now().toString(36), type: w.type,
    styles: { marginTop: 10, marginBottom: 10 },
    data: { title: w.name, limit: 6, text: '', html: '', image1: '', image2: '', image3: '' }
  })
  ElMessage.success('已添加: ' + w.name)
}

function selectComponent(comp) { currentUid.value = comp.uid }
function removeComponent(idx) { pageConfig.components.splice(idx, 1); currentUid.value = '' }

async function saveDraft() {
  saving.value = true
  await request.post('/design/save', { page_id: 1, config: { ...pageConfig } })
  ElMessage.success('草稿已保存')
  saving.value = false
}

async function handlePublish() {
  await ElMessageBox.confirm('发布后前端将立即生效，确认发布？')
  publishing.value = true
  await request.post('/design/publish', { page_id: 1, remark: '装修更新' })
  ElMessage.success('已发布上线！')
  publishing.value = false
}

onMounted(async () => {
  try {
    const res = await request.get('/design/draft')
    if (res) Object.assign(pageConfig, res)
  } catch(e) {}
})
</script>

<style scoped>
.lite-design-editor{display:flex;flex-direction:column;height:calc(100vh - 140px);background:#f0f2f5;border-radius:8px;overflow:hidden}
.editor-header{height:56px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid #e8eaed;flex-shrink:0}
.editor-body{flex:1;display:flex;overflow:hidden}
.widget-panel{width:200px;background:#fff;padding:12px;overflow-y:auto;border-right:1px solid #eee;flex-shrink:0}
.widget-item{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:6px;border-radius:8px;cursor:pointer;transition:all .15s;border:1px solid #eee}
.widget-item:hover{background:#f5f3ff;border-color:#6366f1}.widget-item .w-icon{font-size:20px}
.canvas-panel{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:20px;background:#e8eaed;overflow-y:auto}
.phone-mockup{width:375px;background:#fff;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.1);overflow:hidden;flex-shrink:0}
.phone-status{padding:12px 16px 4px;font-size:12px;font-weight:600;color:#333}
.phone-screen{min-height:500px;padding:8px;background:#f8f8f8}
.canvas-component{position:relative;margin:6px 0;border:2px dashed transparent;border-radius:8px;transition:all .15s;cursor:pointer}
.canvas-component.active{border-color:#6366f1;background:#f5f3ff}
.comp-placeholder{padding:20px;text-align:center;background:#fff;border-radius:6px}
.comp-type{font-size:14px;font-weight:600;color:#333}
.comp-desc{font-size:12px;color:#999;margin-top:4px}
.del-btn{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#ef4444;color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:12px;cursor:pointer;z-index:10}
.canvas-component:hover .del-btn{display:flex}
.empty-hint{padding:80px 0;text-align:center;color:#999}
.phone-home{text-align:center;padding:8px;color:#ccc;font-size:20px}
.config-panel{width:300px;background:#fff;padding:16px;overflow-y:auto;border-left:1px solid #eee;flex-shrink:0}
.config-panel.empty{display:flex;align-items:center;justify-content:center;color:#999;font-size:13px}
</style>
