<template>
    <div>
        <el-table :data="data" style="width: 100%;" height="500" v-loading="loading">
            <el-table-column type="index" show-overflow-tooltip label="序号" align="center" />
            <el-table-column prop="user_name" show-overflow-tooltip label="姓名" align="center" />
            <el-table-column
                prop="create_org_name"
                show-overflow-tooltip
                label="所属机构"
                align="center"
            />
            <el-table-column prop="feedbak_num" show-overflow-tooltip label="反馈次数" align="center" />
            <el-table-column show-overflow-tooltip label="操作" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" @click="handleLookDetail(scope.$index, scope.row)">详情</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
                <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
            </div>
            <el-pagination
                background
                class="custom-page"
                layout="prev, pager, next, sizes"
                :page-sizes="[10, 20, 50, 100]"
                :current-page="query.page"
                :page-size="query.size"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
        },
        loading: {
            type: Boolean
        },
        total: {
            type: Number
        }
    },
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size)
            return page > 0 ? page : 1
        }
    },
    data() {
        return {
            query: {
                page: 1,
                size: 10,
                sort: "create_time desc"
            },
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$on('close', () => {
                this.query = {
                    page: 1,
                    size: 10,
                    sort: "create_time desc"
                }
            });
        });
    },
    methods: {
        handleSizeChange(val) {
            this.query.size = val
            this.handleQuery()
        },
        handleCurrentChange(val) {
            this.query.page = val
            this.handleQuery()
        },
        handleQuery() {
            this.$emit('nextPage', { ...this.query, type: 'contribute' })
        },
        handleLookDetail(index, row) {
            this.$emit('lookDetail', index, row)
        },
    },
}
</script>