<template>
  <div class="margin-5"></div>
  <div class="main-container wrap main-fullScreen">
    <!--筛选项-->
    <div class="filterTable">
      <div class="filterBody">
        <div class="flexWrap">
          <div class="flex-item-5 tags">
            <span class="tag" :class="state.selectForm.type === item.type ? 'tag-active' : ''"
              v-for="(item, index) in state.articleTypeList" :key="index" @click="selectArticleType(item)">
              {{ item.name }}
            </span>
          </div>
          <div class="flex-item-5">
            <div class="searchSchool">
              <el-input v-model="state.selectForm.title" maxlength="24" show-word-limit
                style="max-width: 230px;height: 40px;line-height: 40px;" placeholder="输入院校名称"
                class="input-with-select" clearable/>
              <el-button :icon="Search" @click="reloadSearch"
                style="border-left: none;height: 40px;line-height: 40px;" />
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="articleList" style="background-color: white">
      <div class="item" v-for="(item,index) in state.articleList" :key="index">
        <div class="">
          <router-link :to="{ path: '/article/'+item.id, query: { } }" target="_blank">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-other-info">{{ item.date||'' }}</div>
          </router-link>
        </div>
      </div>
      <div style="padding: 20px">
        <el-pagination 
        @current-change="handleCurrentChange"
        :current-page="state.articlePage.currentPage"
        :page-size="state.selectForm.pageSize"
        background
        :total="state.articlePage.total"
        layout="prev, pager, next"/>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
import ApiConstant from '@/utils/ApiConstant';
import axiosInstance from '@/utils/http';
import { useRoute } from "vue-router";
const route = useRoute();
const state = reactive({
  selectForm: {
    type: '1',
    title:'',
    pageNum: 1,
    pageSize: 10
  } as any,
  articleTypeList: [{
    type: '1',
    name: '招生章程'
  }, {
    type: '2',
    name: '高考动态'
  }, {
    type: '3',
    name: '校内资讯'
  }] as any,
  articlePage:{
    currentPage:0,
    total:0,
  } as any,
  articleList:[] as any,
  articleList2: [
    {
      id:'1765345402544730114',
      title: "北京市2024年艺术类专业招生工作实施办法公布！",
      author: "圣达信教育",
      date: "2024-05-08 18:27:33",
      read_count: 7
    },
    {
      title: "北京市2024年高校艺术类专业招生问答来了！",
      author: "圣达信教育",
      date: "2024-05-08 18:27:25",
      read_count: 1
    },
    {
      title: "北京市2024年高招工作规定出炉！本科普通批可填报30个志愿",
      author: "圣达信教育",
      date: "2024-05-08 18:22:15",
      read_count: 0
    },
    {
      title: "北京高招体检3月10日启动，体检注意事项来啦",
      author: "圣达信教育",
      date: "2024-02-28 17:49:47",
      read_count: 1
    },
    {
      title: "北京市2024年艺术类统考合格分数线公布",
      author: "圣达信教育",
      date: "2024-01-08 11:33:52",
      read_count: 2
    },
    {
      title: "2024年北京美术类专业统考成绩查询开通",
      author: "圣达信教育",
      date: "2024-01-08 10:18:01",
      read_count: 0
    },
    {
      title: "2024年九大美院美术类校考专业有这些变化！",
      "category": "解读与指导",
      author: "圣达信教育",
      date: "2023-12-18 17:14:19",
      read_count: 0
    },
    {
      title: "北京明天9时起！高考网上填报个人信息并缴费",
      author: "圣达信教育",
      date: "2023-10-31 17:26:58",
      read_count: 0
    },
    {
      title: "北京艺术类考试招生专业目录来了",
      author: "圣达信教育",
      date: "2023-10-30 20:10:39",
      read_count: 0
    },
    {
      title: "京籍考生明起报名，报名详细流程和注意事项请收藏",
      author: "圣达信教育",
      date: "2023-10-24 17:40:41",
      read_count: 0
    }
  ] as any
})

onMounted(()=>{
  if(route.query.type && ['1','2','3'].includes(route.query.type as any)){
    state.selectForm.type = route.query.type
  }
  getArticleList()
})

function getArticleList() {
  axiosInstance({
    url: ApiConstant.Article.articlePage,
    method: 'get',
    params: state.selectForm
  }).then((res: any) => {
    if(res.data.result){
      console.log(res.data.result)
      state.articlePage.currentPage = res.data.result.current
      state.articlePage.total = res.data.result.total
      state.articleList = res.data.result.records
    }
  })
}

function handleCurrentChange(val:any){
  state.selectForm.pageNum  = val;
  getArticleList()
}
function reloadSearch(){
  state.selectForm.pageNum = 1
  getArticleList()
}

function selectArticleType(e: any) {
  state.selectForm.type = e.type
  state.selectForm.pageNum = 1
  getArticleList()
}
</script>
<style scoped lang="scss">
.wrap {
  width: 1210px;
}

.item{
  padding: 10px 20px;
  border-bottom: 1px solid #f4f4f4;
  .item-title{
    color: #111111;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
  }
  .item-other-info{
    font-size: 14px;
    color:#bbb;
    cursor: text;
  }
}


</style>