<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>内容管理</span>
          <el-button type="primary" size="small" @click="handleAdd">新增文章</el-button>
        </div>
      </template>

      <!-- 状态 Tabs -->
      <el-tabs v-model="queryParams.status" class="status-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="全部" name="undefined" />
        <el-tab-pane :name="'0'">
          <template #label>
            <span>草稿 <el-badge :value="statusCounts[0]" :max="999" class="tab-badge" /></span>
          </template>
        </el-tab-pane>
        <el-tab-pane :name="'1'">
          <template #label>
            <span>已发布 <el-badge :value="statusCounts[1]" :max="999" class="tab-badge" /></span>
          </template>
        </el-tab-pane>
        <el-tab-pane :name="'2'">
          <template #label>
            <span>已撤回 <el-badge :value="statusCounts[2]" :max="999" class="tab-badge" /></span>
          </template>
        </el-tab-pane>
        <el-tab-pane :name="'3'">
          <template #label>
            <span>已删除 <el-badge :value="statusCounts[3]" :max="999" class="tab-badge" type="info" /></span>
          </template>
        </el-tab-pane>
      </el-tabs>

      <!-- 搜索栏 -->
      <el-form :model="queryParams" :inline="true" size="small">
        <el-form-item label="标题">
          <el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery" style="width:240px" />
        </el-form-item>
        <el-form-item label="分类">
          <el-tree-select
            v-model="queryParams.cateId"
            :data="cateTreeData"
            :props="{ label: 'cateName', value: 'cateId', children: 'children' }"
            placeholder="请选择分类"
            clearable
            check-strictly
            style="width:200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 批量操作栏 -->
      <transition name="el-fade-in">
        <div v-if="selectedRows.length > 0" class="batch-toolbar">
          <span class="batch-info">已选择 <strong>{{ selectedRows.length }}</strong> 项</span>
          <el-button size="small" type="success" @click="handleBatchPublish">
            <el-icon><Check /></el-icon> 批量发布
          </el-button>
          <el-button size="small" type="warning" @click="handleBatchTop">
            <el-icon><Top /></el-icon> 批量置顶
          </el-button>
          <el-button size="small" type="info" @click="handleBatchRecall">
            <el-icon><RefreshLeft /></el-icon> 批量撤回
          </el-button>
          <el-button size="small" type="danger" @click="handleBatchDelete">
            <el-icon><Delete /></el-icon> 批量删除
          </el-button>
          <el-button v-if="queryParams.status === '3'" size="small" type="danger" @click="handleBatchDrop">
            <el-icon><DeleteFilled /></el-icon> 批量清空
          </el-button>
          <el-button size="small" type="primary" @click="handleBatchCopy">
            <el-icon><CopyDocument /></el-icon> 批量复制
          </el-button>
          <el-button size="small" type="primary" @click="handleBatchMove">
            <el-icon><FolderOpened /></el-icon> 批量移动
          </el-button>
          <el-button size="small" text @click="clearSelection">取消选择</el-button>
        </div>
      </transition>

      <!-- 文章列表 -->
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        :default-sort="defaultSort"
        ref="tableRef"
      >
        <el-table-column type="selection" width="45" />
        <el-table-column prop="aid" label="ID" width="60" />
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
          <template #default="s">
            <span :style="{ color: s.row.titleColor || '' }">{{ s.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subtitle" label="副标题" min-width="160" show-overflow-tooltip />
        <el-table-column prop="cateId" label="分类" width="100" sortable="custom">
          <template #default="s">{{ getCateName(s.row.cateId) }}</template>
        </el-table-column>
        <el-table-column prop="pubUser" label="作者" width="100" />
        <el-table-column prop="pubPlatform" label="发布平台" width="90">
          <template #default="s">
            <el-tag size="small" :type="s.row.pubPlatform === 'weixin' ? 'success' : 'info'">
              {{ s.row.pubPlatform === 'weixin' ? '微信' : 'PC' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="80">
          <template #default="s">
            <el-tag size="small" :type="s.row.type === 'link' ? 'warning' : ''">
              {{ s.row.type === 'link' ? '链接' : '图文' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubDate" label="发布日期" width="140" sortable="custom" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="s">
            <el-tag :type="statusTagType(s.row.status)" size="small">{{ statusLabel(s.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="viewCount" label="点击量" width="80" sortable="custom" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="s">
            <el-button type="primary" link icon="View" @click="handleDetail(s.row)">查看</el-button>
            <el-button type="primary" link icon="Edit" @click="handleEdit(s.row)">编辑</el-button>
            <el-button type="danger" link icon="Delete" @click="handleDelete(s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 新增/编辑文章对话框 -->
    <el-dialog :title="title" v-model="open" width="900px" append-to-body top="3vh" destroy-on-close>
      <el-form :model="form" :rules="formRules" ref="formRef" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入文章标题" maxlength="120" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标题颜色">
              <el-color-picker v-model="form.titleColor" show-alpha :predefine="titleColorPresets" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="副标题">
          <el-input v-model="form.subtitle" placeholder="请输入副标题" maxlength="200" show-word-limit />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="文章分类" prop="cateId">
              <el-tree-select
                v-model="form.cateId"
                :data="cateTreeData"
                :props="{ label: 'cateName', value: 'cateId', children: 'children' }"
                placeholder="请选择分类"
                clearable
                check-strictly
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="文章类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" style="width:100%">
                <el-option label="图文" value="article" />
                <el-option label="链接" value="link" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布平台" prop="pubPlatform">
              <el-select v-model="form.pubPlatform" placeholder="请选择" style="width:100%">
                <el-option label="PC" value="pc" />
                <el-option label="微信" value="weixin" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" placeholder="多个关键字用逗号分隔" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者">
              <el-input v-model="form.pubUser" placeholder="请输入作者" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="缩略图">
              <el-upload
                ref="thumbUploadRef"
                class="thumbnail-uploader"
                action="/slgc/cms-file"
                :show-file-list="false"
                :on-success="handleThumbSuccess"
                :before-upload="beforeThumbUpload"
                accept="image/*"
              >
                <img v-if="form.thumbnail" :src="form.thumbnail" class="thumb-preview" />
                <el-icon v-else class="thumb-icon"><Plus /></el-icon>
              </el-upload>
              <div v-if="form.thumbnail" class="thumb-actions">
                <el-button type="danger" text size="small" @click="removeThumbnail">删除</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="摘要">
              <el-input v-model="form.summary" type="textarea" :rows="4" placeholder="请输入摘要" maxlength="500" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="正文内容">
          <Editor v-model="form.content" :height="320" />
        </el-form-item>

        <el-form-item label="附件">
          <el-upload
            ref="uploadRef"
            action="/slgc/cms-file"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            multiple
          >
            <el-button type="primary" plain>选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">支持 PDF / Word / Excel / 图片格式</div>
            </template>
          </el-upload>
          <div v-if="fileList.length > 0" class="mt-8">
            <el-tag v-for="(f, i) in fileList" :key="i" closable @close="removeFile(i)" style="margin-right:6px;margin-bottom:4px">
              {{ f.name || f.fileName }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </template>
    </el-dialog>

    <!-- 查看文章详情对话框 -->
    <el-dialog v-model="detailVisible" title="文章详情" width="750px" append-to-body>
      <div v-loading="detailLoading" style="padding:0 16px">
        <template v-if="detailData">
          <h2 :style="{ color: detailData.titleColor || '#303133' }" style="text-align:center;margin-bottom:4px">
            {{ detailData.title }}
          </h2>
          <p v-if="detailData.subtitle" style="text-align:center;color:#606266;font-size:14px;margin-bottom:12px">
            {{ detailData.subtitle }}
          </p>
          <div style="text-align:center;color:#999;font-size:13px;margin-bottom:16px">
            <span>作者：{{ detailData.pubUser }}</span> &nbsp;|&nbsp;
            <span>分类：{{ getCateName(detailData.cateId) }}</span> &nbsp;|&nbsp;
            <span>发布日期：{{ detailData.pubDate }}</span> &nbsp;|&nbsp;
            <span>点击量：{{ detailData.viewCount || 0 }}</span>
          </div>
          <div style="text-align:center;margin-bottom:16px">
            <el-tag size="small" :type="statusTagType(detailData.status)" style="margin-right:8px">
              {{ statusLabel(detailData.status) }}
            </el-tag>
            <el-tag size="small" :type="detailData.pubPlatform === 'weixin' ? 'success' : 'info'" style="margin-right:8px">
              {{ detailData.pubPlatform === 'weixin' ? '微信' : 'PC' }}
            </el-tag>
            <el-tag size="small" :type="detailData.type === 'link' ? 'warning' : ''">
              {{ detailData.type === 'link' ? '链接' : '图文' }}
            </el-tag>
          </div>
          <div v-if="detailData.keyword" style="margin-bottom:12px;color:#909399;font-size:13px">
            关键字：{{ detailData.keyword }}
          </div>
          <div v-if="detailData.thumbnail" style="text-align:center;margin-bottom:16px">
            <img :src="detailData.thumbnail" style="max-width:100%;max-height:200px;border-radius:4px" />
          </div>
          <el-divider />
          <div style="font-size:15px;line-height:1.8;white-space:pre-line" v-html="detailData.content"></div>
          <div v-if="detailFiles.length > 0" class="mt-16">
            <el-divider />
            <div class="card-header" style="margin-bottom:8px">附件列表</div>
            <div v-for="(f, i) in detailFiles" :key="i" style="padding:4px 0">
              <el-link :underline="false" type="primary">
                <el-icon><Paperclip /></el-icon> {{ f.fileName || f.name }}
              </el-link>
            </div>
          </div>
        </template>
      </div>
      <template #footer>
        <el-button @click="detailVisible = false">关 闭</el-button>
      </template>
    </el-dialog>
    <!-- 批量移动/复制 - 目标分类选择 -->
    <el-dialog v-model="moveDialog.visible" :title="moveDialog.title" width="400px" append-to-body>
      <el-tree
        ref="moveTreeRef"
        :data="cateTreeData"
        :props="{ label: 'cateName', children: 'children' }"
        node-key="cateId"
        highlight-current
        :default-expand-all="false"
        @node-click="handleMoveNodeClick"
      />
      <template #footer>
        <el-button @click="moveDialog.visible = false">取消</el-button>
        <el-button type="primary" :disabled="!moveDialog.targetCateId" @click="confirmMoveOrCopy">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CmsArticle">
import { Paperclip, Check, Top, RefreshLeft, Delete, DeleteFilled, Plus, CopyDocument, FolderOpened } from '@element-plus/icons-vue'
import { getArticleList, getArticleDetail, addArticle, updateArticle, delArticle, getCateTree, batchAddArticle, batchUpdateArticle } from '@/api/slgc/cms/index'
import Editor from '@/components/Editor/index'

const { proxy } = getCurrentInstance()
const loading = ref(true)
const detailLoading = ref(false)
const total = ref(0)
const open = ref(false)
const title = ref('')
const detailVisible = ref(false)
const list = ref([])
const fileList = ref([])
const detailData = ref(null)
const detailFiles = ref([])
const selectedRows = ref([])
const cateTreeData = ref([])
const tableRef = ref(null)
const formRef = ref(null)
const thumbUploadRef = ref(null)
const uploadRef = ref(null)
const moveTreeRef = ref(null)
const moveDialog = reactive({
  visible: false,
  title: '选择目标分类',
  targetCateId: null,
  targetCateName: '',
  mode: '' // 'copy' | 'move'
})

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  title: undefined,
  status: undefined,
  cateId: undefined,
  orderByColumn: undefined,
  isAsc: undefined
})
const defaultSort = ref({ prop: 'pubDate', order: 'descending' })

const statusCounts = reactive({ 0: 0, 1: 0, 2: 0, 3: 0 })

const form = ref({})

const formRules = {
  title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
  cateId: [{ required: true, message: '请选择文章分类', trigger: 'change' }],
  type: [{ required: true, message: '请选择文章类型', trigger: 'change' }],
  pubPlatform: [{ required: true, message: '请选择发布平台', trigger: 'change' }]
}

const titleColorPresets = ['#ff4500', '#ff6600', '#e6a23c', '#303133', '#000000', '#e91e63', '#2196f3', '#4caf50']

/** 状态工具函数 */
function statusLabel(status) {
  const map = { '0': '草稿', '1': '已发布', '2': '已撤回', '3': '已删除' }
  return map[status] || '未知'
}
function statusTagType(status) {
  const map = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger' }
  return map[status] || 'info'
}

/** 获取分类名称 */
function getCateName(cateId) {
  if (!cateId) return '-'
  const flatMap = {}
  function walk(nodes) {
    if (!nodes) return
    for (const n of nodes) {
      flatMap[n.cateId] = n.cateName
      if (n.children) walk(n.children)
    }
  }
  walk(cateTreeData.value)
  return flatMap[cateId] || cateId
}

/** 获取分类树 */
function getCates() {
  getCateTree().then(res => {
    cateTreeData.value = res.data || []
  })
}

/** 加载各状态数量 */
function loadStatusCounts() {
  getArticleList({ pageNum: 1, pageSize: 1 }).then(res => {
    // 首次加载获取总数，各状态数量需要后端支持或单独请求
    // 这里简单用 status 参数分别请求获取各状态数量
    const statuses = ['0', '1', '2', '3']
    statuses.forEach(s => {
      getArticleList({ pageNum: 1, pageSize: 1, status: s }).then(r => {
        statusCounts[s] = r.total || 0
      })
    })
  })
}

/** 获取文章列表 */
function getList() {
  loading.value = true
  const params = { ...queryParams }
  // 将 status 为 'undefined' 字符串转为 undefined
  if (params.status === 'undefined' || params.status === undefined) {
    params.status = undefined
  }
  getArticleList(params).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

/** Tab 切换 */
function handleTabChange() {
  queryParams.pageNum = 1
  getList()
}

/** 搜索 */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

/** 重置 */
function resetQuery() {
  queryParams.title = undefined
  queryParams.cateId = undefined
  queryParams.status = undefined
  handleQuery()
}

/** 表格选中变化 */
function handleSelectionChange(rows) {
  selectedRows.value = rows
}

/** 取消选择 */
function clearSelection() {
  tableRef.value?.clearSelection()
  selectedRows.value = []
}

/** 排序变化 */
function handleSortChange(column) {
  queryParams.orderByColumn = column.prop
  queryParams.isAsc = column.order === 'ascending' ? 'asc' : 'desc'
  getList()
}

/** 查看详情 */
function handleDetail(row) {
  detailLoading.value = true
  detailVisible.value = true
  getArticleDetail(row.aid).then(res => {
    detailData.value = res.data || {}
    detailFiles.value = res.data?.files || []
    detailLoading.value = false
  }).catch(() => {
    detailLoading.value = false
    detailData.value = null
  })
}

/** 新增 */
function handleAdd() {
  form.value = { type: 'article', pubPlatform: 'pc' }
  fileList.value = []
  title.value = '新增文章'
  open.value = true
}

/** 编辑 */
function handleEdit(row) {
  getArticleDetail(row.aid).then(res => {
    form.value = { ...res.data }
    fileList.value = res.data?.files ? [...res.data.files] : []
    title.value = '编辑文章'
    open.value = true
  })
}

/** 单条删除（软删除，移至回收站） */
function handleDelete(row) {
  proxy.$modal.confirm('确认将文章"' + row.title + '"移至回收站？').then(() => {
    batchUpdateArticle([{ aid: row.aid, isDel: '1' }]).then(() => {
      proxy.$modal.msgSuccess('已移至回收站')
      getList()
      loadStatusCounts()
    })
  })
}

/** 附件操作 */
function handleFileChange(file) {
  fileList.value.push(file)
}
function handleFileRemove(file) {
  fileList.value = fileList.value.filter(f => f.uid !== file.uid)
}
function removeFile(i) {
  fileList.value.splice(i, 1)
}

/** 缩略图上传 */
function beforeThumbUpload(file) {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isImage) {
    proxy.$modal.msgError('只能上传图片文件')
    return false
  }
  if (!isLt2M) {
    proxy.$modal.msgError('缩略图大小不能超过 2MB')
    return false
  }
  return true
}
function handleThumbSuccess(res) {
  if (res.code == 200) {
    form.value.thumbnail = res.fileName
  } else {
    proxy.$modal.msgError('缩略图上传失败')
  }
}
function removeThumbnail() {
  form.value.thumbnail = ''
}

/** 提交表单 */
function submitForm() {
  formRef.value?.validate((valid) => {
    if (!valid) return
    const method = form.value.aid && title.value === '编辑文章' ? updateArticle : addArticle
    method(form.value).then(() => {
      proxy.$modal.msgSuccess('操作成功')
      open.value = false
      getList()
      loadStatusCounts()
    })
  })
}

/** 取消 */
function cancel() {
  open.value = false
}

/** ====== 批量操作 ====== */
function getSelectedAids() {
  return selectedRows.value.map(r => r.aid).join(',')
}

/** 批量发布 */
function handleBatchPublish() {
  const aids = getSelectedAids()
  if (!aids) return
  proxy.$modal.confirm(`确认发布选中的 ${selectedRows.value.length} 篇文章？`).then(() => {
    updateArticle({ aids, status: '1' }).then(() => {
      proxy.$modal.msgSuccess('批量发布成功')
      clearSelection()
      getList()
      loadStatusCounts()
    })
  })
}

/** 批量置顶 */
function handleBatchTop() {
  const aids = getSelectedAids()
  if (!aids) return
  proxy.$modal.confirm(`确认置顶选中的 ${selectedRows.value.length} 篇文章？`).then(() => {
    updateArticle({ aids, isTop: 1 }).then(() => {
      proxy.$modal.msgSuccess('批量置顶成功')
      clearSelection()
      getList()
    })
  })
}

/** 批量撤回 */
function handleBatchRecall() {
  const aids = getSelectedAids()
  if (!aids) return
  proxy.$modal.confirm(`确认撤回选中的 ${selectedRows.value.length} 篇文章？`).then(() => {
    updateArticle({ aids, status: '2' }).then(() => {
      proxy.$modal.msgSuccess('批量撤回成功')
      clearSelection()
      getList()
      loadStatusCounts()
    })
  })
}

/** 批量复制 - 打开目标分类选择 */
function handleBatchCopy() {
  if (!selectedRows.value.length) return
  moveDialog.mode = 'copy'
  moveDialog.title = '复制到分类'
  moveDialog.targetCateId = null
  moveDialog.targetCateName = ''
  moveDialog.visible = true
}

/** 批量移动 - 打开目标分类选择 */
function handleBatchMove() {
  if (!selectedRows.value.length) return
  moveDialog.mode = 'move'
  moveDialog.title = '移动到分类'
  moveDialog.targetCateId = null
  moveDialog.targetCateName = ''
  moveDialog.visible = true
}

/** 分类树节点点击 */
function handleMoveNodeClick(data) {
  moveDialog.targetCateId = data.cateId
  moveDialog.targetCateName = data.cateName
}

/** 确认移动或复制 */
function confirmMoveOrCopy() {
  if (!moveDialog.targetCateId) return
  const targetCateId = moveDialog.targetCateId
  if (moveDialog.mode === 'move') {
    proxy.$modal.confirm(`确认将选中的 ${selectedRows.value.length} 篇文章移动到「${moveDialog.targetCateName}」？`).then(() => {
      const items = selectedRows.value.map(r => ({ aid: r.aid, cateId: targetCateId }))
      batchUpdateArticle(items).then(() => {
        proxy.$modal.msgSuccess('批量移动成功')
        moveDialog.visible = false
        clearSelection()
        getList()
      })
    })
  } else {
    proxy.$modal.confirm(`确认将选中的 ${selectedRows.value.length} 篇文章复制到「${moveDialog.targetCateName}」？`).then(() => {
      const items = selectedRows.value.map(r => ({
        title: r.title, subtitle: r.subtitle, cateId: targetCateId,
        status: 0, type: r.type, content: r.content,
        pubPlatform: r.pubPlatform, titleColor: r.titleColor,
        summary: r.summary, source: r.source, keyword: r.keyword
      }))
      batchAddArticle(items).then(() => {
        proxy.$modal.msgSuccess('批量复制成功')
        moveDialog.visible = false
        clearSelection()
        getList()
      })
    })
  }
}

/** 批量删除（软删除，移至回收站） */
function handleBatchDelete() {
  const aids = getSelectedAids()
  if (!aids) return
  proxy.$modal.confirm(`确认将选中的 ${selectedRows.value.length} 篇文章移至回收站？`).then(() => {
    const items = selectedRows.value.map(r => ({ aid: r.aid, isDel: '1' }))
    batchUpdateArticle(items).then(() => {
      proxy.$modal.msgSuccess('已移至回收站')
      clearSelection()
      getList()
      loadStatusCounts()
    })
  })
}

/** 批量清空（硬删除，仅回收站中可用） */
function handleBatchDrop() {
  const aids = getSelectedAids()
  if (!aids) return
  proxy.$modal.confirm(`确认永久删除选中的 ${selectedRows.value.length} 篇文章？此操作不可恢复。`).then(() => {
    delArticle(aids).then(() => {
      proxy.$modal.msgSuccess('批量清空成功')
      clearSelection()
      getList()
      loadStatusCounts()
    })
  })
}

onMounted(() => {
  getCates()
  getList()
  loadStatusCounts()
})
</script>

<style scoped>
.card-header {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

.status-tabs {
  margin-bottom: 12px;
}
.status-tabs :deep(.el-tabs__header) {
  margin: 0;
}
.status-tabs :deep(.el-tabs__item) {
  font-size: 14px;
}
.tab-badge {
  margin-left: 4px;
}
.tab-badge :deep(.el-badge__content) {
  font-size: 10px;
}

.batch-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: #f0f9eb;
  border: 1px solid #e1f3d8;
  border-radius: 4px;
}
.batch-info {
  margin-right: 12px;
  color: #606266;
  font-size: 13px;
}
.batch-info strong {
  color: #409eff;
  margin: 0 2px;
}

.thumbnail-uploader {
  width: 120px;
  height: 120px;
}
.thumbnail-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.thumbnail-uploader :deep(.el-upload:hover) {
  border-color: #409eff;
}
.thumb-preview {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
}
.thumb-icon {
  font-size: 28px;
  color: #8c939d;
}
.thumb-actions {
  margin-top: 4px;
}
</style>
