<template>
  <div class="activate-btn__container">
    <div class="activate-btn" :class="{ 'activate-btn--sticky': stickyBottom }">
      <cr-image
        class="btn"
        src="@/assets/images/maxMember/activate-btn.png"
        width="96vw"
        height="auto"
        @click="navTo"
      />
      <!-- <cr-button type="primary" shape="circle" size="large" block @click="navTo">
        限时免费开通
      </cr-button> -->
    </div>
    <cr-back-top ref="backTop" :distance="670" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      stickyBottom: false
    };
  },
  mounted() {
    // 复用back-top中的滚动事件,通过监听refs的数据变化实现
    this.$watch(
      () => {
        return this.$refs.backTop.show;
      },
      val => {
        this.stickyBottom = val;
      }
    );
  },
  methods: {
    navTo() {
      this.$track.registeredEvents('H5_MaxMemberOpenPageOpenedBtnClick');
      this.$emit('show-qrcode');
      // window.location.href = '/member/maxMember';
      // this.$router.push({ path: '/member/maxMember' });
    }
  }
};
</script>
<style lang="less" scoped>
.activate-btn {
  &__container {
    margin: @padding-sm auto;
    // height: 52px;
  }
  // .cr-button {
  //   height: 52px;
  //   background: linear-gradient(90deg, #f63038 0%, #ff8f70 100%);
  //   box-shadow: 0px 5px 6px 0px rgba(100, 0, 22, 0.13);
  //   letter-spacing: 0.63px;
  //   .text-size(20px);
  //   @{deep} .cr-button__text {
  //     font-weight: bold;
  //   }
  // }
  &--sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: @white;
    z-index: 101;
    padding: @padding-sm @padding-lg;
  }
}
.btn {
  margin-left: -1.6vw;
}
</style>
