<template>
  <header class="acce-header-render">
    <div class="header acce-header-render" id="header" :style="`padding-top:${common_data.appHeight}px`">
      <div v-if="!isback" class="back" @click="goBack"></div>
      <div v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
      <div class="title acce-header-render" v-html="name"></div>
      <div class="right"></div>
    </div>
  </header>
</template>

<script lang="ts">
// ,onMounted
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { get_localstorage,set_localstorage } from '@/common/js/utils'
export default {
  name: 'SimpleHeader',
  props: {
    name: {
      type: String,
      default: ''
    },
    back: {
      type: String,
      default: ''
    },
    noback: {
      type: Boolean,
      default: false
    }
  },
  emits: ['callback'],
  setup (props: any, ctx: any) {
    const isback = ref(props.noback);
    const router = useRouter();
    const store = useStore();
    const common_data = ref(store.state.common_data);
    const urlParams:any = new URLSearchParams(window.location.search);
    if(urlParams && urlParams.get("referrer")){
      let referrer = decodeURIComponent(urlParams.get("referrer"));
      if(referrer){
        set_localstorage("return_url",referrer);
      }
    }else if(document.referrer && document.referrer.indexOf('login') == -1 && 
              document.referrer.indexOf('user') == -1 && 
              document.referrer.indexOf('live2') == -1 && 
              document.referrer.indexOf('from_vue') == -1) {
        set_localstorage("return_url",document.referrer);
    }else if(!common_data.value.isApp && location.href.indexOf('/game') > -1){
        set_localstorage("return_url",'/');
    }
    
    if (common_data.value.isApp) {
      let appHeight = 30;
      if (common_data.value.isAndroid && (window as any).Android?.getStatusBarHeight) {
        appHeight = (window as any).Android?.getStatusBarHeight() || 30; 
      }else if (common_data.value.isIos && (window as any).ios?.navBarHeight) {
        appHeight = (window as any).ios.navBarHeight;
      }
      //一定牛中目前吴良建没有提供此方法，下面默认给35
      if(!(typeof appHeight === 'number') || (typeof appHeight === 'number' && appHeight <= 30)){
        appHeight = 35;
      }
      store.commit('updateAppHeight', appHeight);
    }
    const goBack = () => {
      //调用android原生方法
      if ((window as any).Android?.onFinish) {
        (window as any).Android?.onFinish();
        return;
      }else if ((window as any).Android?.onBack) {
        (window as any).Android?.onBack();
        return;
      }

      //返回没有back值的情况
      if (!props.back) {
        //其它路由进来的返回事件
        let return_url:any = get_localstorage()["return_url"];
        if(return_url){
          location.href = return_url;
          return;
        }else{
          router.go(-1);
        }
      } else {
        set_localstorage("return_url","");
        if (props.back.indexOf('ydn_back') > -1) {
          location.href = props.back;
          return;
        }
        router.push({ path: props.back });
      }
      ctx.emit('callback');
    };
    return {
      goBack,
      isback,
      common_data,
    };
  }
};
</script>

<style lang="scss" scoped>
/* 头部样式 */
.acce-header-render {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

header {
  width: 100%;
  position: fixed;
  z-index: 99;
  max-width: 769Px;
  color: #fff;
  height: 74px;
  top: 0;
}

.header {
  color: #fff;
  line-height: 44px;
  width: 100%;
  display: flex !important;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16px;
    text-align: center;
  }

  .back {
    height: 44px;
    line-height: 44px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 16px;
  }

  .back,
  .right {
    min-width: 30px;
  }

  .back:after {
    content: '';
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
</style>