<template>
    <div class="vab-anchor">
        <div v-for="(item, key) in floorList" :key="key" :class="'floor' + key">
            <slot v-if="key === key" :name="'floor' + key" />
        </div>
        <vab-card
            :body-style="{
                padding: '20px 10px 20px 10px',
            }"
            shadow="never"
            style="position: fixed; top: 170px; right: 68px"
        >
            <el-tabs
                v-model="step"
                tab-position="right"
                @tab-click="handleClick"
            >
                <el-tab-pane
                    v-for="(item, key) in floorList"
                    :key="key"
                    :label="item.title"
                />
            </el-tabs>
        </vab-card>
    </div>
</template>

<script>
    export default {
        name: 'VabAnchor',
        props: {
            floorList: {
                type: Array,
                default: () => {
                    return [
                        { title: '锚点1' },
                        { title: '锚点2' },
                        { title: '锚点3' },
                        { title: '锚点4' },
                        { title: '锚点5' },
                    ]
                },
            },
        },
        data() {
            return {
                step: '0',
                scrolltop: 0,
                floorObject: {},
            }
        },
        watch: {
            scrolltop(val) {
                val += 200
                const floorObject = this.floorObject
                for (let i = 0; i <= this.floorList.length + 1; i++) {
                    if (
                        val > floorObject[`floor${i}`] &&
                        (val <= floorObject[`floor${Number.parseInt(i + 1)}`] ||
                            val <= Number.POSITIVE_INFINITY)
                    ) {
                        this.step = `${i}`
                    }
                }
            },
        },
        mounted() {
            this.getFloorDistance()
            document.querySelector('#app').addEventListener('scroll', () => {
                this.scrolltop = document.querySelector('#app').scrollTop
            })
        },
        methods: {
            handleClick({ index }) {
                this.anchors(index)
            },
            anchors(item) {
                this.pulleyRoll(
                    this.floorObject[`floor${item}`],
                    this.scrolltop
                )
            },
            pulleyRoll(top, distance) {
                if (distance < top) {
                    const smallInterval = (top - distance) / 50
                    let i = 0
                    const timer = setInterval(() => {
                        i++
                        distance += smallInterval
                        document.querySelector('#app').scrollTop = distance
                        if (i == 50) {
                            clearInterval(timer)
                        }
                    }, 10)
                } else if (distance > top) {
                    const smallInterval = (distance - top) / 50
                    let i = 0
                    const timer = setInterval(() => {
                        i++
                        distance -= smallInterval
                        document.querySelector('#app').scrollTop = distance
                        if (i == 50) {
                            clearInterval(timer)
                        }
                    }, 10)
                }
            },
            getFloorDistance() {
                for (let i = 0; i < this.floorList.length; i++) {
                    this.floorObject[`floor${i}`] =
                        document.getElementsByClassName(
                            `floor${i}`
                        )[0].offsetTop
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .vab-anchor {
        [class*='floor'] {
            height: 780px;
            padding: $base-padding;

            &:nth-child(odd) {
                background: #b5ff8a;
            }

            &:nth-child(even) {
                background: #6db9ff;
            }
        }
    }
</style>
