<template>
    <div>
        <v-header :title="title" :is-show-prev-page="false"></v-header>
        <v-filter
            @add="handleAddBtnClick"
            @batchDelete="handleBatchDeleteClick"
            @export="handleExportClick"
            @import="handleImportClick"
            @search="handleSearchClick">
        </v-filter>
        <v-table
           :table-data ="tableData"
           @showDetail="handleShowDetailClick"
           @edit="handleEditClick"
           @delete="handleDeleteClick">
        </v-table>
        <pagination
            @getCurrentPage="handlePageChange"
            @getSizeChange="handleSizeChange"
            :amount="totalCount"
            :page-size="pageSize"
            :page-index="pageIndex">
        </pagination>

    </div>
</template>
<script>
export default {
    name: 'VList',
    components: {
        VHeader: () => import('@/common/header/VHeader'),
        Pagination: () => import('@/common/Pagination'),
        VFilter: () => import('./VFilter'),
        VTable: () => import('./VTable')
    },
    data () {
        return {
            title: '标题',
            tableData: [],
            pageIndex: 1,
            pageSize: 20,
            totalCount: 0
        }
    },
    methods: {
        // 新增...
        handleAddBtnClick () {

        },
        // 批量删除
        handleBatchDeleteClick () {

        },
        // 导出
        handleExportClick () {

        },
        // 导入
        handleImportClick () {

        },
        // 搜索
        handleSearchClick () {

        },

        // 查看详情
        handleShowDetailClick (index) {

        },
        // 删除
        handleDeleteClick (index) {

        },
        // 编辑
        handleEditClick (index) {

        },

        handleSizeChange (val) {
            this.pageSize = val
        },
        // 切换页面
        handlePageChange (val) {
            this.pageIndex = val
        }
    },
    created () {
    },
    mounted () {}
}
</script>
<style lang="less" scoped>

</style>
