<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>Merlin`s blog</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="news" v-for="item in filteredNews" @click="openDetails(item)">
                            <div class="newspic">
                                <!-- <img :src="item.pic" alt="芜湖" /> -->
                                 <img src="@/assets/backend.jpg" alt="芜湖">
                            </div>
                            <div class="newscontent">
                                <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>

    <el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" :before-close="handleClose">
        <span>This is a message</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

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

const details = viewDetailsStore()

const router = useRouter()

const dialogVisible = ref(false);

const search_text = ref('')

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

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

const dialogWidth = computed(() => {
    return window.innerWidth < 768 ? '90%' : '60%'
})

const getNews = async () => {
    try {
        const response = await axios.get('/api/blog/get/news', {
            headers: {
            },
            params: {
                current: page.value,
                size: pageSize
            }
        })
        if (response.data.code === 200) {
            news.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/news',{
            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, getNews, { immediate: true })
watch(search_page, doSearch)

// onMounted(() => {
//     getNews()
// })

</script>
