<template>
  <div class="assets-page">
    <div class="action-bar">
      <span style="font-size:16px;font-weight:600">🖼️ 素材管理</span>
      <div style="display:flex;gap:8px">
        <el-upload :action="uploadUrl" :headers="uh" :show-file-list="false" :on-success="onUploadSuccess" accept="image/*">
          <el-button type="primary"><el-icon><Plus /></el-icon>上传图片</el-button>
        </el-upload>
        <el-button @click="fetchAssets" :icon="Refresh">刷新</el-button>
      </div>
    </div>

    <div class="asset-grid" v-loading="loading">
      <div v-for="a in assets" :key="a.id" class="asset-card">
        <div class="asset-img-wrap">
          <el-image :src="a.url" fit="cover" style="width:100%;height:100%">
            <template v-slot:error><div class="img-error">📷</div></template>
          </el-image>
        </div>
        <div class="asset-info">
          <div class="asset-name" :title="a.name || '未命名'">{{ a.name || '未命名' }}</div>
          <div class="asset-actions">
            <el-button size="small" @click="copyUrl(a.url)" title="复制链接">📋</el-button>
            <el-popconfirm title="确认删除？" @confirm="deleteAsset(a.id)">
              <template #reference><el-button size="small" type="danger">🗑️</el-button></template>
            </el-popconfirm>
          </div>
        </div>
      </div>
      <div v-if="!assets.length && !loading" class="empty-state">
        <el-empty description="暂无素材，点击上传图片" :image-size="80" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Refresh } 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 uploadUrl = '/api/upload/image'
const uh = { Authorization: 'Bearer ' + localStorage.getItem('admin_token') }
const assets = ref([])
const loading = ref(false)

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

function onUploadSuccess(res) {
  if (res?.code === 0 || res?.code === 200) {
    const url = res.data?.url || res.url
    API.post('/assets', { name: '', url: url, type: 'image' })
    fetchAssets()
    ElMessage.success('上传成功')
  } else { ElMessage.error(res?.message || '上传失败') }
}

function copyUrl(url) {
  navigator.clipboard?.writeText(url).then(() => ElMessage.success('已复制链接')).catch(() => {})
}

async function deleteAsset(id) {
  try { await API.delete('/assets/' + id); fetchAssets(); ElMessage.success('已删除') } catch {}
}

onMounted(fetchAssets)
</script>

<style scoped>
.assets-page { padding: 16px; }
.action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.asset-card { border: 1px solid #eee; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .2s; }
.asset-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.asset-img-wrap { width: 100%; height: 140px; background: #f8f9fa; }
.asset-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.asset-name { font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-actions { display: flex; gap: 4px; }
.img-error { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #ccc; }
.empty-state { grid-column: 1 / -1; display: flex; justify-content: center; padding: 60px 0; }
</style>
