<template>
   <div class="wrapper">
     <template v-if="data.showInviteCode">
      <div class="item title mg4">我的邀请码</div>
      <div class="item code mg3">{{data.showInviteCode}}</div>

       <div class="item mg2">
         <div class="btn copy">
           复制
         </div>
       </div>

      <div class="item count-wrapper">
        <div class="count-item">
          <div class="count">{{data.inviteeUidNum}}</div>
          <div class="tip">已邀请好友数</div>
        </div>

        <div class="count-item">
          <div class="count">{{data.finishedOrderNum}}</div>
          <div class="tip">好友完成订单数</div>
        </div>
      </div>

     </template>

     <template v-else>
       <div class="item mg5">
         <div class="tip2">您还未入驻</div>
         <div class="tip2">请先入驻获得邀请码</div>
       </div>
       <div class="item mg2">
         <div class="btn" @click="onClick">
           立即入驻
         </div>
       </div>
     </template>
  </div>
</template>

<script>

import ClipboardJS from 'clipboard';
import {get} from 'lodash';

export default {
  name: 'InviteCode',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  mounted() {
    let vm = this;

    this.clipboard = new ClipboardJS(this.$el.getElementsByClassName('copy'), {
      text: () => {
        return this.data.showInviteCode;
      }
    });

    this.clipboard.on('success', function() {
      vm.$createToast({
        type: 'text',
        txt: '复制成功'
      }).show();
    });

    this.clipboard.on('error', function() {
      vm.$createToast({
        type: 'text',
        txt: '复制失败'
      }).show();
    });

  },
  methods: {
    async onClick() {
      const result = await this.$store.dispatch('license/form/getStoreStatus', null, { root: true});

      if (result.data === true || get(result, 'data.isStoredSeller', false)) {
        this.$yoho.goPage('go.ufo', {
          pagename: 'merchantsSettled',
          isnavhidden: 1,
          disabledSwiper: 1
        });
      } else if (result.data.storedBefore) {
        this.$createToast({
          txt: '您已退出入驻，没有入驻资格',
          type: 'warn',
        }).show();
      } else {
        this.$yoho.goPage('go.ufo', { pagename: 'MerchantEntry' });
      }

      this.$root.reportApp('', 'BUSINESS_PLAN_A_EVENT', {
        locfun: 'click:storeNow'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 650px;
  height: 504px;
  text-align: center;
  overflow: hidden;
  background: url("~statics/image/invite/invite_bg@3x.png");
  background-size: cover;
}

.item {
  margin-top: 40px;
}

.title {
  height: 40px;
  line-height: 40px;
  color: black;
  font-size: 28px;
  font-weight: bold;
}

.code {
  height: 94px;
  color: black;
  font-weight: bolder;
  font-size: 80px;
  letter-spacing: 4px;
  line-height: 94px;
}

.mg2 {
  margin-top: 20px;
}

.mg3 {
  margin-top: 12px;
}

.mg4 {
  margin-top: 84px;
}

.mg5 {
  margin-top: 116px;
  margin-bottom: 54px;
}

.btn {
  display: inline-block;
  width: 464px;
  height: 100px;
  color: white;
  background-color: #08304b;
  font-size: 28px;
  line-height: 100px;
}

.count-wrapper {
  display: flex;
  overflow: hidden;
  margin: 40px auto;
  width: 550px;
  justify-content: space-around;
}

.count-item {
  width: 232px;
  height: 80px;
}

.count {
  font-size: 28px;
  height: 40px;
  line-height: 40px;
}

.tip {
  font-size: 22px;
  color: #999;
  height: 32px;
  line-height: 32px;
}

.tip2 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 12px;
}
</style>