<template>
  <div class="admin-cms-page">
    <section class="admin-page-hero"><div><span class="admin-eyebrow">SITE MEDIA</span><h2>图片管理</h2><p>管理 LOGO、favicon/ico、页面图片、分享图和招聘图。真实上传后续接对象存储，本期支持 URL 录入。</p></div><button class="primary-button admin-primary-action" type="button" @click="openForm()">新增素材</button></section>
    <AdminTablePage eyebrow="MEDIA" title="素材列表" description="素材可按类型筛选，并在前台/SEO中引用。" :columns="columns" :rows="rows" :loading="loading" :status-options="statusOptions" @refresh="load" @edit="openForm" />
    <section class="admin-edit-panel"><div><span class="admin-eyebrow">EDITOR</span><h3>{{ form.id ? '编辑素材' : '新增素材' }}</h3></div><form @submit.prevent="save">
      <label><span>素材类型</span><select v-model="form.media_type" class="form-input"><option value="logo">LOGO</option><option value="favicon">ICO/Favicon</option><option value="page_image">页面图片</option><option value="share_image">分享图</option><option value="job_image">招聘图</option></select></label>
      <label><span>分组</span><input v-model="form.group_code" class="form-input" /></label><label><span>标题</span><input v-model="form.title" class="form-input" /></label><label><span>图片 URL</span><input v-model="form.url" class="form-input" /></label><label><span>Alt 文本</span><input v-model="form.alt" class="form-input" /></label><label><span>排序</span><input v-model.number="form.sort" class="form-input" type="number" /></label><button class="primary-button" type="submit">保存素材</button>
    </form><div v-if="form.url" class="media-preview"><img :src="form.url" :alt="form.alt" /></div></section>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import AdminTablePage from './AdminTablePage.vue'
import { getAdminSiteMedia, saveAdminSiteMedia } from '@/api/request/site'
const columns = [{ key: 'media_type', label: '类型', type: 'tag' }, { key: 'group_code', label: '分组' }, { key: 'title', label: '标题' }, { key: 'url', label: 'URL' }, { key: 'alt', label: 'Alt' }, { key: 'status', label: '状态', type: 'tag', map: { 1: '启用', 0: '禁用' } }]
const statusOptions = [{ label: 'LOGO', value: 'logo' }, { label: 'ICO', value: 'favicon' }, { label: '分享图', value: 'share_image' }]
const rows = ref([]), loading = ref(false)
const form = reactive({ id: 0, media_type: 'logo', group_code: 'brand', title: '', url: '', alt: '', status: 1, sort: 0 })
const openForm = (row = {}) => Object.assign(form, { id: 0, media_type: 'logo', group_code: 'brand', title: '', url: '', alt: '', status: 1, sort: 0 }, row)
const load = async () => { loading.value = true; rows.value = await getAdminSiteMedia().catch(() => []); loading.value = false }
const save = async () => { const saved = await saveAdminSiteMedia({ ...form }); openForm(saved); await load() }
onMounted(load)
</script>
