<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: 25
    	},
    	title: { // 头部 title
    		type: String,
    		default: '云鹊医-赋能基层医生'
    	},
    	shareObj: { // 分享的参数
    		type: Object,
    		default: {
    			shareUrl:'',
					title1:'',
					title2:'',
					shareImageUrl:'',
    		}
    	},
    	baseShowHeight: { // 需要进行滚动交互的阈值
    		type: Number,
    		default: 25, 
    	} ,
    	setedScroll: { // 是否使用外部父组件的scroll事件
    		type: Boolean,
    		default: false
    	}
    },
    data(){
    	return {
    		leftIcon: leftimg1,
    		rightIcon: rightimg1,
    		isScroll: false,
    		statusBarHeight: 20, // 给一个默认值，20 * 2 
    		titleHeight: 44 // title高度默认是44px
    	}
    },
    mounted(){
  		this.setHeaderHeight();
  		if(!this.setedScroll){
  			this.scrollHandleOwn();
  		}
    },
    watch: {
    	scrollVal(val){
    		this.setScrollHandle(val);
    	}
    },
    methods: {
    	// 从APP获取电池栏高度并设置高度
    	setHeaderHeight(){
    		this.statusBarHeight = 20 * window.devicePixelRatio; // 给一个默认值，20 * 2 
    		this.titleHeight = 44 * window.devicePixelRatio; // title高度默认是44px
    		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;
	        }
	    	})
    	},
    	goBack(){
    		this.$rocNative.goBack();
    	},
    	goShare(){
    		this.$rocNative.shareWechat(this.shareObj);
    	},
    	// 默认滚动事件
    	scrollHandleOwn(){
    		let bodyScrollTop = 0, documentScrollTop = 0;
	    	window.onscroll = () => {
	    		if(document.body){
		        bodyScrollTop = document.body.scrollTop;
		      }
		      if(document.documentElement){
		        documentScrollTop = document.documentElement.scrollTop;
		      }
	        const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
	        const scrollVal = bodyScrollTop || documentScrollTop;
	        this.setScrollHandle(scrollVal);
		    }
    	},
    	// 交互事件
    	setScrollHandle(instval){
    		if (instval >= this.baseShowHeight) {
					this.isScroll = true;
					this.leftIcon = leftimg2;
    			this.rightIcon = rightimg2;
				} else {
					this.isScroll = false;
					this.leftIcon = leftimg1;
    			this.rightIcon = rightimg1;
				}
    	}
    }
  }
</script>

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