<template>
  <div class="lite-terminal-manage">
    <el-tabs v-model="activeTerminal" type="border-card" @tab-change="handleTabChange">

      <el-tab-pane label="📱 微信生态" name="wechat">
        <el-tabs v-model="wechatSubTab" type="card">
          <el-tab-pane label="公众号" name="official">
            <ConfigForm terminal="wechat_official" :groups="officialGroups" />
          </el-tab-pane>
          <el-tab-pane label="小程序" name="mini">
            <ConfigForm terminal="wechat_mini" :groups="miniGroups" />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="📱 移动APP" name="app">
        <ConfigForm terminal="app" :groups="appGroups" />
      </el-tab-pane>

      <el-tab-pane label="💻 PC商城" name="pc">
        <el-tabs v-model="pcSubTab" type="card">
          <el-tab-pane label="基础配置" name="config">
            <ConfigForm terminal="pc" :groups="pcGroups" />
          </el-tab-pane>
          <el-tab-pane label="🎨 页面装修" name="design" lazy>
            <DesignEditor />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="🔄 跨端同步" name="sync">
        <SyncPanel />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ConfigForm from './components/ConfigForm.vue'
import SyncPanel from './components/SyncPanel.vue'
import DesignEditor from '../design/Editor.vue'

const activeTerminal = ref('wechat')
const wechatSubTab = ref('official')
const pcSubTab = ref('config')

const officialGroups = [
  { key: 'basic', title: '基础配置', fields: ['app_id', 'app_secret', 'token', 'encoding_aes_key'] },
  { key: 'pay', title: '微信支付', fields: ['mch_id', 'api_key'] },
  { key: 'menu', title: '自定义菜单', fields: ['buttons'] }
]
const miniGroups = [
  { key: 'basic', title: '小程序基础', fields: ['app_id', 'app_secret', 'business_domain'] },
  { key: 'pay', title: '小程序支付', fields: ['mch_id', 'api_key'] }
]
const appGroups = [
  { key: 'basic', title: 'APP基础', fields: ['app_name', 'app_icon', 'splash_img', 'version'] },
  { key: 'push', title: '推送配置', fields: ['push_appid', 'push_appkey', 'share_title', 'share_img'] }
]
const pcGroups = [
  { key: 'basic', title: 'PC基础', fields: ['site_name', 'logo', 'icp_record'] },
  { key: 'theme', title: '主题色', fields: ['primary_color', 'header_bg', 'footer_bg'] }
]

const handleTabChange = () => {}
</script>
<style scoped>
.lite-terminal-manage { padding: 10px 0 }
</style>
