<template>
    <view class="menu-wrapper">
        <template v-if="menu.length < 2">
            <view class="menu-icon c-gap-left"
                    v-for="(item, i) in menu"
                    :key="i"
                    @tap="onTapItem(item)">
                <c-icon
                    :name="item.icon"
                    font-size="20px">
                </c-icon>
            </view>
        </template>
        <template v-else>
            <c-icon
                name="menu"
                font-size="20px"
                @tap="showMenu"
            >
            </c-icon>
            <view class="action-menus action-menus-right" v-show="menuShow">
                <view
                    class="action-item action-item-right"
                    v-for="(item, i) in menu"
                    :key="i"
                    @tap="onTapItem(item)">
                    <c-icon
                        :name="item.icon"
                        class="head-menu-icon"
                        font-size="17px">
                    </c-icon>
                    <text class="tool-text c-gap-left c-font-normal c-color-link">{{item.txt}}</text>
                </view>
            </view>
        </template>
        <!-- 页面挽留弹窗 -->
        <c-dialog
            v-if="isPerventLeave"
            :show="isShowLeave"
            :gap-top="15"
            :title-height="44"
            :btn-opts="leaveBtn"
            :gapSlotBottom="leaveStyleConfig.gapSlotBottom"
            :width="leaveStyleConfig.width"
            @btntap="onClosePrevent">
            <view
                v-if="leaveType === 'normal'"
                slot="title"
                class="c-tac c-gap-inner-bottom c-font-sigma">温馨提示</view>
            <view v-if="leaveType === 'normal'" class="c-color-gray c-font-15">{{ leaveText }}</view>
            <slot name="leave-dialog-cont"></slot>
        </c-dialog>
    </view>
</template>

<script>
/**
 * @file 问诊-H5菜单
 * @author haoyan@baidu.com
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CDialog from '@baidu/med-ui/components/Dialog/Dialog';
import {navigate} from '../../utils/navigate';
import * as log from '../../utils/log';

export default {

    mounted() {
        document.addEventListener('click', this.hideMenu);
        document.getElementsByClassName('swan-app-navigation-bar')[0].addEventListener('click', this.hideMenu);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.hideMenu);
        document.getElementsByClassName('swan-app-navigation-bar')[0].removeEventListener('click', this.hideMenu);
    },
    config: {
        component: true
    },
    props: {
        /**
         * 菜单列表
         */
        menu: {
            type: Array
        },
        /**
         * 挽留弹层文本（用于标记显示）
         */
        leaveText: { // 退出页面前挽留文案
            'type': String,
            'default': ''
        },
        /**
         * 挽留弹层按钮
         */
        leaveBtn: { // 退出页面前挽留弹窗按钮
            type: Array,
            default() {
                return [];
            }
        },
        /**
         * 挽留弹层类型
         */
        leaveType: {
            type: String,
            default: 'normal'
        },
        /**
         * 挽留弹层样式
         */
        leaveStyleConfig: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        CIcon,
        CDialog
    },
    data() {
        return {
            menuShow: false,
            isPerventLeave: false,
            isShowLeave: false,
            leaveCb: null
        };
    },
    watch: {
        leaveText(v) {
            this.isPerventLeave = !!v;
        }
    },
    methods: {
        showMenu(e) {
            this.menuShow = !this.menuShow;
            e.stopPropagation();
        },
        hideMenu() {
            this.menuShow = false;
        },
        onTapItem(item) {
            this.go(() => {
                navigate({
                    url: item.info.msUrl || item.info.url
                });
            });
        },
        onClosePrevent(info) {
            this.isShowLeave = false;
            // 确认退出
            if (info.btn.event === 'confirm') {
                if (this.leaveType === 'wzInfoDialog') {
                    this.$api.removeStorageSync('wz-leave-modal');
                }
                if (typeof this.leaveCb === 'function') {
                    let timeid = setTimeout(() => {
                        this.leaveCb();
                        clearTimeout(timeid);
                    }, 300);
                }
            }

            log.send({
                type: 'b',
                action: 'leave-modal-btn',
                extra: {
                    leavetype: this.leaveType,
                    btnType: info.btn.event
                }
            });
        },
        go(cb) {
            if (this.isPerventLeave) {
                // 取上次的问诊挽留弹窗类型
                const leaveKey = this.$api.getStorageSync('wz-leave-modal');
                // 存储当前问诊弹窗类型
                this.$api.setStorage({
                    key: 'wz-leave-modal',
                    data: this.leaveType
                });
                if (this.leaveType === 'wzPhoneDialog' && leaveKey === 'wzInfoDialog' ||
                    this.leaveType === 'wzInfoDialog' && leaveKey === 'wzPhoneDialog'
                ) {
                    this.$api.removeStorageSync('wz-leave-modal');
                    cb();
                } else {
                    log.send({
                        type: 'b',
                        action: 'leave-modal-show',
                        extra: {
                            type: this.leaveType
                        }
                    });
                    this.isShowLeave = true;
                    this.leaveCb = cb;
                }
            }
            else {
                if (typeof cb === 'function') {
                    cb();
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.menu-wrapper {
    min-width: 40px;
    height: 40px;
    text-align: right;
}
.menu-icon {
    display: inline-block
}

.action-menus {
    position: fixed;
    top: 41px;
    right: 17px;
    z-index: 921;
    color: #333;
    width: auto;
    background-color: #fff;
    text-align: left;
    overflow: auto;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,.21);
}
.head-menu-icon {
    display: inline-block;
    width: 17px;
}
.tool-text {
    line-height: 45px;
    height: 45px;
    width: auto;
    display: inline-block;
    vertical-align: top;
}
.action-item {
    font-size: 16px;
    padding: 0 18px 0 17px;
    border-left: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
}
</style>
