<template>
    <header>
    </header>
    <main>
        <div>
            <h3>게시판</h3>
            <hr />
            <router-link to="/boardwrite"><el-button type="primary">글쓰기</el-button></router-link>
            
            <div>
                <el-table :data="state.items">
                    <el-table-column prop="bno" label="번호" />
                    <el-table-column prop="btitle" label="제목" />
                    <el-table-column prop="bhit" label="조회수" />
                </el-table>
            </div>
        </div>
    </main>
    <footer>
    </footer>
</template>
<script>
import { onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
export default {
    setup () {
        const router = useRouter();
        const state = reactive({
            page: 1,
        });
        const handleData = async() => {
            const url = `/ROOT/api/board/selectlist?page=${state.page}`;
            const headers = { "Content-Type": "application/json" };
            const response = await axios.get(url, { headers });
            console.log(response.data);
            if(response.data.status === 200) {
                state.items = response.data.result;
            }
        };
        const handlePage = async(no) => {
            const url = `/ROOT/api/board/updatehit?bno=${no}`;
            const headers = { "Content-Type": "application/json" };
            const response = await axios.put(url, {}, { headers });
            console.log(response.data);
            if(response.data.status === 200) {
                router.push({ name: 'BoardOne', query: { no: no } });    
            }
        }
        onMounted(() => {
            handleData();
        })
        return { state, handlePage }
    }
}
</script>
<style lang="scss" scoped>
</style>