<template>
  <div class="share-container">
    <div class="dialog">
      <div class="star">
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
        <image class="star-image" src="/static/images/star@2x.png"></image>
      </div>
      <div class="gold">
        <image class="gold-image" src="/static/images/gold-bg@2x.png"></image>
        <image class="gold-image" src="/static/images/gold-bg@2x.png"></image>
        <image class="gold-image" src="/static/images/gold-bg@2x.png"></image>
        <image class="gold-image" src="/static/images/gold-bg@2x.png"></image>
      </div>
      <div class="content">
        <div class="des">恭喜您!</div>
        <image class="image" src="/static/images/gold@2x.png"></image>
        <div class="info">通过邀请以下好友,您获得{{goldNum}}克币</div>
        <div class="user" :class="{'one-user': inviteinfo.length === 1 }">
          <image class="user-img" v-for="item in users" :src="item.avatarUrl"></image>
          <span class="user-rest" v-if="inviteinfo.length > 3">...</span>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn" @tap="getGold">立即领取</button>
      </div>
    </div>
  </div>
</template>
<script>
  import wepy from '@wepy/core';

  wepy.component({
    props: {
      inviteinfo: {
        type: Array
      }
    },
    computed: {
      goldNum() {
        return this.inviteinfo.reduce((p, n) => {
          p += +n.quantity;
          return p;
        }, 0);
      },
      users() {
        return this.inviteinfo.slice(0, 3);
      },
      ids() {
        return this.inviteinfo.reduce((p, n) => {
          p.push(n.accountItemId);
          return p;
        }, []);
      }
    },
    methods: {
      getGold: function() {
        this.$emit('getSharedGold', {
          itemIdList: this.ids.join(','),
          quantity: this.goldNum
        });
      }
    }
  });
</script>
<style lang="less">
	.share-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    .dialog {
      position: relative;
      width: 530rpx;
      height: 530rpx;
      border-radius: 20rpx;
      color: #fff;
      background: linear-gradient(#E6401F, #FDA13E),
      ;
      padding: 39rpx 40rpx 0rpx 40rpx;
      z-index: 10;
      .star {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: url('http://activitystatic.xyqb.com/light-1@2x.png') 0% 0%/contain no-repeat;
        .star-image {
          &:nth-child(1) {
            position: absolute;
            top: 120rpx;
            left: 32rpx;
            width: 86rpx;
            height: 86rpx;
          }
          &:nth-child(2) {
            position: absolute;
            top: 70rpx;
            left: 121rpx;
            width: 55rpx;
            height: 55rpx;
            transform: rotateZ(20deg);
            filter: blur(5rpx);
          }
          &:nth-child(3) {
            position: absolute;
            top: 110rpx;
            left: 349rpx;
            width: 58rpx;
            height: 58rpx;
            transform: rotateZ(30deg);
            filter: blur(3rpx);
          }
          &:nth-child(4) {
            position: absolute;
            top: 89rpx;
            left: 471rpx;
            width: 50rpx;
            height: 50rpx;
            transform: rotateZ(15deg);
            filter: blur(5rpx);
          }
          &:nth-child(5) {
            position: absolute;
            top: 250rpx;
            left: 14rpx;
            width: 50rpx;
            height: 50rpx;
            transform: rotateZ(25deg);
            filter: blur(6rpx);
          }
          &:nth-child(6) {
            position: absolute;
            top: 223rpx;
            left: 145rpx;
            width: 57rpx;
            height: 57rpx;
            transform: rotateZ(23deg);
            filter: blur(3rpx);
          }
          &:nth-child(7) {
            position: absolute;
            top: 223rpx;
            left: 391rpx;
            width: 68rpx;
            height: 68rpx;
            transform: rotateZ(20deg);
            filter: blur(2rpx);
          }
          &:nth-child(8) {
            position: absolute;
            top: 318rpx;
            left: 494rpx;
            width: 51rpx;
            height: 51rpx;
            transform: rotateZ(15deg);
            filter: blur(5rpx);
          }
        }
      }
      .gold {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        .gold-image {
          &:nth-child(1) {
            position: absolute;
            top: 227rpx;
            left: -51rpx;
            width: 78rpx;
            height: 78rpx;
          }
          &:nth-child(2) {
            position: absolute;
            top: -38rpx;
            left: 180rpx;
            width: 56rpx;
            height: 56rpx;
            filter: blur(3rpx);
          }
          &:nth-child(3) {
            position: absolute;
            top: 85rpx;
            left: 580rpx;
            width: 86rpx;
            height: 86rpx;
            filter: blur(2px);
          }
          &:nth-child(4) {
            position: absolute;
            top: 380rpx;
            left: 560rpx;
            width: 98rpx;
            height: 98rpx;
            filter: blur(2rpx);
          }
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .des {
          font-size: 40rpx;
        }
        .image {
          width: 150rpx;
          height: 164rpx;
          margin: 29rpx auto;
          z-index: 11;
        }
        .info {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
          text-align: center;
        }
        .user {
          height: 84rpx;
          width: 210rpx;
          line-height: 84rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          .user-img {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
          }
          .user-rest {
            position: absolute;
            bottom: 11rpx;
            right: -46rpx;
          }
        }
        .one-user {
          justify-content: center;
        }
      }
      .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 120rpx;
        z-index: 11;
        .btn {
          font-size: 30rpx;
          width: 200rpx;
          height: 70rpx;
          line-height: 70rpx;
          z-index: 11;
          border-radius: 10rpx;
          background: #FF5D15;
          color: #FFF;
          &:before {
            content: '';
            width: 73rpx;
            height: 43rpx;
            position: absolute;
            background: url('http://activitystatic.xyqb.com/btn-shadow@2x.png') center center/contain no-repeat;
            top: 3rpx;
            left: 4rpx;
          };
        }
      }
    }
  }
</style>
