<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="goBack()">
                <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 && isJSJ" class="content title" :class="{active:isScroll}">讲师集</div>
            <div v-if="isScroll && !isJSJ" class="content title" :class="{active:isScroll}">云鹊医讲师</div>
            <!-- <div 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 {teacher_back} from '../../utils/buryingPoint.js';
// 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
        },
        isShare:{
            type:Boolean,
            default:true
        },
        doctorId:{
            type:String,
            default:""
        },
        backMethod: {
            type: String,
            default: 'native'   
        },
        isJSJ: {
            type: Boolean,
            default: true   
        }
    },
    computed: {
        topTitle2() {
            return this.topTitle
        }
    },
    mounted(){
        // console.log(this.isShare);
        console.log(shareUrl);
        console.log(`${shareUrl}`+'?doctorId='+this.doctorId)
    },
    methods:{
        // backPre(){
        //     if(this.backMethod === 'inner') {
        //         this.$router.go(-1)
        //     } else {
        //         rocNative.goBack()
        //     }
        // },
        goBack(){
            if(this.backMethod === 'inner') {
                this.$router.go(-1)
            } else {
                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();
        },
        /////////埋点//////////
        //返回
        buryingPointBack:function(){
            rocNative.appBuryingPointEntrust({
                ...teacher_back,
                functionCode:'f_gpranking',
                actionCode:'c_back',
                labelValue:'返回',
                createdTime:new Date().getTime()
            })
        },
        //分享
        buryingPointShare:function(){
            rocNative.appBuryingPointEntrust({
                ...teacher_back,
                functionCode:'f_gpranking',
                actionCode:'c_share',
                labelValue:'分享',
                createdTime:new Date().getTime()
            })
        },

    }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin';
    .wrapper{
        position:fixed;
        top: 0;
        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>

