<template>
	<header>
		<div class="status" :class="{'bgfff': isScroll}" :style="{height: statusBarHeight + 'px'}"></div>
		<div class="head-wrap" :class="{'bgfff': isScroll}" :style="{height: titleHeight + 'px'}">
			<img @click="goBack" :src="leftIcon">
			<span v-if="isScroll">{{title}}</span>
			<img @click="goShare" :src="rightIcon">
		</div>
	</header>
</template>

<script>
	import leftimg1 from './left-array.png';
	import rightimg1 from './share-icon.png';
	import leftimg2 from './left-icon.png';
	import rightimg2 from './right-icon.png';

	export default {
    name: 'h5header',
    props: {
    	scrollVal: {
    		type: Number,
    		default: 0
    	},
    	title: {
    		type: String,
    		default: '云鹊医-赋能基层医生'
    	},
    	shareObj: {
    		type: Object,
    		default: {}
    	}
    },
    data(){
    	return {
    		leftIcon: leftimg1,
    		rightIcon: rightimg1,
    		isScroll: false,
    		statusBarHeight: 40, // 给一个默认值，20 * 2 
    		titleHeight: 44 // title高度默认是44px
    	}
    },
    mounted(){
  		this.$rocNative.getStatusBarHeight().then(res=>{
  			const dpr = window.devicePixelRatio;
    		if(this.$rocNative.isIOS){
          this.statusBarHeight = res.statusBarHeight * dpr;
          this.titleHeight = this.titleHeight * dpr;
        }else{
          this.statusBarHeight = res.statusBarHeight / dpr;
        }
    	})
    },
    watch: {
    	scrollVal(val){
    		if (val > 25) {
					this.isScroll = true;
					this.leftIcon = leftimg2;
    			this.rightIcon = rightimg2;
				} else {
					this.isScroll = false;
					this.leftIcon = leftimg1;
    			this.rightIcon = rightimg1;
				}
    	}
    },
    methods: {
    	goBack(){
    		this.$rocNative.goBack();
    	},
    	goShare(){
    		this.$rocNative.shareWechat(this.shareObj);
    	}
    }
  }
</script>

<style lang="less">
    @import './index.less';
</style>
