<template>
  <div class="terminal-page">
    <el-card shadow="never">
      <h3 class="page-title">📱 多终端管理</h3>
      <p class="page-desc">统一管控各终端启用状态，免费版仅开放H5，付费版可解锁全部终端</p>

      <el-row :gutter="20" style="margin-top:20px">
        <el-col v-for="t in terminals" :key="t.key" :span="6">
          <el-card :shadow="t.enabled ? 'hover' : 'never'" class="terminal-card" :class="{disabled:!t.enabled}">
            <div class="term-icon">{{ t.icon }}</div>
            <div class="term-name">{{ t.name }}</div>
            <div class="term-desc">{{ t.desc }}</div>
            <div class="term-status">
              <el-switch v-model="t.enabled" @change="saveTerminals" />
            </div>
            <el-tag v-if="!t.paid_feature" size="small" type="success" style="margin-top:6px">免费</el-tag>
            <el-tag v-else size="small" type="warning" style="margin-top:6px">付费</el-tag>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
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 terminals = ref([
  { key:'h5', icon:'📱', name:'H5移动端', desc:'手机浏览器访问的移动版商城', enabled:true, paid_feature:false },
  { key:'pc', icon:'🖥️', name:'PC电脑端', desc:'电脑浏览器访问的桌面版商城', enabled:false, paid_feature:true },
  { key:'miniapp', icon:'💬', name:'微信小程序', desc:'微信内搜索打开的小程序', enabled:false, paid_feature:true },
  { key:'app', icon:'📲', name:'APP', desc:'安卓/iOS原生应用', enabled:false, paid_feature:true },
])

async function saveTerminals() {
  try {
    const configs = terminals.value.map(t => ({ key:'terminal_'+t.key, value:t.enabled?'1':'0' }))
    await API.put('/config', { configs })
    ElMessage.success('终端配置已保存')
  } catch { ElMessage.error('保存失败') }
}

onMounted(async () => {
  try {
    const r = await API.get('/config')
    const groups = r.data.data || {}
    for (const items of Object.values(groups)) {
      for (const item of items) {
        if (item.key && item.key.startsWith('terminal_')) {
          const t = terminals.value.find(t => 'terminal_'+t.key === item.key)
          if (t) t.enabled = item.value === '1'
        }
      }
    }
  } catch {}
})
</script>

<style scoped>
.terminal-page{max-width:1000px;margin:0 auto}
.page-title{font-size:18px;font-weight:600;color:#333;margin:0}
.page-desc{font-size:13px;color:#999;margin-top:4px}
.terminal-card{text-align:center;padding:20px 10px;cursor:default;transition:all .2s}
.terminal-card.disabled{opacity:0.5}
.term-icon{font-size:48px;margin-bottom:8px}
.term-name{font-size:16px;font-weight:600;color:#333;margin-bottom:4px}
.term-desc{font-size:12px;color:#999;line-height:1.5;margin-bottom:10px;min-height:36px}
.term-status{margin-bottom:6px}
</style>
