<template>
  <div class="news-manage">
    <!-- 查询表单 -->
    <el-form :model="searchForm" label-width="100px" class="search-form">
      <el-form-item label="新闻标题">
        <el-input v-model="searchForm.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="副标题">
        <el-input v-model="searchForm.subtitle" placeholder="请输入副标题" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 新闻表格 -->
    <el-table :data="filteredNewsList" border style="width: 100%" class="news-table">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="subtitle" label="副标题" />
      <el-table-column prop="cover" label="封面" width="120">
        <template #default="scope">
          <!-- 封面图片展示（模拟URL） -->
          <img 
            v-if="scope.row.cover" 
            :src="scope.row.cover" 
            style="width: 100px; height: auto; object-fit: cover;" 
            alt="封面"
          />
          <span v-else>无封面</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="文章内容" width="300" show-overflow-tooltip />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑新闻" v-model="dialogVisible" width="60%">
      <el-form :model="currentNews" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="currentNews.title" />
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model="currentNews.subtitle" />
        </el-form-item>
        <el-form-item label="封面地址">
          <el-input 
            v-model="currentNews.cover" 
            placeholder="请输入封面图片URL（如：https://xxx.jpg）" 
          />
        </el-form-item>
        <el-form-item label="文章内容">
          <!-- 富文本内容（用 textarea 模拟，实际可替换为专业富文本编辑器） -->
          <el-input 
            type="textarea" 
            v-model="currentNews.content" 
            rows="8" 
            placeholder="请输入富文本内容（支持换行等格式）" 
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage} from 'element-plus';

// 模拟“写死”的新闻数据
const newsList = ref([
  {
    id: 1,
    title: '人工智能最新进展',
    subtitle: '自然语言处理领域取得突破',
    cover: 'https://ts2.tc.mm.bing.net/th/id/OIP-C.Mk--gp8OIJtRPOJEByk4qwHaHa?w=80&h=80&c=1&bgcl=1065f3&r=0&o=7&cb=12&pid=ImgRC&rm=3', // 模拟封面图URL
    content: '人工智能在自然语言处理领域取得重大突破，能够更精准地理解人类意图，实现了多轮对话的连贯性和准确性提升。',
  },
  {
    id: 2,
    title: '新能源汽车技术革新',
    subtitle: '续航与充电效率双提升',
    cover: 'https://picsum.photos/200/150?random=2',
    content: '某车企发布新一代新能源汽车，续航里程突破800公里，同时快充技术实现10分钟充电80%，极大缓解用户里程焦虑。',
  },
  {
    id: 3,
    title: '全球气候变化研讨会',
    subtitle: '多国专家共商应对策略',
    cover: '', // 无封面示例
    content: '近日，全球气候变化研讨会在瑞士举行，来自30多个国家的气候专家齐聚一堂，共同探讨减少碳排放、应对极端天气的有效策略。',
  },
]);

// 查询表单：双向绑定的查询条件
const searchForm = reactive({
  title: '',   // 标题关键字
  subtitle: '',// 副标题关键字
});

// 【计算属性】根据查询条件过滤后的新闻列表
const filteredNewsList = computed(() => {
  return newsList.value.filter((news) => {
    // 标题匹配：包含关键字
    if (searchForm.title && !news.title.includes(searchForm.title)) {
      return false;
    }
    // 副标题匹配：包含关键字
    if (searchForm.subtitle && !news.subtitle.includes(searchForm.subtitle)) {
      return false;
    }
    return true;
  });
});

// 编辑弹窗状态与当前编辑的新闻
const dialogVisible = ref(false); // 弹窗显隐
const currentNews = reactive({
  id: 0,
  title: '',
  subtitle: '',
  cover: '',
  content: '',
});

// 点击“编辑”：打开弹窗并赋值当前行数据
const handleEdit = (row: any) => {
  // 深拷贝避免直接修改原数据
  Object.assign(currentNews, JSON.parse(JSON.stringify(row)));
  dialogVisible.value = true;
};

// 点击“保存”：更新原数据并关闭弹窗
const saveEdit = () => {
  const targetIndex = newsList.value.findIndex((item) => item.id === currentNews.id);
  if (targetIndex !== -1) {
    newsList.value[targetIndex] = { ...currentNews }; // 替换原数据
    ElMessage.success('编辑成功');
  }
  dialogVisible.value = false;
};

// 点击“删除”：弹窗确认后删除数据
const handleDelete = (row: any) => {
  // ElMessage.confirm('确定要删除这条新闻吗？', '提示', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning',
  // })
  //   .then(() => {
  //     newsList.value = newsList.value.filter((item) => item.id !== row.id);
  //     ElMessage.success('删除成功');
  //   })
  //   .catch(() => {
  //     ElMessage.info('已取消删除');
  //   });
};

// 重置查询条件
const resetSearch = () => {
  searchForm.title = '';
  searchForm.subtitle = '';
};

// 执行查询（计算属性自动过滤，这里仅作提示）
const search = () => {
  ElMessage.info('查询完成');
};
</script>

<style scoped>
.news-manage {
  padding: 20px;
}
.search-form {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.news-table {
  margin-top: 20px;
}
.dialog-footer {
  text-align: right;
}
</style>