<template>
    <view>
        <view
            v-if="show"
            class="float-operation SHOW_LOG_MODULE"
            data-show="brand-entry-live"
            :style="{
                transform: packUp ? 'rotateZ(-90deg) translateY(42px)' : 'none'
            }"
        >
            <image
                :src="data.img"
                mode="widthFix"
                class="float-operation-img"
                @tap="tap"
            />
            <view
                v-show="!packUp"
                class="float-operation-close"
                :style="{
                    color: data.color,
                    background: data.bgColor
                }"
                @tap="close"
            >
                <c-icon name="close" font-size="14px"/>
            </view>
        </view>
    </view>
</template>
<script>

/**
 *  @file 悬浮运营位
 *  @author 颜廷熙
 */
/* global getApp, getCurrentPages */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {send} from './../../utils/log';
import {navigate, navToSmartProgram, navToBdBoxH5} from './../../utils/navigate';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    components: {
        CIcon
    },
    data() {
        return {
            show: false,
            packUp: false,
            scrollTop: 0,
            timer: '',

            bindScrollEvent: true
        };
    },
    mounted() {
        let floatOperationStatus = getApp().globalData.floatOperationStatus;

        switch (floatOperationStatus) {
            case 'close':
                this.show = false;
                break;
            case 'packup':
                this.packUp = true;
                this.show = true;
                break;
            case 'show':
                this.show = true;
                break;
            default:
                this.show = true;
                break;
        }
        if (this.data && this.data.exp === 'exp2') {
            this.timer = setTimeout(() => {
                this.packUp = true;
                getApp().globalData.floatOperationStatus = 'packup';
            }, 5000);
        }
        if (floatOperationStatus === 'close') {
            this.bindScrollEvent = false;
        }
    },
    methods: {
        close(e) {
            this.show = false;
            getApp().globalData.floatOperationStatus = 'close';
            this.bindScrollEvent = false;
        },
        tap() {
            if (!this.data.url) {
                return;
            }
            const extra = {
                mod: `float-operation${this.data.key ? `-${this.data.key}` : ''}`,
                logUrl: this.data.url_tcurl
            };
            switch (this.data.urlType) {
                case '2':
                    navToSmartProgram(this.data.url);
                    send({
                        type: 'l',
                        action: 'navToSmartProgram',
                        extra
                    });
                    break;
                case '3':
                    navToBdBoxH5(this.data.url);
                    send({
                        type: 'l',
                        action: 'navToBdBoxH5',
                        extra
                    });
                    break;
                case '4':
                    navigate({
                        url: this.data.url,
                        urlType: '4'
                    });
                case '1':
                default:
                    navigate({
                        url: this.data.url,
                        extra
                    });
            }
        },
        onPageScroll(scrollTop) {
            if (!this.bindScrollEvent) {
                return;
            }

            const diff = scrollTop - this.scrollTop;
            if (this.scrollTop === 0) {
                this.scrollTop = scrollTop;
                return;
            }
            if (Math.abs(diff) < 44) {
                return;
            }
            // 下拉
            if (diff > 44) {
                this.packUp = true;
                getApp().globalData.floatOperationStatus = 'packup';
                if (this.data && this.data.exp === 'exp2') {
                    this.timer && clearTimeout(this.timer);
                }
            }
            // 上滑
            else if (diff < -44) {
                this.packUp = false;
                getApp().globalData.floatOperationStatus = 'show';
                if (this.data && this.data.exp === 'exp2') {
                    this.timer && clearTimeout(this.timer);
                    this.timer = setTimeout(() => {
                        this.packUp = true;
                        getApp().globalData.floatOperationStatus = 'packup';
                    }, 5000);
                }
            }
            this.scrollTop = scrollTop;
        }
    }
};
</script>

<style lang="less" scoped>
.float-operation {
    z-index: 999;
    position: fixed;
    right: 0;
    bottom: 24%;
    transition: all .38s cubic-bezier(.2, 0, .2, 1);

    &-img {
        width: 81px;
    }

    &-close {
        position: absolute;
        top: -5px;
        right: 10px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        font-size: 14px;
        border-radius: 50%;
    }
}
    
</style>