<template>
    <div>
        <div class="user-search">
            <el-input style="width: 200px;margin-right: 10px;" v-model="search" placeholder="请输入文章标题" />
            <el-button type="primary">搜索</el-button>
            <el-button style="float: right;" type="primary" @click="addNews">添加文章</el-button>
        </div>
        <div class="user-table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="title" label="文章标题" />
                <el-table-column prop="author" label="作者" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="updateTime" label="更新时间" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-icon type="primary" @click="editNews(scope.row)">
                            <Edit />
                        </el-icon>
                        <el-icon type="danger" @click="handleDeleteNews(scope.row)">
                            <Delete />
                        </el-icon>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                :page-size="20"
                :current-page="1"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { news, deleteNews } from '@/api/news';
const router = useRouter()
const tableData = ref([
    {
        title: '文章标题',
        author: '张三',
        createTime: '2021-01-01',
        updateTime: '2021-01-01',
    },
])
const search = ref('')
const addNews = () => {
    router.push('/addNew')
}
const editNews = (row) => {
    router.push(`/addNew?id=${row.id}`)
}
const handleDeleteNews = (row) => {
    console.log(row)
    deleteNews(row.id).then(res => {
        console.log(res)
    })
}

const query = ref({
    page: 1,
    size: 20,
    title: '',
    author: '',
    createTime: '',
})
const getNews = () => {
    news(query.value).then(res => {
        console.log(res)
    })
}
onMounted(() => {
    getNews()
})
</script>

<style scoped>
    .user-search {
        margin-bottom: 10px;
    }
</style>