<template>
	<header>
		<div class="status" :class="[barClass]" :style="{height: statusBarHeight + 'Px'}"></div>
		<!-- <div class="head-wrap" :class="{'bgfff': isScroll}" :style="{height: titleHeight + 'px'}"> -->
    <div class="head-wrap" :class="{'bgfff': isScroll}">
			<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: {
      isOpacity: { // 是否需要透明背景
        type: Boolean,
        default: true
      },
    	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
    	},
      isCheckAuth: { // 是否校驗權限
        type: Boolean,
        default: false
			},
			isStageTwoHomePage: { // 是否是二期主页面
				type: Boolean,
        default: false
			},
    },
    data(){
    	return {
        barClass: '',
    		// bgColor: '',
    		leftIcon: leftimg1,
    		rightIcon: rightimg1,
    		isScroll: false,
    		statusBarHeight: 20, // 给一个默认值，20 * 2 
    		titleHeight: 44 // title高度默认是44px
    	}
    },
    created(){
      if(process.client){
        this.setHeaderHeight();
      }
    },
    mounted(){
      this.isScroll = !this.isOpacity;
  		
  		if(!this.setedScroll){
  			this.scrollHandleOwn();
  		}
    },
    watch: {
    	scrollVal(val){
    		this.setScrollHandle(val);
    	},
      isScroll(val){
        if(val){
          this.leftIcon = leftimg2;
          this.rightIcon = rightimg2;
          this.barClass = this.$rocNative.isIOS ? 'bgfff' : 'bg5c5c5c';
        }else{
          this.barClass = this.isOpacity ? '' : 'bg5c5c5c';
        }
      }
    },
    methods: {
    	// 从APP获取电池栏高度并设置高度
    	setHeaderHeight(){
        this.$rocNative.getStatusBarHeight().then(res=>{
          const dpr = window.devicePixelRatio;
          if(this.$rocNative.isIOS && res.homeIndicatorHeight && res.statusBarHeight===0){
            this.statusBarHeight = 44;
          }else{
            this.statusBarHeight = this.$rocNative.isIOS ? res.statusBarHeight: res.statusBarHeight / dpr;
          }
          this.$emit('getHeaderHeight', this.statusBarHeight + 44);
        })
    	},
    	goBack(){
				if(this.isStageTwoHomePage){
					this.$sendBuriedData({
						component_tag: `302#302002`
					});
				}else{
					this.$sendBuriedData({
						component_tag: `301#301002`
					});
				}
    		this.$rocNative.goBack();
    	},
    	goShare(){
				if(this.isStageTwoHomePage){
					this.$sendBuriedData({
						component_tag: `302#302001`
					});
				}else{
					this.$sendBuriedData({
						component_tag: `301#301001`
					});
				}
        if(this.isCheckAuth){
          this.$emit('checkAuth', ()=>{
            this.$rocNative.shareWechat(this.shareObj);
          })
        }else{
          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(this.isOpacity){
          if (instval >= this.baseShowHeight) {
            this.isScroll = true;
            this.leftIcon = leftimg2;
            this.rightIcon = rightimg2;
          } else {
            this.isScroll = false;
            this.leftIcon = leftimg1;
            this.rightIcon = rightimg1;
          }
        }else{
          this.isScroll = true;
          this.leftIcon = leftimg2;
          this.rightIcon = rightimg2;
        }
    	}
    }
  }
</script>

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