<template>
    <el-card>
        <template #header>
            <div class="flex justify-between items-center">
                <span>评论列表</span>
            </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="评论ID" />
            <el-table-column prop="a_id" label="文章ID" />
            <el-table-column prop="u_id" label="发送人ID" />
            <el-table-column prop="content" label="评论内容" />
            <el-table-column prop="published" label="发送时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="view(scope)">查看</el-button>
                    <el-button size="small" type="danger" @click="remove(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
        </div>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="viewData.id" :width="dialogWidth" :before-close="handleClose">
        <p>{{ viewData.u_id }}</p>
        <p>{{ viewData.content }}</p>
        <p>{{ viewData.published }}</p>
        <p>{{ viewData.a_title }}</p>
    </el-dialog>
</template>

<script setup>
import { userInfoStore } from '@/store/store'
import { ElMessage } from 'element-plus'
import { ref, onMounted,computed, reactive, watch } from 'vue'
import axios from 'axios'

const userinfo = userInfoStore()

const page = ref(1)
const pageSize = ref(5)
const total = ref()
const dialogVisible= ref(false)

const tableData = ref([])

const viewData = reactive({
    id:"",
    a_id:"",
    a_title:"",
    u_id:"",
    content:"",
    published:""
})

const articlebuffer = ref()

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

const getComment = async () => {
    try {
        const response = await axios.get("/api/admin/get/comments", {
            headers: {
                Authorization: "Bearer " + userinfo.token,
            },
            params: {
                current: page.value,
                size: pageSize.value
            }
        })
        if (!response.data.code === 200) {
            ElMessage.error(response.data.message)
            return
        }
        tableData.value = response.data.data.records
        total.value = response.data.data.total
    } catch (error) {
        console.log(error)
        ElMessage.error("获取评论失败")
    }
}

const view = async (scope) =>{
    try{
        const response = await axios.get("/api/blog/get/article/"+ scope.row.a_id)
        if(response.data.code !== 200){
            ElMessage.error(response.data.message)
            return
        }
        else{
            articlebuffer.value = response.data.data
            viewData.id = scope.row.id
            viewData.u_id = scope.row.u_id
            viewData.a_id = scope.row.a_id
            viewData.a_title = response.data.data.title
            viewData.content = scope.row.content
            viewData.published = scope.row.published
            console.log("查询成功")
            dialogVisible.value = true
            return
        }
    }
    catch (error){
        console.log(error)
        ElMessage.error("查询失败")
    }
}

const remove = async (scope) =>{
    try{
        const response = await axios.post("/api/admin/delete/comment",{
            id: scope.row.id
        },{
            headers:{
                Authorization: `Bearer ${userinfo.token}`,
            }
        })
        if(response.data.code !== 200){
            ElMessage.error(response.data.message)
            return
        }
        ElMessage.success("删除成功")
        getComment()
    }
    catch(error){
        console.log(error)
        ElMessage.error("删除失败")
    }
}

watch(page, getComment, { immediate: true })


// onMounted(() => {
//     page.value = 1
//     getComment()
// })

</script>