<template>
    <div class="wrapper"  :class="{active:isScroll}">
        <!-- <div class="status-bar"></div> -->
        <div class="top-header" :class="{active:isScroll}">
            <div class="content left-icon" @click="backPre()">
                <img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon-white.png" alt="">
                <img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png" alt="">
            </div>
            <div v-if="isScroll" class="content title" :class="{active:isScroll}">{{title}}</div>
            <div v-if="!showShare" class="content right-icon" @click="share()">
                <img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon-white.png" alt="">
                <img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon.png" alt="">
            </div>
        </div>
    </div>
    
</template>
<script>
import {mapMutations} from 'vuex'
// import {shareUrl} from '@/utils/index'
import {shareUrl} from '../../utils/index.js'
export default {
    name:'MyHeader',
    props:{
        isOpacity:{
            type:Boolean,
            default:true
        },
        isScroll:{
            type:Boolean,
            default:false
        },
        showShare:{
            type: Boolean,
            default:true
        },
        
        doctorId:{
            type:String,
            default:""
        },
        title:{
            type: String,
            default: ""
        },
        isWeb:{
            type: Boolean
        }

    },
    mounted(){
        // console.log(this.isShare);
        console.log(shareUrl);
        console.log(`${shareUrl}`+'?doctorId='+this.doctorId)
    },
    methods:{
        ...mapMutations([
            'SET_CLEAR_VUEX'
        ]),
        backPre(){
            if(this.backMethod === 'inner') {
                this.$router.go(-1)
            } else {
                rocNative.goBack()
            }
        },
        goBack(){
            this.$emit('goBack');
            if (this.isWeb) {
                this.$router.go(-1)
            } else {
                rocNative.goBack();
            }
            this.SET_CLEAR_VUEX()

            rocNative.goBack();
        },
        share(){
            rocNative.shareWechat({
                title1:'个人评价',
                title2:'个人评价出现了喔',
                shareUrl:`${shareUrl}gpr#/home`+'?doctorId='+this.doctorId,
                type:6,
                shareImageUrl:'https://file.yunqueyi.com/logo.png?version='+new Date().getTime(),
                shareId:0
            })
            this.buryingPointShare();
        },
        //分享
        buryingPointShare:function(){
            rocNative.appBuryingPointEntrust({
                ...point_granking,
                functionCode:'f_gpranking',
                actionCode:'c_share',
                labelValue:'分享',
                createdTime:new Date().getTime()
            })
        },

    }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin';
    .wrapper{
        position:fixed;
        width:100%;
        z-index:100000000;
        /**************表头******************/
        .top-header{
            display:flex;
            display:-webkit-flex;
            flex-direction: row;
            // justify-content:center;//这个会整体居中，但是使用一些左右不等的margin时，会影响效果
            align-items:center;
            width:100%;
            height:px2rem(45px);//header高度
            margin-top:px2rem(25px);///////////statusbar高度!!!!!!!!!!!!!!!!!!!!!默认使用此高度
        }
        .top-header.active{
            // margin-top:0;
            border-bottom:px2rem(2px) solid #e7e7e7;
            background-color:#fff;
        }
        .top-header .left-icon{
            margin-left:px2rem(15px);
        }
        .top-header .title{
            // width:px2rem(116px);
            height:px2rem(18px);
            line-height:px2rem(18px);
            margin-left:px2rem(90px);
            text-align:center;
            color:#fff;
            font-size:px2rem(18px);
        }
        .top-header .title.active{
            color:#000;
        }
        .top-header .right-icon{
            margin-left:px2rem(95px);
        }
        .top-header .left-icon img,.top-header .right-icon img{
            display:block;//这样其外的div可以正好将其包裹住
            width:px2rem(25px);
            height:px2rem(25px);
        }
    }
    .wrapper.active{
            background-color:#fff;
            // background-color:rgba(0,0,0,0.84);
            // background-color:rgba(255,255,255,0.34)
    }
</style>

