<template>
    <view class="van-index-anchor-wrapper" :style="wrapperStyle">
        <view :class="'van-index-anchor ' + (active ? 'van-index-anchor--active van-hairline--bottom' : '')" :style="anchorStyle">
            <slot v-if="useSlot" />
            <block v-else>
                <text>{{ index }}</text>
            </block>
        </view>
    </view>
</template>

<script>
import { VantComponent } from '../common/component';
export default {
    data() {
        return {
            active: false,
            wrapperStyle: '',
            anchorStyle: ''
        };
    },
    '../index-bar/index': {
        name: 'index-bar',
        type: 'ancestor',
        current: 'index-anchor'
    },
    props: {
        useSlot: Boolean,
        index: null
    },
    methods: {
        scrollIntoView(scrollTop) {
            this.getBoundingClientRect().then((rect) => {
                uni.pageScrollTo({
                    duration: 0,
                    scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop
                });
            });
        },
        getBoundingClientRect() {
            return this.getRect('.van-index-anchor-wrapper');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
