<template>
    <div style="{{containerStyle}}" class="icon-container">
      <star-animation v-if="flyAnimation"></star-animation>
      <div class="sign" v-if="type === 'sign'" @tap="signIn">
        <image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !sign, 'fly': sign}" ></image>
        <image  class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image>
        <div class="sign-shine" v-if="!sign"></div>
        <div class="sign-shadow" v-if="!signComplete"></div>
        <span class="title">{{des}}</span>
      </div>
      <div v-if="type === 'gold'" class="gold">
        <div class="add-gold" v-if="addGold">
          <image class="add-gold-image" :src="addGoldUrl"></image>
          <span class="add-gold-num">+{{addGoldNum}}</span>
        </div>
        <div class="show-gold" @tap="showAnimation">
          <div class="sunshine" v-if="addsunshine"></div>
          <image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl"></image>
          <span class="show-gold-num">
            {{des}}
          </span>
        </div>
      </div>
      <div v-if="type === 'share'" class="share">
        <button open-type="share" plain="true" class="share-button">
          <image class="share-image" :src="shareUrl"></image>
        </button>
        <span class="title">{{des}}</span>
      </div>  
      <div v-if="type === 'lottery'" class="lottery">
        <image class="lottery-image" :src="lotteryUrl"></image>
        <span class="title">{{des}}</span>
      </div>
    </div>
</template>
<script>
  import wepy from '@wepy/core';
  let timeout = null, timeout1 = null;
  const images = {
    sign: {
      notComplete: '/static/images/sign@2x.png',
      completed: '/static/images/sign-completed@2x-70_70px.png'
    },
    gold: {
      addGoldUrl: '/static/images/sign@2x.png',
      goldSix: '/static/images/gold-6@2x.png',
      goldFive: '/static/images/gold-5@2x.png',
      goldFour: '/static/images/gold-4@2x.png',
      goldThree: '/static/images/gold-3@2x.png',
      goldTwo: '/static/images/gold-2@2x.png',
      goldOne: '/static/images/gold-1@2x.png'
    },
    share: '/static/images/share@2x.png',
    lottery: '/static/images/lottery@2x.png'
  };
  wepy.component({
    data: {
      showAnimation: false,
      addGold: false,
      addGoldNum: 0,
      addCount: 0,
      addsunshine: false,
      signComplete: true,
      signNotCompletedUrl: '/static/images/sign@2x.png',
      signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png',
      shareUrl: '/static/images/share@2x.png',
      lotteryUrl: '/static/images/lottery@2x.png',
      containerStyle: '',
      flyAnimation: false,
      isFirst: true
    },
    props: {
      title: '',
      sign: {
        type: Boolean,
        default: true
      },
      gold: {
        type: Boolean,
        default: true
      },
      des: {
        default: ''
      },
      type: {
        type: String,
        default: ''
      },
      bgColor: {
        type: String,
        default: '#FFF'
      },
      fontColor: {
        type: String,
        default: '#FF0000'
      }
    },
    computed: {
      signUrl() {
        return this.sign ? images['sign'].completed : images['sign'].notComplete;
      },
      goldUrl() {
        let result = images['gold'].goldOne;
        if (this.des === 2) {
          result = images['gold'].goldTwo;
        } else if (this.des >= 3 && this.des < 500) {
          result = images['gold'].goldThree;
        } else if (this.des >= 500 && this.des < 2500) {
          result = images['gold'].goldFour;
        } else if (this.des >= 2500 && this.des < 5000) {
          result = images['gold'].goldFive;
        } else if (this.des >= 5000) {
          result = images['gold'].goldSix;
        }
        return result;
      },
      addGoldUrl: function() {
        return images['gold'].addGoldUrl;
      }
    },
    watch: {
      des(newVal, oldVal) {
        if (this.type === 'gold') {
          if (!this.addCount) {
            this.addCount ++;
            return;
          }
          this.addGold = true;
          this.addGoldNum = newVal - oldVal;
          this.addCount ++;
        }
      },
      gold(v) {
        if (v) {
          this.addCount = 0;
        }
        if (this.isFirst) {
          this.isFirst = false;
          return;
        }
        setTimeout(() => {
          this.addsunshine = true;
        }, 1500);
      },
      sign(v) {
        if (this.isFirst) {
          this.signComplete = false;
          this.flyAnimation = false;
          this.addsunshine = false;
          this.isFirst = false;
          return;
        }
        if (v) {
          setTimeout(() => {
            this.signComplete = true;
            this.flyAnimation = true;
          }, 1100);
        }
      }
    },
    methods: {
      handleTaps: function() {
        this.showAnimation = !this.showAnimation;
        [this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
      },
      signIn: function() {
        if (this.sign) return;
        this.$emit('sign-in', true);
      },
      showAnimation: function() {
        this.addGold = !this.addGold;
      }
    },
    created() {
      let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
      statusHeight && (this.containerStyle = 'position:relative; top:' + statusHeight + 'px');
    }
  });
</script>
<style lang="less">
  .icon-container {

    .lottery {
      position: absolute;
      top: 469rpx;
      right: 32rpx;
      .lottery-image {
        display: flex;
        width: 78rpx;
        height: 78rpx;
      }
      .title {
        width: 100%;
        text-align: center;
        display: block;
        color: #fff;
        font-size: 22rpx;
      }
    }
    
    .share {
      position: absolute;
      top: 635rpx;
      right: 32rpx;
      .share-button {
        width: 78rpx;
        height: 70rpx;
        padding: 0;
        border: none;
        .share-image {
          width: 78rpx;
          height: 70rpx;
        }
      }
      .title {
        width: 100%;
        text-align: center;
        display: block;
        color: #fff;
        font-size: 22rpx;
      }
    }

    .sign {
      position: absolute;
      top: 312rpx;
      right: 32rpx;
      width: 78rpx;
      height: 78rpx;
      z-index: 2;
      .sign-comlete {
        position: absolute;
        top: -15rpx;
        width: 78rpx;
        height: 78rpx;
      }
      .sign-in {
        position: absolute;
        width: 78rpx;
        height: 78rpx;
        z-index: 1;
      }
      .jump {
        animation: jump 1.2s infinite ease;
      }
      .fly {
        animation: fly1 1s forwards linear;
      }
      .sign-shine {
        overflow: hidden;
        position: absolute;
        // background: #000;
        left: 5rpx;
        width: 70rpx;
        height: 70rpx;
        text-align: center;
        z-index: 3;
        border-radius: 50%;
        transform: rotate(-50deg); 
        animation: jump1 1.2s infinite ease;
        &::before {
          content: "";
          // background: red;
          position: absolute;
          width: 30rpx;
          height: 138rpx;
          margin: -40rpx -100rpx;
          box-shadow: 50rpx -23rpx 0 -8rpx rgba(255, 255, 255, 0.22), 75rpx -10rpx 0 -12rpx rgba(255, 255, 255, 0.18);
          animation: shine1 1.2s infinite ease;
        }
      }

      .sign-shadow {
        position: absolute;
        width: 100%;
        height: 10rpx;
        background: rgba(0, 0, 0, 0.4);
        top: 65rpx;
        border-radius: 50%;
        z-index: -1;
        animation: swift 1s infinite ease;
      }

      .title {
        position: absolute;
        top: 74rpx;
        width: 100%;
        text-align: center;
        display: block;
        color: #fff;
        font-size: 22rpx;
      }

      @keyframes swift {
        0% {
          opacity: 0.8;
        }
        50% {
          opacity: 0.4;
          transform: scale(0.8);
        }
        100% {
          opacity: 0.8;
        }
      }
      @keyframes shine1 {
        0% {
          transform: translateX(40rpx); 
        }
        50% {
          transform: translateX(0); 
        }
        100% {
          transform: translateX(40rpx); 
        }
      }
    }

    @keyframes jump {
      0% {
        top: -10rpx;
      }
      50% {
        top: -35rpx;
      }
      100% {
        top: -10rpx;
      }
    }

    @keyframes jump1 {
      0% {
        top: -7rpx;
      }
      50% {
        top: -32rpx;
      }
      100% {
        top: -7rpx;
      }
    }

    @keyframes fly1 {
      0% {top: 0;transform: rotateY(0);}
      10% {top: -20rpx;transform: rotateY(0);}
      50% {top: -100rpx;transform: rotateY(360deg);}
      100% {top: -200rpx;transform: rotateY(0);}
    }

    .gold {
      position: absolute;
      top: 130rpx;
      left: 40rpx;
      .add-gold{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 68rpx;
        // transform: translateY(-50rpx);
        animation:addGold .6s ease-in forwards;
        .add-gold-image {
          width: 20rpx;
          height: 20rpx;
          vertical-align: middle;
          animation:addGoldRotate .6s linear infinite;
        }
        .add-gold-num {
          color: #fff;
          font-size: 16rpx;
          vertical-align: middle;
        }
      }

      @keyframes addGold {
        0% { transform: translateY(-45rpx);}
        99% { transform: translateY(-20rpx);opacity: 1;}
        100% { opacity: 0; }
      }

      @keyframes addGoldRotate {
        from {transform: rotateY(0);}
        to {transform: rotateY(360deg);
        }
      }

      .show-gold {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .show-gold-image {
          width: 60rpx;
          height: 60rpx; 
          z-index: 2;
        }
        .show-gold-num {
          margin-top: -10rpx;
          color: #fff;
          font-size: 22rpx;
        } 
      }

      .sunshine {
        position: absolute;
        top: 20rpx;
        box-shadow: 0 0 30rpx 66rpx yellow;
        background: yellow;
        border-radius: 50%;
        width: 5rpx;
        height: 7.5rpx;
        z-index: 1;
        animation: addsunshine 2s linear forwards;
      }

      @keyframes addsunshine {
        0% { box-shadow: 0 0 30rpx 66rpx transparent;}
        50% { box-shadow: 0 0 30rpx 66rpx yellow; }
        100% { box-shadow: 0 0 30rpx 66rpx transparent;}
      }

      .gold-scale {
        animation: scaleGold 2s linear forwards;
      }

      @keyframes scaleGold {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
      }
    }
  }
</style>
<config>
{
    usingComponents: {
      'van-icon': '~@/components/vant/icon/index',
      'star-animation': '~@/components/custom/starAnimation'
    }
}
</config>
