<template>
    <div :class="classes" :style="styles" @click="back">
        <slot>
            <div :class="innerClasses">
                <i class="ivu-icon ivu-icon-ios-arrow-up"></i>
            </div>
        </slot>
    </div>
</template>
<script>
import { scrollTop } from '@/libs/util'
import { on, off } from '@/libs/tools'
const prefixCls = 'ivu-back-top'

export default {
    name: 'ABackTop',
    props: {
        height: {
            type: Number,
            default: 400
        },
        bottom: {
            type: Number,
            default: 30
        },
        right: {
            type: Number,
            default: 30
        },
        duration: {
            type: Number,
            default: 1000
        },
        container: {
            type: null,
            default: window
        }
    },
    data () {
        return {
            backTop: false
        }
    },
    mounted () {
    // window.addEventListener('scroll', this.handleScroll, false)
    // window.addEventListener('resize', this.handleScroll, false)
        on(this.containerEle, 'scroll', this.handleScroll)
        on(this.containerEle, 'resize', this.handleScroll)
    },
    beforeDestroy () {
    // window.removeEventListener('scroll', this.handleScroll, false)
    // window.removeEventListener('resize', this.handleScroll, false)
        off(this.containerEle, 'scroll', this.handleScroll)
        off(this.containerEle, 'resize', this.handleScroll)
    },
    computed: {
        classes () {
            return [
                `${prefixCls}`,
                {
                    [`${prefixCls}-show`]: this.backTop
                }
            ]
        },
        styles () {
            return {
                bottom: `${this.bottom}px`,
                right: `${this.right}px`
            }
        },
        innerClasses () {
            return `${prefixCls}-inner`
        },
        containerEle () {
            return this.container === window ? window : document.querySelector(this.container)
        }
    },
    methods: {
        handleScroll () {
            this.backTop = this.containerEle.scrollTop >= this.height
        },
        back () {
            let target = typeof this.container === 'string' ? this.containerEle : (document.documentElement || document.body)
            const sTop = target.scrollTop
            scrollTop(this.containerEle, sTop, 0, this.duration)
            this.$emit('on-click')
        }
    }
}
</script>
