<template>
    <view
        v-if="show"
        class="mb-operate"
        :style="{
            transform: packUp ? 'rotateZ(-90deg) translateY(42px)' : 'none'
        }"
        @tap.stop="onOperateEntry(fixed)"
    >
        <view :class="{'c-filter-gray': isGray}" >
            <image class="mb-operate-img" :src="fixed.img"  mode="aspectFit"/>
            <c-icon
                v-if="!packUp && !hideClose"
                name="close"
                class="mb-operate-close"
                font-size="12px"
                @tap.stop="onOperateClose"
            />
        </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: {
        fixed: {
            type: Object,
            default: {}
        },
        isGray: {
            type: Boolean,
            default: false
        },
        hideClose: {
            type: Boolean,
            default: false
        },
        log: {
            type: String,
            default: 'normal'
        }
    },
    data() {
        return {
            show: true,
            packUp: false,
            scrollTop: 0
        };
    },
    methods: {
        onOperateEntry(data) {
            if (process.env.MARS_ENV === 'h5' && data.h5_url) {
                if (data.duWord) {
                    this.$api.setClipboardData({
                        data: data.duWord,
                        complete: () => {
                            window.location.href = data.h5_url;
                        }
                    });
                }
                else {
                    window.location.href = data.h5_url;
                }
            }
            else if (data.path) {
                navigate({url: data.path, extra: {type: this.log + '-op-fixed'}});
            }
        },
        onOperateClose() {
            this.$set(this, 'show', false);
        },
        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.packUp = true;
            }
            // 上滑
            else if (diff < -44) {
                this.packUp = false;

            }
            this.scrollTop = top;
        }
    }
};
</script>
<style lang="less" scoped>
.mb-operate {
    position: fixed;
    bottom: 15%;
    right: 0;
    z-index: 921;
    transition: transform .38s cubic-bezier(.2, 0, .2, 1);
    &-img {
        width: 81px;
        height: 81px;
    }
    &-close {
        position: absolute;
        top: -8px;
        right: 10px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        font-weight: bold;
        color: #06c8c9;
        background: #d4fefe;
        border-radius: 50%;
    }
}
</style>