<template>
  <div class="open-container" :class="{'opened': opened}" v-if="showAnimation">
    <div class="bg rotate"></div>
    <div class="mod-chest">
        <div class="chest-close" :class="{'shake': shake, 'show': showChest}">
          <div class="gift" @tap="click"></div>
        </div>
        <div class="chest-open" :class="{'show': show, 'blur': blur}">
          <div class="dialog" :class="{'fail-dialog': !isWin}">
            <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="fail-content" v-if="!isWin">
              <div class="des">很遗憾，未中奖</div>
              <div class="des">感谢您的参与!</div>
            </div>
            <div class="success-content" v-if="isWin">
              <div class="des">恭喜您中奖!</div>
              <image class="image" :src="joinRecord.prize.photoUrl" mode="aspectFill"></image>
              <div class="name">{{joinRecord.prize.name}}</div>
            </div>
            <div class="dialog-footer">
              <button class="btn" @tap="go">立即查看</button>
              <button class="btn" @tap="hideAnimation">再次挑战</button>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
  import wepy from '@wepy/core';

  wepy.component({
    props: {
      joinRecord: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data: {
      showAnimation: true,
      showChest: true,
      shake: false,
      show: false,
      blur: false,
      opened: false
    },
    computed: {
      isWin() {
        if (!this.joinRecord.id) return false;
        return +this.joinRecord.status.value === 3;
      }
    },
    methods: {
      click: function() {
        this.shake = true;
        setTimeout(() => {
          this.opened = true;
          setTimeout(() => {
            const innerAudioContext = wx.createInnerAudioContext();
            innerAudioContext.autoplay = true;
            innerAudioContext.src = '/static/audio/winning.mp3';
            innerAudioContext.onPlay(() => {
              console.log('开始播放');
            });
            innerAudioContext.onError((res) => {
              console.log(res.errMsg);
              console.log(res.errCode);
            });
            this.showChest = false;
            this.blur = true;
            this.show = true;
          }, 500);
        }, 2000);
      },
      hideAnimation() {
        this.showAnimation = false;
      },
      go() {
        this.showAnimation = false;
        // 如果得奖了去领奖，否则去我的抽奖页面
        if (this.isWin) {
          wx.navigateTo({url: '/pages/prize?joinRecordId=' + this.joinRecord.id});
        } else {
          wx.navigateTo({url: '/pages/myraffles'});
        }
      }
    },
    created() {
      // setTimeout(() => {
      this.showAnimation = true;
      // this.click();
      // }, 1000);
    }
  });
</script>
<style lang="less">
  .open-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    .opened {
      opacity: 1;
    }
    .bg{
      position: absolute;
      z-index: 1;
      background:url('http://activitystatic.xyqb.com/light.png') 57% 60%/contain no-repeat;
      width:100%;
      height:100%;
    }
    .rotate{
      -webkit-animation: rotate 10s  infinite  linear;
    }
    .mod-chest {
      position: relative;
      width: 100%;
      height: 270rpx;
      .chest-close {
        width: 100%;
        height:270rpx;
        opacity: 0;
        position: relative;
        z-index: 1;
        position: absolute;
        display: flex;
        justify-content: center;
        .gift {
          width: 500rpx;
          height:216rpx;
          background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0rpx 0rpx;
          background-size: 500rpx auto;
          position: absolute;
          z-index: 2;
        }
        &:active {
          -webkit-transform:scale(1.05);
          -webkit-transition:all .3s;
        }
        &:after {
          width: 640rpx;
          height:600rpx;
          position: absolute;
          top:-200rpx;
          left:-122rpx;
          content:"";
          display: block;
        }
      }
      .chest-close.shake {
        .gift {
          -webkit-animation:shake 2s linear;
          -webkit-animation-fill-mode:forwards;
        }
      }
      .chest-open {
        width: 100%;
        height:270rpx;
        opacity: 0;
        z-index: 1;
        position: absolute;
        top: 200rpx;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        .dialog {
          position: absolute;
          top:-460rpx;
          width: 500rpx;
          height: 500rpx;
          border-radius: 20rpx;
          color: #fff;
          background: linear-gradient(#FF5D15 5%, #FDA13E 60%, rgba(255, 255, 255, 0.8) 100%),
          ;
          padding: 39rpx 40rpx 0rpx 40rpx;
          z-index: 10;
          .star {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            .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);
              }
            }
          }
          .fail-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 235rpx;
            .des {
              font-size: 40rpx;
              z-index: 11;
            }
          }
          .success-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .des {
              font-size: 40rpx;
            }
            .image {
              width: 200rpx;
              height: 200rpx;
              border-radius: 50%;
              margin: 22rpx auto;
              z-index: 11;
            }
            .name {
              width: 200rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 24rpx;
              text-align: center;
            }
          }
          .dialog-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 158rpx;
            z-index: 11;
            .btn {
              font-size: 24rpx;
              width: 160rpx;
              height: 70rpx;
              line-height: 70rpx;
              border: 1rpx solid #FF5D15;
              z-index: 11;
              border-radius: 10rpx;
              &:after {
                 border: none;
              };
              &:nth-child(1) {
                background: #fff;
                color: #FF5D15;
              }

              &:nth-child(2) {
                background: #FF5D15;
                color: #fff;
              }
            }
          }
        }

        .fail-dialog {
          height: 400rpx;
          top: -370rpx;
          .star {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            .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: 33rpx;
                left: 349rpx;
                width: 58rpx;
                height: 58rpx;
                transform: rotateZ(16deg);
                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(5rpx);
              }
              &: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);
              }
            }
          }
        }

        .mod-chest-cont {
          position: absolute;
          background: url('http://activitystatic.xyqb.com/open-bg-top.png') center top  no-repeat, url('http://activitystatic.xyqb.com/open-bg-bottom.png') center bottom  no-repeat;
          background-size: 552rpx auto;
          width:552rpx;
          z-index: 2;
          top:-302rpx;
          padding:40rpx 0rpx 60rpx;
          text-align: center;
          overflow: hidden;
          opacity: 0;
          -webkit-transform:translate(0rpx,60rpx);
          z-index: 9;
          -webkit-animation-fill-mode: forwards;
          &:before{
            width:100%;
            position: absolute;
            top:24rpx;
            bottom:160rpx;
            left:0rpx;
            content:"";
            background:#fff;
            border-left:#e59c00 2rpx solid;
            border-right:#e59c00 2rpx solid;
            box-sizing:border-box;
          }
          .content{
            position: relative;
            z-index: 2;
            text-align: center;
            font-size: 22rpx;
            padding-bottom: 20rpx;
            .gift-image {
              width: 140rpx;
              height: 140rpx;
              padding: 10rpx 0;
            }
          }
          .func{
            display: flex;
            justify-content: space-between;
            .chest-btn{
              width: 146rpx;
              display: inline-block;
              color: #fff;
              background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));
              height: 50rpx;
              line-height: 50rpx;
              border-radius: 6rpx;
              font-size: 22rpx;
              &:active{
                background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
              }
            }
          }
        };
      }
      .chest-open.show {
        .mod-chest-cont {
          -webkit-animation:move2 .5s .0s linear;
          -webkit-animation-fill-mode: forwards;
        }

        .dialog {
          -webkit-animation:move2 .5s .0s linear;
          -webkit-animation-fill-mode: forwards;
        }
      }
      .blur{
        &:after {
          width: 500rpx;
          height: 240rpx;
          background: url('http://activitystatic.xyqb.com/chest-open-blur.png') no-repeat 0rpx 0rpx;
          background-size: 500rpx auto;
          z-index: 1;
          position: absolute;
          content:"";
          display: block;
        }
      }
      .show{
        z-index: 2;
        opacity: 1;
      }
    }
  }

  @-webkit-keyframes shake {
    0% {
      transform: scale(1);
      -webkit-transform: scale3d(1, 1, 1);

    }

    // 3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%{
    //   -webkit-transform: scale(1.1) rotate(8deg);
    //   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);

    // }

    // 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%{
    //   -webkit-transform: scale(1.1) rotate(-8deg);
    //   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);

    // }

    6%, 18%, 30%, 42%, 54%, 66%{
      -webkit-transform: scale(1.1) rotate(8deg);
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);

    }

    12%, 24%, 36%, 48%, 60%, 72%{
      -webkit-transform: scale(1.1) rotate(-8deg);
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);

    }
    78%{
      -webkit-transform: scale(1);
      -webkit-transform: scale3d(1, 1, 1);
    }

    80%{
      -webkit-transform: scale(1);
      -webkit-transform: scale3d(1, 1, 1);
    }

    81% {
      -webkit-transform: scale(1) translate(0rpx, 0rpx);
    }

    90% {
      -webkit-transform: scale(1) translate(0rpx,200rpx);
      // -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,61rpx,0);
    }
    95% {
      -webkit-transform: scale(1) translate(0rpx,180rpx);
      // -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,400rpx,0);
    }
    100% {
      -webkit-transform: scale(1) translate(0rpx,200rpx);
      // -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,61rpx,0);
    }
  }

  @-webkit-keyframes rotate {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
  }
  @-webkit-keyframes move2 {
    0% {
       -webkit-transform:translate(0rpx,60rpx);
       opacity: 0;
    }
    70% {
       -webkit-transform:translate(0rpx,-40rpx);
       opacity: 1;
    }
    100% {
       -webkit-transform:translate(0rpx,0rpx);
       opacity: 1;
    }
  }
</style>
<config>
{
    usingComponents: {
      'van-button': '~@/components/vant/button/index'
    }
}
</config>
