<template>
  <div class="design-page">
    <el-card shadow="never" class="tabs-card">
      <div class="d-tabs">
        <div v-for="t in tabs" :key="t.key" class="d-tab" :class="{active:aT===t.key}" @click="switchTab(t.key)"><span>{{ t.icon }}</span>{{ t.label }}</div>
      </div>
    </el-card>

    <div v-show="aT==='templates'">
      <div class="action-bar"><el-button type="primary" @click="openAdd">+ 新建模板</el-button></div>
      <el-row :gutter="16">
        <el-col v-for="t in tmplList" :key="t.id" :span="8">
          <el-card :shadow="t.is_default?'always':'hover'" class="tmpl-card" :class="{default:t.is_default}">
            <div class="tmpl-icon">{{ {h5:'📱',pc:'🖥️',miniapp:'💬'}[t.terminal]||'📄' }}</div>
            <div class="tmpl-name">{{ t.name }}</div>
            <div class="tmpl-terminal">{{ {h5:'移动端',pc:'电脑端',miniapp:'小程序'}[t.terminal]||t.terminal }}</div>
            <div class="tmpl-actions">
              <el-button size="small" @click="editTemplate(t)">编辑</el-button>
              <el-button size="small" type="primary" @click="useTemplate(t)" :disabled="t.is_default">{{ t.is_default?'默认':'设为默认' }}</el-button>
              <el-button size="small" @click="duplicateTemplate(t)">复制</el-button>
              <el-popconfirm title="删除？" @confirm="delTemplate(t.id)"><template #reference><el-button size="small" type="danger">删除</el-button></template></el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-show="aT==='editor'">
      <iframe :src="editorUrl" style="width:100%;height:calc(100vh-200px);border:none;border-radius:8px"></iframe>
    </div>

    <el-dialog v-model="addVis" title="新建模板" width="400px">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="模板名"><el-input v-model="addForm.name" maxlength="30" /></el-form-item>
        <el-form-item label="终端"><el-select v-model="addForm.terminal" style="width:100%">
          <el-option label="H5移动端" value="h5" /><el-option label="PC电脑端" value="pc" /><el-option label="微信小程序" value="miniapp" />
        </el-select></el-form-item>
      </el-form>
      <template #footer><el-button @click="addVis=false">取消</el-button><el-button type="primary" @click="saveTemplate">创建</el-button></template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
const API = axios.create({baseURL:'/api/admin'})
API.interceptors.request.use(c=>{c.headers.Authorization='Bearer '+localStorage.getItem('admin_token');return c})

const tabs = [{key:'templates',icon:'📦',label:'模板管理'},{key:'editor',icon:'🎨',label:'编辑器'}]
const aT=ref('templates')
const tmplList=ref([])
const addVis=ref(false)
const addForm=reactive({name:'',terminal:'h5'})
const editorUrl=ref('/design/Editor.html')

function switchTab(k){aT.value=k}
async function fetchTemplates(){try{const r=await API.get('/design/templates');tmplList.value=r.data.data||[]}catch{}}
function openAdd(){addForm.name='';addForm.terminal='h5';addVis.value=true}
async function saveTemplate(){try{await API.post('/design/templates',addForm);ElMessage.success('创建成功');addVis.value=false;fetchTemplates()}catch{}}
async function useTemplate(t){try{await API.put('/design/templates/'+t.id,{...t,is_default:1});ElMessage.success('已设为默认');fetchTemplates()}catch{}}
async function duplicateTemplate(t){try{await API.post('/design/templates/'+t.id+'/duplicate');ElMessage.success('已复制');fetchTemplates()}catch{}}
async function delTemplate(id){try{await API.delete('/design/templates/'+id);ElMessage.success('已删除');fetchTemplates()}catch{}}
function editTemplate(t){editorUrl.value='/design/Editor.html?id='+t.id;aT.value='editor'}
onMounted(()=>{fetchTemplates()})
</script>
<style scoped>
.design-page{max-width:1200px}
.tabs-card{margin-bottom:16px}
.d-tabs{display:flex;gap:4px}
.d-tab{display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}
.d-tab:hover{background:#f5f7fa}.d-tab.active{background:#ecf5ff;color:#409eff;font-weight:600}
.action-bar{margin-bottom:16px}
.tmpl-card{text-align:center;padding:20px;margin-bottom:16px;transition:all .2s}
.tmpl-card.default{border:2px solid #409eff}
.tmpl-icon{font-size:48px;margin-bottom:8px}
.tmpl-name{font-size:16px;font-weight:600;color:#333}
.tmpl-terminal{font-size:12px;color:#999;margin:4px 0 12px}
.tmpl-actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
</style>
