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


      <div class="item count-wrapper">
        <div >
          <div class="count">22</div>
          <div class="tip">已经邀请好友</div>
        </div>

        <div >
          <div class="count">325</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">
           立即入驻
         </div>
       </div>
     </template>
  </div>
</template>

<script>

import ClipboardJS from 'clipboard';

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

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

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

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

  },
  methods: {
  }
};
</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 {
  color: black;
  font-size: 28px;
  font-weight: bold;
}

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

.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;
  justify-content: space-around;
}

.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>