<template>
  <div class="link-page">
    <div class="action-bar">
      <span style="font-size:16px;font-weight:600">🔗 链接管理</span>
      <el-button type="primary" @click="openAdd"><el-icon><Plus /></el-icon>新增链接</el-button>
    </div>
    <el-card shadow="never">
      <el-table :data="links" border v-loading="loading" style="width:100%">
        <el-table-column label="图标" width="60" align="center"><template #default="{row}"><span style="font-size:22px">{{ row.icon || '🔗' }}</span></template></el-table-column>
        <el-table-column prop="name" label="名称" min-width="140" />
        <el-table-column prop="url" label="链接" min-width="220"><template #default="{row}"><span style="color:var(--el-color-primary);font-size:12px">{{ row.url }}</span></template></el-table-column>
        <el-table-column prop="group_name" label="分组" width="100" align="center"><template #default="{row}"><el-tag size="small">{{ row.group_name||'默认' }}</el-tag></template></el-table-column>
        <el-table-column prop="sort" label="排序" width="70" align="center" />
        <el-table-column label="状态" width="70" align="center"><template #default="{row}"><el-switch v-model="row.status" :active-value="1" :inactive-value="0" size="small" @change="saveLink(row)" /></template></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="{row}">
            <el-button size="small" @click="editLink(row)">编辑</el-button>
            <el-popconfirm title="确认删除？" @confirm="deleteLink(row.id)">
              <template #reference><el-button size="small" type="danger">删除</el-button></template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVis" :title="editId?'编辑链接':'新增链接'" width="480px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称"><el-input v-model="form.name" placeholder="如：限时秒杀" /></el-form-item>
        <el-form-item label="链接"><el-input v-model="form.url" placeholder="如：/pages/seckill/index" /></el-form-item>
        <el-form-item label="图标"><el-input v-model="form.icon" placeholder="emoji图标，如：🔥" maxlength="4" /></el-form-item>
        <el-form-item label="分组"><el-input v-model="form.group_name" placeholder="默认分组" /></el-form-item>
        <el-form-item label="排序"><el-input-number v-model="form.sort" :min="0" style="width:100%" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVis=false">取消</el-button>
        <el-button type="primary" @click="saveLinkSubmit">保存</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 links = ref([])
const loading = ref(false)
const dialogVis = ref(false)
const editId = ref(null)
const form = reactive({ name: '', url: '', icon: '', group_name: '', sort: 0 })

async function fetchLinks() {
  loading.value = true
  try { const r = await API.get('/links'); links.value = r.data.data || [] } catch {}
  finally { loading.value = false }
}

function openAdd() {
  editId.value = null; form.name = ''; form.url = ''; form.icon = ''; form.group_name = ''; form.sort = 0
  dialogVis.value = true
}

function editLink(row) {
  editId.value = row.id; form.name = row.name; form.url = row.url; form.icon = row.icon || ''
  form.group_name = row.group_name || ''; form.sort = row.sort || 0
  dialogVis.value = true
}

async function saveLinkSubmit() {
  if (!form.name || !form.url) { ElMessage.warning('名称和链接不能为空'); return }
  try {
    if (editId.value) { await API.put('/links/' + editId.value, form) }
    else { await API.post('/links', form) }
    ElMessage.success('保存成功'); dialogVis.value = false; fetchLinks()
  } catch { ElMessage.error('保存失败') }
}

async function saveLink(row) {
  try { await API.put('/links/' + row.id, { name: row.name, url: row.url, icon: row.icon, group_name: row.group_name, sort: row.sort, status: row.status }) } catch {}
}

async function deleteLink(id) {
  try { await API.delete('/links/' + id); ElMessage.success('已删除'); fetchLinks() } catch {}
}

onMounted(fetchLinks)
</script>
