<template>
  <div class="share-container" @tap="hideMenu" >
    <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">通过邀请以下好友,您获得15克币</div>
        <div class="user">
          <image class="user-img" src="/static/images/test1.jpg"></image>
          <image class="user-img" src="/static/images/test1.jpg"></image>
          <image class="user-img" src="/static/images/test1.jpg"></image>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn" @tap="go">立即领取</button>
      </div>
    </div>
  </div>
</template>
<script>
  import wepy from '@wepy/core';

  wepy.component({
    props: {
      showMenus: {
        type: Boolean,
        default: false
      }
    },
    data: {
      menus: [
        { img: '/static/images/awards@2x.png', title: '我的抽奖', path: '/pages/awards' },
        { img: '/static/images/feedback@2x.png', title: '规则与帮助', path: '/pages/feedback' },
        { img: '/static/images/help@2x.png', title: '问题反馈', path: '/pages/help' }
      ],
      show: false,
      popupStyle: ''
    },
    watch: {
      showMenus(v) {
        if (!v) {
          setTimeout(() => {
            this.show = false;
          }, 300);
        } else {
          this.show = true;
        }
      }
    },
    computed: {
      hide() {
        return !this.showMenus;
      }
    },
    methods: {
      getAwards: function() {
        this.show = false;
      }
    }
  });
</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%;
          }
          &:after {
            content: '...';
            position: absolute;
            bottom: -5rpx;
            right: -46rpx;
          }
        }
      }
      .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>
