<template>
    <div>
        <div class="bigBox">
            <div>
                <span>共有{{ realTotal }}条</span>
            </div>
            <div>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background" layout="sizes, prev, pager, next, jumper"
            :total="realTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import system from '@/api/system';
export default {
    props: {
        tLength: {
            type: Number,
            required: true
        }
    },
    setup(props, { emit }) {
        let result = props.tLength
        let realTotal = ref(0)
        let currentPage = ref(1)
        let pageSize = ref(10)
        let small = ref(false)
        let background = ref(false)
        let disabled = ref(false)
        let pageIndex = ref(0)
        let pageThis = ref(0)
        function lineList() {
            realTotal.value = result
        }
        function handleSizeChange(val) {
            pageSize.value = val
            emit("getBack", pageIndex.value, pageSize.value)
        }
        function handleCurrentChange(val) {
            pageIndex.value = val
            emit("getBack", pageIndex.value, pageSize.value)
        }
        // 使用watch监听props.tLength的变化
        watch(() => props.tLength, (newVal) => {
            realTotal.value = newVal;
        });
        onMounted(() => {
            lineList()
        })
        return {
            currentPage,
            pageSize,
            small,
            background,
            disabled,
            handleSizeChange,
            handleCurrentChange,
            realTotal,
            lineList,
            pageIndex,
            pageSize
        }
    }
}
</script>

<style scoped>
.bigBox{
    width: 98%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>