<template>
  <div class="announcement-list-container">
    <div class="search-form">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="公告标题">
          <el-input v-model="searchForm.title" placeholder="请输入公告标题" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="load">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 公告列表卡片式展示 -->
    <div class="announcement-list">
      <el-empty v-if="tableData.length === 0" description="暂无公告"></el-empty>
      <el-card v-for="item in tableData" :key="item.id" class="announcement-card" shadow="hover">
        <div class="announcement-card-header">
          <div class="announcement-card-title">
            <el-tag v-if="item.isTop" type="danger" size="small" class="top-tag">置顶</el-tag>
            <span class="title-text" @click="handleView(item)">{{ item.title }}</span>
          </div>
          <div class="announcement-card-info">
            <span class="publisher">发布人: {{ item.publisherName }}</span>
            <span class="time">{{ item.createTime }}</span>
          </div>
        </div>
        <div class="announcement-card-preview">
          <div class="preview-content" v-html="getPreviewContent(item.content)"></div>
          <div class="read-more" @click="handleView(item)">查看全文</div>
        </div>
      </el-card>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="searchForm.pageSize"
        :page-sizes="[10, 20, 50]"
        v-model:current-page="searchForm.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 查看对话框 -->
    <el-dialog v-model="viewDialogVisible" title="公告详情" width="65%">
      <h2 style="text-align: center; margin-bottom: 20px">{{ viewForm.title }}</h2>
      <div style="text-align: center; color: #999; margin-bottom: 20px">
        发布人: {{ viewForm.publisherName }} | 发布时间: {{ viewForm.createTime }}
      </div>
      <div class="content-container" v-html="viewForm.content"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

// 数据定义
const searchForm = reactive({
  pageNum: 1,
  pageSize: 10,
  title: '',
});

const tableData = ref([]);
const total = ref(0);
const viewDialogVisible = ref(false);

const viewForm = reactive({
  id: null,
  title: '',
  content: '',
  publisherName: '',
  createTime: '',
});

// 加载数据
const load = async () => {
  try {
    const res = await request.get('/announcement/page', {
      params: searchForm
    });
    
    if (res.code === '200') {
      tableData.value = res.data.list;
      total.value = res.data.total;
    } else {
      ElMessage.error(res.msg || '获取数据失败');
    }
  } catch (error) {
    console.error('加载数据出错', error);
    ElMessage.error('加载数据出错');
  }
};

// 重置搜索条件
const resetSearch = () => {
  searchForm.title = '';
  load();
};

// 分页处理
const handleSizeChange = (val) => {
  searchForm.pageSize = val;
  load();
};

const handleCurrentChange = (val) => {
  searchForm.pageNum = val;
  load();
};

// 查看公告
const handleView = (row) => {
  Object.assign(viewForm, {
    id: row.id,
    title: row.title,
    content: row.content,
    publisherName: row.publisherName,
    createTime: row.createTime,
  });
  viewDialogVisible.value = true;
};

// 获取预览内容
const getPreviewContent = (content) => {
  if (!content) return '';
  
  // 创建临时DOM元素来解析HTML并提取纯文本
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = content;
  const textContent = tempDiv.textContent || tempDiv.innerText || '';
  
  // 限制预览字数
  return textContent.length > 100 
    ? textContent.substring(0, 100) + '...' 
    : textContent;
};

// 页面加载时获取数据
onMounted(() => {
  load();
});
</script>

<style scoped>
.announcement-list-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.announcement-list {
  margin-bottom: 20px;
}

.announcement-card {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.announcement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.announcement-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.announcement-card-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  flex: 1;
}

.top-tag {
  margin-right: 8px;
  line-height: 1;
}

.title-text {
  flex: 1;
}

.title-text:hover {
  color: #409EFF;
}

.announcement-card-info {
  color: #909399;
  font-size: 13px;
  margin-top: 5px;
}

.publisher {
  margin-right: 15px;
}

.announcement-card-preview {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.preview-content {
  margin-bottom: 10px;
}

.read-more {
  color: #409EFF;
  font-size: 13px;
  text-align: right;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.content-container {
  padding: 0 20px;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .announcement-card-header {
    flex-direction: column;
  }
  
  .announcement-card-info {
    margin-top: 10px;
  }
}
</style> 