<template>
  <div class="article-manage-container">
    <el-row :gutter="20">
      <el-col :span="18">
        <vab-card title="内容发布管理">
          <template #header>
            <div class="card-header">
              <span>文章列表</span>
              <el-button type="primary" icon="add-line" size="small" @click="handleAdd"> <vab-icon icon="add-line" /> 发布新内容</el-button>
            </div>
          </template>

          <vab-query-form>
            <vab-query-form-left-panel>
              <el-form :inline="true" :model="queryForm" @submit.prevent>
                <el-form-item label="标题">
                  <el-input v-model="queryForm.keyword" placeholder="文章标题" clearable />
                </el-form-item>
                <el-form-item label="栏目">
                  <el-select v-model="queryForm.category" placeholder="全部" clearable style="width: 120px">
                    <el-option label="通知公告" value="notice" />
                    <el-option label="新闻资讯" value="news" />
                    <el-option label="规章制度" value="rule" />
                    <el-option label="安全教育" value="safety" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="queryForm.status" placeholder="全部" clearable style="width: 120px">
                    <el-option label="已发布" value="published" />
                    <el-option label="草稿箱" value="draft" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="search-line" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-left-panel>
          </vab-query-form>

          <el-table v-loading="loading" :data="tableData" border stripe height="700px">
            <el-table-column prop="title" label="标题" min-width="250" show-overflow-tooltip>
              <template #default="{ row }">
                <span class="title-link" @click="handlePreview(row)">{{ row.title }}</span>
                <el-tag v-if="row.top" type="danger" size="small" effect="dark" class="ml-5">置顶</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="栏目" width="100">
              <template #default="{ row }">
                <el-tag :type="getCategoryTag(row.category)">{{ getCategoryLabel(row.category) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="author" label="发布人" width="100" />
            <el-table-column prop="views" label="浏览" width="80" align="center" />
            <el-table-column prop="publishTime" label="发布时间" width="160" sortable />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="{ row }">
                <span :class="row.status === 'published' ? 'text-success' : 'text-gray'">
                  <vab-icon :icon="row.status === 'published' ? 'checkbox-circle-fill' : 'edit-circle-line'" />
                  {{ row.status === 'published' ? '已发布' : '草稿' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" text size="small" @click="handleEdit(row)"> <vab-icon icon="edit-line" /> 编辑</el-button>
                <el-button v-if="row.status === 'draft'" type="success" text size="small" @click="handlePublish(row)"> <vab-icon icon="checkbox-circle-fill" /> 发布</el-button>
                <el-button v-else type="warning" text size="small" @click="handleOffline(row)"> <vab-icon icon="arrow-left-s-line" /> 撤回</el-button>
                <el-popconfirm title="确定删除该文章吗？" @confirm="handleDelete(row)">
                  <template #reference>
                    <el-button type="danger" text size="small"> <vab-icon icon="delete-bin-6-line" /> 删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <vab-pagination
            :current-page="queryForm.pageNo"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </vab-card>
      </el-col>

      <el-col :span="6">
        <vab-card title="手机端预览" class="preview-card">
          <div class="mobile-mockup">
            <div class="status-bar">
              <span>9:41</span>
              <div class="icons">
                <vab-icon icon="signal-tower-fill" />
                <vab-icon icon="wifi-fill" />
                <vab-icon icon="battery-fill" />
              </div>
            </div>
            <div class="app-header">
              <vab-icon icon="arrow-left-s-line" />
              <span>{{ previewData ? getCategoryLabel(previewData.category) : '校园资讯' }}</span>
              <vab-icon icon="more-fill" />
            </div>
            <div class="app-content">
              <div v-if="previewData" class="article-detail">
                <h1 class="title">{{ previewData.title }}</h1>
                <div class="meta">
                  <span>{{ previewData.publishTime }}</span>
                  <span class="ml-10">{{ previewData.author }}</span>
                  <span class="ml-10 text-primary">浏览 {{ previewData.views }}</span>
                </div>
                <div class="content-body">
                  <p v-if="!previewData.content">（暂无内容预览）</p>
                  <div v-else v-html="previewData.content"></div>
                </div>
              </div>
              <div v-else class="empty-state">
                <vab-icon icon="smartphone-line" class="icon" />
                <p>点击左侧文章标题进行预览</p>
              </div>
            </div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 编辑弹窗 -->
    <article-edit-dialog ref="articleEditDialogRef" @success="handleQuery" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ArticleEditDialog from './components/ArticleEditDialog.vue'

defineOptions({
  name: 'ArticleManage',
})

// --- Data ---
const queryForm = reactive({
  keyword: '',
  category: '',
  status: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const articleEditDialogRef = ref()
const previewData = ref(null)

// --- Helpers ---
const getCategoryLabel = (val) => {
  const map = { notice: '通知公告', news: '新闻资讯', rule: '规章制度', safety: '安全教育' }
  return map[val] || val
}
const getCategoryTag = (val) => {
  const map = { notice: 'danger', news: 'primary', rule: 'info', safety: 'warning' }
  return map[val]
}

// --- Methods ---
const generateMockData = () => {
  return [
    {
      id: 1,
      title: '关于2026年寒假留校住宿申请的通知',
      category: 'notice',
      author: '宿管中心',
      views: 1258,
      publishTime: '2026-01-15 09:00:00',
      status: 'published',
      top: true,
      content: '<p>各位同学：</p><p>寒假将至，为做好留校学生住宿管理工作，现将有关事项通知如下...</p><p>一、申请时间：...</p>'
    },
    {
      id: 2,
      title: '国际校区举办“迎新春”写春联活动',
      category: 'news',
      author: '书院',
      views: 456,
      publishTime: '2026-01-20 14:30:00',
      status: 'published',
      top: false,
      content: '<p>1月20日下午，国际校区在北区广场举办了一场热闹非凡的写春联活动...</p>'
    },
    {
      id: 3,
      title: '学生公寓安全用电管理规定 (修订版)',
      category: 'rule',
      author: '安保部',
      views: 2301,
      publishTime: '2025-09-01 08:00:00',
      status: 'published',
      top: false,
      content: '<p>第一条 为加强公寓用电安全...</p>'
    },
    {
      id: 4,
      title: '消防演练活动预告',
      category: 'safety',
      author: '宿管中心',
      views: 0,
      publishTime: '-',
      status: 'draft',
      top: false,
      content: '待定内容...'
    }
  ]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    // Default preview first
    if (!previewData.value && tableData.value.length > 0) {
      previewData.value = tableData.value[0]
    }
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  articleEditDialogRef.value.open()
}

const handleEdit = (row) => {
  articleEditDialogRef.value.open(row)
}

const handlePublish = (row) => {
  ElMessage.success('发布成功')
  row.status = 'published'
  row.publishTime = new Date().toLocaleString()
}

const handleOffline = (row) => {
  ElMessage.warning('文章已撤回')
  row.status = 'draft'
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
  if (previewData.value && previewData.value.id === row.id) {
    previewData.value = null
  }
}

const handlePreview = (row) => {
  previewData.value = row
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

handleQuery()
</script>

<style lang="scss" scoped>
.article-manage-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .mb-20 { margin-bottom: 20px; }
  .ml-5 { margin-left: 5px; }
  .ml-10 { margin-left: 10px; }
  .text-success { color: var(--el-color-success); }
  .text-gray { color: #909399; }
  .text-primary { color: var(--el-color-primary); }
  
  .title-link {
    cursor: pointer;
    &:hover { color: var(--el-color-primary); text-decoration: underline; }
  }

  .preview-card {
    position: sticky;
    top: 20px;
    
    .mobile-mockup {
      width: 100%;
      height: 750px;
      background: #fff;
      border: 8px solid #333;
      border-radius: 30px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);

      .status-bar {
        height: 30px;
        background: #f8f8f8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        font-size: 12px;
        font-weight: bold;
        .icons { display: flex; gap: 5px; }
      }

      .app-header {
        height: 44px;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        font-size: 16px;
        font-weight: bold;
      }

      .app-content {
        flex: 1;
        overflow-y: auto;
        background: #fff;
        
        .empty-state {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #999;
          .icon { font-size: 48px; margin-bottom: 10px; }
        }

        .article-detail {
          padding: 15px;
          .title { font-size: 20px; font-weight: bold; margin-bottom: 10px; line-height: 1.4; }
          .meta { font-size: 12px; color: #999; margin-bottom: 20px; display: flex; }
          .content-body {
            font-size: 14px;
            line-height: 1.6;
            color: #333;
            :deep(p) { margin-bottom: 10px; }
          }
        }
      }
    }
  }
}
</style>