<template>
  <div class="main-content">
    <div style="margin: 30px 0; text-align: center">
      <el-input size="large" clearable @clear="reset" style="width: 500px; margin-right: 5px" v-model="data.title" placeholder="请输入帖子标题查询"></el-input>
      <el-button size="large" type="primary" @click="load">查询</el-button>
    </div>
    <div>
      <el-row :gutter="10">
       <el-col :span="6" v-for="item in data.articleData" style="margin-bottom: 15px">
         <div class="card" style="cursor: pointer" @click="navTo('/front/forumDetail?id=' + item.id)">
           <img :src="item.img" alt="" style="width: 100%; height: 150px">
           <div class="overflowShow" style="margin-top: 5px; font-size: 15px; color: #333333">{{ item.title }} </div>
           <div style="margin-top: 10px; display: flex; align-items: center">
             <img :src="item.studentAvatar" alt="" style="width: 25px; height: 25px; border-radius: 50%">
             <div style="flex: 1; margin: 0 10px">{{ item.studentName }}</div>
             <div style="width: 150px; text-align: right">{{ item.time }}</div>
           </div>
         </div>
       </el-col>
      </el-row>
    </div>
    <div v-if="data.total" style="margin: 20px 0">
      <el-pagination @current-change="load" background layout="prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
    </div>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  title: null,
  pageNum: 1,
  pageSize: 8,
  total: 0,
  articleData: []
})

const load = () => {
  request.get('/article/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      title: data.title
    }
  }).then(res => {
    if (res.code === '200') {
      data.articleData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const reset = () => {
  data.title = null
  load()
}
const navTo = (url) => {
  location.href = url
}
load()
</script>
<style scope>
.overflowShow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>