<template>
    <view class="u-list u-border-top-bottom">
        <view v-if="border" class="u-list--border-top"></view>
        <slot/>
        <view v-if="border" class="u-list--border-bottom"></view>
    </view>
</template>

<script>

    export default {
        name: 'ac-list',
        'mp-weixin': {
            options: {
                multipleSlots: false
            }
        },
        props: {
            enableBackToTop: {
                type: [Boolean, String],
                default: false
            },
            scrollY: {
                type: [Boolean, String],
                default: false
            },
            border: {
                type: Boolean,
                default: true
            }
        },
        provide() {
            return {
                list: this
            };
        },
        created() {
            this.firstChildAppend = false;
        },
        methods: {
            loadMore(e) {
                this.$emit('scrolltolower');
            }
        }
    };
</script>
<style lang="scss">
    .u-list {
        display: flex;
        background-color: $u-bg-color;
        position: relative;
        flex-direction: column;
    }

    .u-list--border {
        position: relative;
        z-index: -1;
    }

    .u-list--border-top {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background-color: $u-border-color;
        z-index: 1;
    }

    .u-list--border-bottom {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background-color: $u-border-color;
    }
</style>