<template>
    <div class="container">
        <el-row :span="24" style="height: 100%;">
            <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
                <el-row style="height: 30%;">
                    <el-col :span="24" style="height: 100%;">
                        <div class="show-top-text">
                            <h2>Articles</h2>
                        </div>
                        <div class="search-input">
                            <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="height: 60%;">
                    <el-col :span="24" style="height: 100%;">
                        <div class="articles" v-for="item in filteredArticles" @click="openDetails(item)">
                            <div class="articlespic">
                                <!-- <img :src="item.pic" alt="芜湖" /> -->
                                 <img src="@/assets/backend.jpg" alt="芜湖">
                            </div>
                            <div class="articlescontent">
                                <h2>{{ item.title }}</h2>
                                <p class="date">{{ item.published }}</p>
                            </div>
                        </div>
                        <div class="pagination-block">
                            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import '@/styles/show.css'
import axios from 'axios'
import { onMounted, ref, computed,watch } from 'vue'
import { userInfoStore } from '@/store/store'
import { useRouter } from 'vue-router'
import { viewDetailsStore } from '@/store/details'
import { Search } from '@element-plus/icons-vue'

const details = viewDetailsStore()

const router = useRouter()

const search_text = ref('')

const pageSize = 5
const page = ref(1)
const search_page = ref(1)
const total = ref(0)
const articles = ref([])
const search = ref([])

const filteredArticles = computed(() => {
  return search_text.value.trim() === ''
    ? articles.value
    : search.value
})


const getArticles = async () => {
    try {
        const response = await axios.get('/api/blog/get/articles', {
            params: {
                current: page.value,
                size: pageSize
            }
        })
        if (response.data.code === 200) {
            articles.value = response.data.data.records
            page.value = response.data.data.current
            total.value = response.data.data.total
        } else {
            console.log(response.data.message)
            return
        }
    } catch (error) {
        console.log(error)
        return
    }

}

const doSearch = async () =>{
    if (!search_text.value.trim()) return
    try{
        const response = await axios.post('/api/blog/search/articles',{
            title: search_text.value
        },{
            params: {
                current: search_page.value,
                size: pageSize
            }
        })
        if(response.data.code === 200){
            search.value = response.data.data.records
            page.value = response.data.data.current
            total.value = response.data.data.total
        }else {
            console.log(response.data.message)
            return
        }
    }catch(error){
        console.log(error)
        return
    }
}

const openDetails = async (item) => {
    details.setViewDetails(item)
    router.push('viewDetails')
}



watch(page, getArticles, { immediate: true })
watch(search_page, doSearch)

// onMounted(() => {
//     getArticles()

// })

</script>
