<template>
    <view>
        <view
            v-if="btn"
            class="header-btn img-background"
            :class="btnClass"
            :style="__btnStyle"
        >
            <login-btn
                :disabled="!isNeedLogin || isLogin"
                :z-index="10"
                @onLoginSuccess="onLoginSuccess"
                @onTapEnd="onLoginBtnTapEnd"
            >
                <view>
                    <text
                        class="c-font-13 header-btn__text"
                        :style="{
                            width: btnWidth,
                            height: btnHeight,
                        }"
                        @tap="onBtnTap"
                    >{{ btn.text }}</text>
                </view>
            </login-btn>
        </view>
        <!-- 规则弹窗 -->
        <rule-popup
            v-if="btn.data"
            :is-show="isShowRule"
            :data="btn.data"
            @handleRulePopupClose="handleRulePopupClose"
        />
        <!-- 分享好友弹层 -->
        <share-img
            v-if="showShareImg"
            :hide-swan-top-close="false"
            :src="shareData.h5ShareImg"
            @close="onShareModal('close')"
        />
    </view>
</template>

<script>
/* global getApp, swan, Page, getCurrentPages, _pages */
import LoginBtn from '../../../components/common/login-btn';
import RulePopup from './RulePopup';
import {navigate} from '@utils/navigate';
import ShareImg from '@commonComponents/share-img';
import * as login from '@utils/login';
import {ubcSend} from '@utils/log';
/**
 * @file 运营顶部button
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        LoginBtn,
        RulePopup,
        ShareImg
    },
    data() {
        return {
            isShowRule: false,
            isShowMyMenu: false,
            showShareImg: false
        };
    },
    props: {
        /**
         * 按钮数据
         */
        btn: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 是否需要登陆
         */
        isNeedLogin: {
            type: Boolean,
            default: false
        },
        /**
         * 按钮宽度
         */
        btnWidth: {
            type: String,
            default: '66px'
        },
        /**
         * 按钮高度
         */
        btnHeight: {
            type: String,
            default: '33px'
        },
        /**
         * 按钮背景
         */
        btnBackground: {
            type: String,
            default: 'url(https://medactivity.cdn.bcebos.com/act618/main/header-btn-bg.png)'
        },
        /**
         * bottom 距离
         */
        bottom: {
            type: String,
            default: '30px'
        },
        /**
         * 按钮项额外样式
         */
        btnStyle: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 按钮项额外class
         */
        btnClass: {
            type: String,
            default: ''
        },
        /**
         * 登陆状态
         */
        isLogin: {
            type: Boolean,
            default: false
        },
        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: '618_prima'
        },
        /** 分享信息 */
        shareData: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    computed: {
        __btnStyle() {
            return Object.assign(
                {
                    width: this.btnWidth,
                    height: this.btnHeight,
                    'background-image': this.btnBackground,
                    bottom: this.bottom,
                },
                this.btnStyle
            );
        }
    },
    methods: {
        onBtnTap() {
            const {btn} = this;
            const log = {
                page: this.page,
                type: 'clk',
                value: `${this.logPrefix}_headerbtn_${btn.name || btn.id}`,
                ext: {
                    pd: 'act'
                }
            };
            // 跳转
            if (btn.type === 'jump') {
                const isTab = ['/pages/brand/home/index', '/pages/brand/person/index', '/pages/gy/medstorehome/index'].some(url => btn.unifiUrl.indexOf(url) > -1);
                navigate({
                    url: btn.unifiUrl,
                    urlType: isTab ? 7 : 0,
                    log
                });
                return;
            // 规则
            } else if (btn.name === 'rule') {
                this.isShowRule = true;
            } else if (btn.name === 'share') {
                this.onShareModal('open');
            }
            ubcSend(log);
        },
        onLoginSuccess() {
            /**
             * 小程序登陆登陆成功回调
             */
            this.$emit('onLoginSuccess');
        },
        onLoginBtnTapEnd() {
            if (process.env.MARS_ENV === 'h5') {
                login.toH5LoginPage({
                    isReplaceUrl: true
                });
            }
        },
        handleRulePopupClose() {
            this.isShowRule = false;
        },
        // 分享弹窗
        onShareModal(type) {
            if (process.env.MARS_ENV === 'swan') {
                this.$api.openShare({
                    ...this.shareData,
                    success: res => {
                        this.$api.showToast({
                            title: '分享成功'
                        });
                    }
                });
                return;
            }
            if (type === 'open') {
                this.showShareImg = true;
            } else if (type === 'close') {
                this.showShareImg = false;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.header-btn {
    position: absolute;
    right: -1px;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://medactivity.cdn.bcebos.com/act618/main/header-btn-bg.png);
    box-shadow: inset 0px 1px 11px 0px rgba(255, 170, 129, 0.28);
    border-radius: 300px 0 0 300px;
    color: #fff;
    &__text {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.my-menu {
    position: absolute;
    right: 0;
    top: 0;
    background: #e34037;
    line-height: 21px;
    font-size: 12px;
    color: #fff;
    padding: 4px 9px;
    text-align: center;
    white-space: nowrap;
}
.img-background {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}
@media only screen and (max-width: 393px) {
    .header-btn.crowd-header-btn {
        width: 56px !important;
        .header-btn__text {
            font-size: 11px !important;
        }
    }
}
</style>
