<template>
    <el-card>
        <template #header>
            <div class="flex justify-between items-center">
                <span>文章列表</span>
                <el-button type="primary" @click="openAddarticlesModal = true">新增文章</el-button>
            </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="published" label="发布时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="edit(scope)">编辑</el-button>
                    <el-button size="small" @click="remove(scope)" type="danger">删除</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="openAddarticlesModal" title="新增文章" style="height: 70%; width: 80%;">
        <el-input size="large" v-model=title prefix-icon="el-icon-edit" placeholder="请输入文章标题"></el-input>
        <MarkdownEditor ref="editor1" @ready="editor1ready" />
        <el-button type="primary" @click="submit()">发布</el-button>
    </el-dialog>

    <el-dialog v-model="openEditarticlesModal" title="编辑文章" style="height: 70%; width: 80%;">
        <el-input size="large" v-model=title prefix-icon="el-icon-edit" placeholder="请输入文章标题"></el-input>
        <MarkdownEditor ref="editor2" @ready="editor2ready" />
        <el-button type="primary" @click="update()">更新</el-button>
    </el-dialog>
</template>

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

const userinfo = userInfoStore()

const openEditarticlesModal =ref(false)
const openAddarticlesModal = ref(false)

const id = ref('')
const title = ref('')
const content = ref('')

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

const editor1 = ref(null)
const editor2 = ref(null)

const tableData = ref([])

const edit = (scope) => {
    openEditarticlesModal.value = true
    id.value = scope.row.id
    title.value = scope.row.title
    content.value = scope.row.content
}


const editor1ready = () =>{
    title.value = ''
    editor1.value.setContent('')
}

const editor2ready = () =>{
    editor2.value.setContent(content.value)
}

const getarticles = async () => {
    try {
        const response = await axios.get("/api/blog/get/articles", {
            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 submit = async () => {
    try{
        const response = await axios.post("/api/admin/add/article", {
            title: title.value,
            content: editor1.value.getContent(),
        }, {
            headers: {
                Authorization: "Bearer " + userinfo.token,
            }
        })
        if (response.data.code !== 200) {
            ElMessage.error(response.data.message)
            return
        }
        ElMessage.success("发布文章成功")
        openAddarticlesModal.value = false
        getarticles()
    }
    catch (error){
        console.log(error)
        ElMessage.error("发布文章失败")
    }
}

const update = async () => {
    console.log(userinfo.token)
    try{
        const response = await axios.post("/api/admin/update/article", {
            id: id.value,
            title: title.value,
            content: editor2.value.getContent(),
        }, {
            headers: {
                Authorization: `Bearer ${userinfo.token}`,
            }
        })
        if (response.data.code !== 200) {
            ElMessage.error(response.data.message)
            return
        }
        ElMessage.success("更新文章成功")
        openEditarticlesModal.value = false
        getarticles()
    }
    catch (error){
        console.log(error)
        ElMessage.error("更新文章失败")
    }
}

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

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


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

</script>