/* 卡片优化需求： 独立返回按钮，由其它页面跳入时展示，新页面时不展示。
*  使用参考_pure_fe\e_global\modules\marketing_module\distribute\index.vue中goInviteCard方法
*          _pure_fe\e_pages\invite_card\invite_card\page.vue
*  特殊逻辑： 显示通过sessionStorage中show_return_btn字段控制，须在进入页面前设置show_return_btn的值为true
*  TODO：强制显示
*/
<template>
  <div ref="returnBtn" :class="['return-btn', btn_transition ? 'btn-transition' : 'dis-transition']" v-show="isShow" @click="pageBack">
  </div>
</template>

<script>
import {getQueryStr} from '~publicAsset/libs/utils.js';
export default {
  props: {
    showDelay: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showReturnBtn: false,
      btn_transition: false,
    };
  },
  computed: {
    // 是否为点击链接打开的网页
    isNewPage() {
      return window.history.length === 1 || document.referrer.length === 0;
    },
    isShow() {
      return this.showReturnBtn && !this.isNewPage;
    }
  },
  created() {
    // const showReturnBtn = sessionStorage.getItem('show_return_btn');
    // if (showReturnBtn !== null) {
    //   this.showReturnBtn = JSON.parse(showReturnBtn);
    //   sessionStorage.setItem('show_return_btn', false);
    // }    
    // show_retrun_btn
    const shouldShow = getQueryStr('show_retrun_btn') == '1';
    this.showReturnBtn = shouldShow;
    
  },
  mounted() {
    this.slideAnimation();
  },
  methods: {
    pageBack() {
      window.history.back();
    },
    slideAnimation() {
      setTimeout(() => {
        this.btn_transition = true;
      }, this.showDelay);
    }
  }
};
</script>

<style lang="scss" scoped>
.return-btn {
  position: fixed;
  cursor: pointer;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  background:rgba(0,0,0, 0.5);
  transition: all 0.3s linear;
  z-index:11;
  &::before {
    content: "";
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    border: 1px solid #fff;
    transform: rotate(45deg);
    border-right: transparent;
    border-top: transparent;
    position: absolute;
    top: 0.16rem;
    left: 0.22rem;
  }
}

.dis-transition {
  opacity: 0;
  transform: translateX(0.3rem);
}

.btn-transition {
  opacity: 1;
  transform: translateX(0);
}

// 预留特效
@keyframes twinkled
{

}
</style>