<template>
    <view
        v-show="isShow"
        class="mb-float"
        :style="{
            opacity: isShow ? '1' : '0'
        }"
    >
        <view v-if="feedback" @tap.stop="onFeedback" class="mb-float-ball">
            <c-icon name="write" font-size="20px" />
        </view>
        <view @tap.stop="onScrollToTop"  class="mb-float-ball c-gap-top">
            <c-icon name="arrow-up-line" font-size="20px" />
        </view>
    </view>
</template>
<script>
/**
* @file 悬浮窗
* @author chenshuo04
*/
import {navigate} from '../../utils/navigate';
import Icon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    components: {
        'c-icon': Icon
    },
    options: {
        addGlobalClass: true
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        feedback: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            show: false,
            scrollTop: 0
        };
    },
    methods: {
        onScrollToTop() {
            this.$api.pageScrollTo({scrollTop: 0, duration: 300});
        },
        onFeedback() {
            /* eslint-disable max-len */
            navigate({url: '/pages/brand/feedbackform/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&atn=feedbackform&title=我要反馈&word=我要反馈&cat=5', extra: {form: 'float-ball'}});
            /* eslint-enable max-len */
        },
        onScroll(top) {
            const diff = top - this.scrollTop;
            if (this.scrollTop === 0) {
                this.scrollTop = top;
                return;
            }
            if (Math.abs(diff) < 44) {
                return;
            }
            // 下拉
            if (diff > 44) {
                this.show = true;
            }
            // 上滑
            else if (diff < -44) {
                this.show = false;

            }
            this.scrollTop = top;
        }
    }
};
</script>
<style lang="less" scoped>
.mb-float {
    position: fixed;
    bottom: 15%;
    right: 10px;
    z-index: 10;
    transition: all .38s cubic-bezier(.2, 0, .2, 1);
    &-ball {
        color: #555;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .95);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .12);
        text-align: center;
        box-sizing: border-box;
    }
}
</style>