<template>
  <div class="activate-card" :class="{ 'out-date': isOutDate }">
    <div class="activate-card__head">
      {{ title }}
    </div>
    <div v-if="!isActivate" class="activate-card__content">
      <div v-if="!isOutDate" class="activate-card__content__phone">
        <span class="activate-card__content__phone__label">激活手机号</span>
        <span class="activate-card__content__phone__value">{{ mobile }}</span>
        <!-- <span class="activate-card__content__phone__option" @click="changePhone">更换手机号</span> -->
      </div>
      <div v-if="errorTip" class="activate-card__content__tip">{{ errorTip }}</div>
    </div>
    <div class="activate-card__foot">
      <cr-button type="primary" shape="circle" size="large" block @click="handleClick">
        {{ btnState }}
      </cr-button>
    </div>
  </div>
</template>
<script>
import { formatMaskPhone } from '@/service/utils.service';
import wx from 'weixin-js-sdk';
import { isWxMp, isApp } from '@/service/validation.service';

const ACTIVATE = 0; // 授权页
const NO_INVITE = 1; // 授权未邀请
const NO_ADD_WEIXIN = 2; // 已邀请为加微信
const OUT_DATE = 4; // 已邀请为加微信
export default {
  props: {
    currentState: {
      type: Number,
      default: ACTIVATE
    },
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    errorTip() {
      const txtMap = {
        [NO_INVITE]: '抱歉，暂无受邀资格',
        [NO_ADD_WEIXIN]: '需要添加企业微信才能激活',
        [OUT_DATE]: '您的MAX会员已过期'
      };
      return txtMap[this.currentState];
    },
    isActivate() {
      return this.currentState === ACTIVATE;
    },
    isOutDate() {
      return this.currentState === OUT_DATE;
    },
    title() {
      return this.isActivate ? '授权微信' : this.isOutDate ? 'MAX会员' : 'MAX会员激活';
    },
    btnState() {
      const txtMap = ['一键授权', '随便逛逛', '立即添加', '', '随便逛逛'];
      return txtMap[this.currentState];
    },
    mobile() {
      if (!this.info.mobile) {
        return '-';
      }
      return formatMaskPhone(this.info.mobile);
    }
  },

  methods: {
    handleClick() {
      // 随便逛逛，跳转到商品区域
      if (this.currentState === NO_INVITE || this.currentState === OUT_DATE) {
        this.$track.registeredEvents('H5_MaxMemberInvitedOpenPageBrowsingClick');
        if (isWxMp) {
          wx.miniProgram.switchTab({
            url: `/pages/index/index`
          });
        }
        if (isApp) {
          this.$bridge.openNewUrl({
            data: {
              newUrl: 'xyqb://homepage'
            }
          });
        }
        // 未添加微信展示qrcode
      } else if (this.currentState === NO_ADD_WEIXIN) {
        this.$emit('show-qrcode');
        // 小程序一键授权
      } else {
        isWxMp &&
          wx.miniProgram.navigateTo({
            url: `/pages/webview/middleWay?event=getToken&clear=true`
          });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.activate-card {
  background-color: fade(@white, 70%);
  padding: 0 @padding-sm;
  margin: @padding-sm auto;
  border-radius: @border-radius-lg;
  &__head {
    width: 100%;
    background: url('~@/assets/images/maxMember/activation-title-bg.png') top center no-repeat;
    background-size: contain;
    .text-size(16px);
    font-weight: 500;
    color: #001746;
    text-align: center;
    padding-top: @padding-xs;
    height: 30px;
    margin-bottom: 23px;
  }
  &__content {
    .text-size(16px);
    padding-bottom: @padding-sm;
    &__phone {
      background-color: fade(#f3f4f5, 69%);
      border-radius: @border-radius-lx + 4;
      padding: @padding-sm;
      display: flex;
      align-items: center;
      justify-content: center;
      &__label {
        color: @gray-4;
      }
      &__value {
        color: @black;
        margin: 0 @padding-xs 0 @padding-md;
      }
      &__option {
        color: @gray-5;
        margin-left: auto;
      }
    }
    &__tip {
      margin-top: @padding-unit;
      color: #f63038;
      text-align: center;
    }
  }
  &__foot {
    padding-bottom: 26px;
    .cr-button {
      background: linear-gradient(90deg, #f63038 0%, #ff8f70 100%);
      box-shadow: 0px 5px 6px 0px rgba(100, 0, 22, 0.13);
      letter-spacing: 0.63px;
    }
    @{deep} .cr-button__text {
      font-weight: bold;
    }
  }
  &.out-date {
    .activate-card__head {
      margin-bottom: @padding-sm;
    }
    .activate-card__foot {
      padding-bottom: @padding-md - 2;
    }
  }
}
</style>
