<!--
新版头部
1：支付宝小程序左对齐
-->
<template>
    <div :class="{y_topbar:1,y_topbar_fix:isFix,y_topbar_bold:isBold,y_topbar_fill:isTitleFill,y_topbar_transparent: topic == 'transparent',y_topbar_disLeft:!isLeft,y_topbar_disRight:!isRight,y_topbar_aliMp:isAliMp,y_topbar_weChatMp:isWechatMp}"
         :style="styleCustom">
        <div>
            <div class="y_topbar_left">
                <slot name="left">
                    <div class="y_topbar_back" v-if="isBack && !isAliMp"  @click="fnEmitBack" hover-class="hover"></div>
                    <div class="y_topbar_leftPos" v-else-if="isAliMp"></div>
                </slot>
            </div>
            <div :class="{y_topbar_title:1,y_topbar_title_middle:alignCenter}" :style="paddingRight ? 'padding-right:'+paddingRight+'px;' : ''">
                <div class="y_topbar_logo" v-if="isLogo"></div>
                <div v-else-if="title">{{title}}</div>
                <slot name="title" v-else></slot>
            </div>
            <div class="y_topbar_right">
                <div class="y_topbar_options" v-if="isOption" @click="fnEmitOption"></div>
                <div class="y_topbar_share" v-else-if="isShareBtn" @click="fnEmitShare"></div>
                <slot name="right" v-else></slot>
            </div>
        </div>

    </div>
</template>

<script>
import platform from "yesaway_platform";
export default {
    name: "yTopbar",
    computed:{
        isShareBtn(){
            return (this.isShare!==false && this.$uiEvent && this.$uiEvent.yTopbar && this.$uiEvent.yTopbar.shareBtn) || this.isShare === true;
        },
        isSlotLeft() {
            return this.$slots && !!this.$slots.left
        },
        isSlotRight() {
            return this.$slots && !!this.$slots.right
        },
        isSlotTitle() {
            return this.$slots && !!this.$slots.title
        },
        styleCustom(){
            let ret = this.styleStr || "";
            if(this.paddingTop){
                if(this.isMP){
                    ret += "padding-top:"+parseFloat(this.paddingTop)+"px;";
                    ret += "height:"+(this.height + parseFloat(this.paddingTop))+"px";
                }
                else{
                    ret += "padding-top:"+((this.height + parseFloat(this.paddingTop))/37.5) + "rem";
                }
            }
            return ret;
        }
    },
    data(){
        return {
            isAliMp:true,
            isWechatMp:true,
            height:49,
            isMP:false,
            paddingTop:0,
            paddingRight:0,
        }
    },
    methods:{
        fnEmitBack(){
            const self = this;
            if(self.fnBack){
                self.fnBack();
            }
            else if(self.$uiEvent && self.$uiEvent.yTopbar && self.$uiEvent.yTopbar.back){
                self.$uiEvent.yTopbar.back.call(this);
            }
            else {
                self.$router.back();
            }
        },
        fnEmitOption(){
            const self = this;
            if(self.fnOption){
                self.fnOption();
            }
        },
        fnEmitShare(){
            const self = this;
            self.$emit("share",self.shareInfo);
            if(self.fnShare){
                self.fnShare(self.shareInfo);
            }
            else if(self.$uiEvent && self.$uiEvent.yTopbar && self.$uiEvent.yTopbar.share){
                self.$uiEvent.yTopbar.share.call(this,self.shareInfo);
            }
        }
    },
    props:{
        alignCenter:Boolean,
        disCheckMp:Boolean,
        fnBack:Function,
        fnOption:Function,
        fnShare:Function,
        isBold:Boolean,
        shareInfo:"",
        isBack:{
            type:Boolean,
            default:true
        },
        isShare:"",
        isTitleFill:Boolean,
        isLogo:Boolean,
        isFix:Boolean,
        isOption:Boolean,
        isLeft:{
            type:Boolean,
            default:true
        },
        isRight:{
            type:Boolean,
            default:true,
        },
        title:"",
        topic:"",
        styleStr:""
    },
    beforeMount() {
        const self = this;

        if(!this.disCheckMp) {
            // #ifndef  MP-ALIPAY
            self.isAliMp = false;
            //#endif
            // #ifndef  MP-WEIXIN
            self.isWechatMp = false;
            //#endif
        }
        else{
            self.isAliMp = false;
            self.isWechatMp = false;
        }
        console.log("disCheckMp",this.disCheckMp)

        if(self.isAliMp){
            let rect = platform.getMenuButtonBoundingClientRect();
            let systemInfo = platform.getSystemInfoSync();
            if(rect.top && rect.height){
                self.isMP = true;
                self.paddingTop = Math.ceil(rect.top - (50 - rect.height)/2);
                self.paddingRight = Math.ceil((systemInfo.screen ? systemInfo.screen.width :systemInfo.screenWidth)  - (rect.optionMenuLeft || rect.left || 0));
            }
        }
        else if(self.isWechatMp){
            let rect = platform.getMenuButtonBoundingClientRect();
            let systemInfo = platform.getSystemInfoSync();
            if(rect.top && rect.height){
                self.isMP = true;
                self.paddingTop = Math.ceil(rect.top - (50 - rect.height)/2);
                self.paddingRight = Math.ceil((systemInfo.screen ? systemInfo.screen.width :systemInfo.screenWidth)  - (rect.optionMenuLeft || rect.left || 0));
            }
        }
        else{
            platform.getSystemInfo({
                success(e){
                    self.isMP = true;
                    if (e.platform == 'android') {
                        self.paddingTop = e.statusBarHeight + 5;
                    } else {
                        self.paddingTop = e.statusBarHeight;
                    }
                }
            })
        }




    }
}
</script>

<style lang="scss" >
@import "../css/base.scss";
@import "../css/var.scss";

@font-face {font-family: "yesaway-logo";
    src: url('//at.alicdn.com/t/font_1073746_me4ek9rinh.eot?t=1551857681739'); /* IE9 */
    src: url('//at.alicdn.com/t/font_1073746_me4ek9rinh.eot?t=1551857681739#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAXEAAsAAAAACpgAAAV4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqJJIc7ATYCJAMICwYABCAFhG0HLhvfCFGUTU6L7EdC5qaPZgklarG4aBEZgXvXyrkP8RRBtYb17EGAUaZiWQMqclERnhywNPTGvDDP+vX935xeOyD6chiSA0IduEv4UmY1ISf0hN3z6/MD1hO6Q3St2/JM4CKC298F4AFm+AX9z+X47up5YPMD5TTnxgCjCRTQ3kBRgOFQyjiTluF1eXXY1wnUGzbPs7l7fI2a5UAQVMaFroqoOaaUlxBCraTM2Vr3LTIUatNteoY8u5+Pf4RoJikykLNzvqOg9Z+uOCbLVlnHttp1f3rwu8iwCMmJg1zjljqfv+gK6/OM9cbLBTnl+ela1WzmbBnUjydKIGykxIMMc59YJntXhYl5PUc3FA/Ej1ZfiO6Jvs7+ztGmkcb+1vrmsUahtq6pp7M5cd566fpeQrZIpk6qrmeghVJQyN+oW7usKJMjVQNq+pqQs+2hRUPXehpaKGfkG3WT+zEcUgFZMABqxgTL1mH9KH6GmsMnCEhILRbMx/L5k/kF89BrwWkMOnLgtYUeluf2yiYPC8rk9IAahSYEIuX2HLJ4XLZ2lKBeG2iRWjzc30gpwEP+2Gh6gEPFAwWB11QYs2ygJBQVY80wWaCrtiM+wNsZEgtCr+2QE2TJLhynm+y4bOrSojcArl1XaLouyl6MlF9Hy4LKp9dvwPpF+cZOIrR51i2ybDLoA3ULcutdPao/qN9IFBTwNVxfUzBq3YUbs6K5GzmrMuYwpJAnUJwYNqMRXtCHRvWK9wG0AWXQl6yMBPFd163mdoxGdiglu/KD4y6/YUpCX0Dr2AE919e6RMtuQKl2/+5qp1Dlfto0n/HiF0lakppohUGPQ3JGUDkbAz+ytvxybwadhNMqqouqcYrw8IefYegKVUr8W49KXl5050/4t0zgvQR6pCoM6zgAEFHJigsAzQy5XmJNEL0Ei7NiY8CtvgmWfTXZFZxSjNdTpAmBXpzNWbAxYbGfgyUk64EP64QdPgiJR60qiRFbHxdGRfgqzXgFmnh5j+YfoCZ3dWRKsI7t4VMbN8SJXpzVWaGhgsetgJtRCpKnESNJDy90GFGx5mJi4mgNTlbLiMn8F+8KVUx8y4Byrw01mE2PfzwNtQAftYRSXbosKbQfoPvqJH/gzH/xZuvmOV/LkrL0p/bZ5+2PsLhcsZM1O4HYc0iSVmZU4ScWi5dPMjzr+qolaYYVFOLWWvNSKBRzMzMmRVg2Kvv7LHmlPvZetLoszHPuwiN/VrV2DXbpiX3BagEC4ga2v4mItBDl7a0Be+Sj39EZDznVj9XnPUKE5YPTTkisrDEI+nmo3DcLyrltkGXQefcEFt1g3FBtsz8IjvlH+Ztnf2Ab9z/oz874wcbAZyJSq/JMlHz+BcVQPSF54KrG3E1965PpSt3+5vaH5dLGX+zyMkeNW71PbWPbG8sX8BQb85BaT7tffG98t1e30+HtvFUI1WVXJct+y9PsjhUfzrqW/zfD37vte21hm8uuZ6b2iZuCL7eqpUxVdVUEDvCTLlDCZKIpHnR/EYJ6zaIC1nafbaVdn0k01Or6WMw1hkLI1JpEcvwiFBosQanWCtRbsLe7QQe/OpHXYV4JQWj1CEmzd8i0qiI5/gMK3f6h1Bp1UO8o+o5sMB1665Yfi0GsgBQDXaYOIZpgq5d5idWQJfqjHJd4i/0B3QM8wyUje9jB/j5WBMKqEAwSIH5qwy66DVsWBddPDSwHGS0YdBdZluTdiZGpjVpt8MNEQZgCSGKATkY5iN06qDX1/kuYKsQi8pc0VGlvYX4B+uCAx+BqIHtCp1bDueQHhKkEQdpPAMKnUzawS+sxCwcp4OZPMmCyIIbWwu9axNLNSF0hM77Yvrp9UA9kKXBhJr+gKkUI') format('woff2'),
    url('//at.alicdn.com/t/font_1073746_me4ek9rinh.woff?t=1551857681739') format('woff'),
    url('//at.alicdn.com/t/font_1073746_me4ek9rinh.ttf?t=1551857681739') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1073746_me4ek9rinh.svg?t=1551857681739#iconfont') format('svg'); /* iOS 4.1- */
}

$height:count(100px);

.y_topbar{
    display: flex;
    height: $height;
    line-height: $height;
    background: $topbar_bg_color;
    color:$topbar_color;
    position: relative;

    &.y_topbar_disLeft{
        .y_topbar_left{
            display: none;
        }
        .y_topbar_title{
            padding-left: 0 !important;
        }
    }

    &.y_topbar_disRight{
        .y_topbar_right{
            display: none;
        }
        .y_topbar_title{
            padding-left: 0 !important;
        }
    }

    &.y_topbar_aliMp{
        .y_topbar_title{
            text-align: left;
            display: flex;
            flex:1;
            width: 100%;
            justify-content: flex-start;
        }
    }

    &.y_topbar_weChatMp{
        .y_topbar_title{
            display: flex;
            flex:1;
            width: 100%;
            justify-content:flex-start;
            text-align: left;
        }
    }
    &.y_topbar_fix{
        position:fixed;
        left:0;
        top:0;
        z-index: 9;
        width: 100%;
    }
    &.y_topbar_bold{
        font-weight: bold;
    }

    &.y_topbar_transparent{
        background: none;
        color:#fff;
        .y_topbar_back{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &:before{
                display: flex;
                content:"\e622";
                border-radius: 50%;
                width: 32px;
                height: 32px;
                justify-content: center;
                align-items: center;
                text-align: center;
                background: rgba(255,255,255,.5);
                color:$font_color_title;
                font-family: yesaway_ui;
                font-size: 18px;
                transition: all .15s;
            }
            &:active,&.hover{
                &:before{
                    background: rgba(000,000,000,.7);
                }
            }
        }
        .y_topbar_share{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &:before{
                display: flex;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                justify-content: center;
                align-items: center;
                text-align: center;
                background: rgba(255,255,255,.5);
                color:$font_color_title;
                font-family: yesaway_ui;
                font-size: 14px;
                transition: all .15s;
            }
            &:active,&.hover{
                &:before{
                    background: rgba(000,000,000,.7);
                }
            }
        }
    }

    &>div{
        width: 100%;
        position: relative;
        height: $height;
        display: flex;
    }

}
.y_topbar_fill{
    .y_topbar_title{
        flex: 1;
        padding: 0;
    }
    .y_topbar_left{
        position: relative;
    }
    .y_topbar_right{
        position: relative;
    }
}
.y_topbar_title{
    text-align: center;
    font-size: $font_size_t3;
    padding: 0 $height;
    margin:0 auto;
}
.y_topbar_title_middle{

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}
.y_topbar_left{
    position: absolute;
    height: $height;
    left:0;
    top:0;
    z-index: 2;
}
.y_topbar_right{
    position: absolute;
    height: $height;
    right:0;
    top:0;
    z-index: 2;
}
.y_topbar_back{
    position: relative;
    height: $height;
    width: $height;
    text-align: center;
    &:before{
        content:"\e622";
        font-family: yesaway_ui;
        font-size: 18px;
    }
}
.y_topbar_leftPos{
    position: relative;
    height: $height;
    width: $height;
    text-align: center;
}
.y_topbar_options{
    position: relative;
    height: $height;
    width: $height;
    text-align: center;
    &:before{
        content:"\e648";
        font-family: yesaway_ui;
        font-size: 18px;
    }
}
.y_topbar_share{
    position: relative;
    height: $height;
    width: $height;
    text-align: center;
    &:before{
        //content:"\e61c";
        content:"\e63f";
        font-family: yesaway_ui;
        font-size: 16px;
    }
}
.y_topbar_logo{
    text-align: center;
    &:before{
        content:"\e64f";
        font-family: "yesaway-logo";
        font-size:count(58px)
    }
}
</style>
