<template>
  <div class="share-box">
    <div class="share-red">
      <div
        class="item"
        ref="shareItem"
        v-for="(item, index) in shareList"
        :key="index"
        @click="_showRed(item.redpacketId)"
      ></div>
    </div>
    <transition name="fade">
      <div
        class="share-mask"
        v-show="showRedInfo.type == 2 && showRedInfo.id && showRed"
        @click="_hideRed"
      ></div>
    </transition>
  </div>
</template>

<script>
const RED_TYPE = 2;
import { mapGetters, mapMutations } from 'vuex';

export default {
  name: 'red-share-box',
  props: {
    shareList: {}
  },
  data() {
    return {
      shareTimer: []
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      showRed: 'showRed',
      showRedInfo: 'showRedInfo'
    })
  },
  mounted() {
    this.$Bus.$on('bus-shareSuccess', this.shareSuccess);
  },
  methods: {
    ...mapMutations({
      set_showRedInfo: 'set_showRedInfo',
      set_showRed: 'set_showRed'
    }),
    shareSuccess() {
      if (this.showRedInfo.type === RED_TYPE) {
        this._hideRed();
      }
    },
    _showRed(id) {
      if (this.userInfo.id) {
        this.set_showRedInfo({
          type: RED_TYPE,
          id: id
        });
      } else {
        this.$layer.msg('登陆后才能领取红包哦!~');
        this.$Bus.$emit('bus-showLogin', true);
      }
    },
    _shareSuspension() {
      const shareList = this.$refs.shareItem;
      if (shareList) {
        this.shareTimer.forEach(obj => {
          clearInterval(obj);
        });
        shareList.forEach(obj => {
          this._position(obj);
        });
      }
    },
    _position(dom) {
      let x = Math.random() > 0.5 ? 1 : -1;
      let y = Math.random() > 0.5 ? 1 : -1;
      const AW = Math.floor(Math.random() * window.innerWidth);
      const AH = Math.floor(Math.random() * window.innerHeight);
      if (!dom.style.top) {
        dom.style.top = AH + 'px';
      }
      if (!dom.style.left) {
        dom.style.left = AW + 'px';
      }
      const tiemr = setInterval(function() {
        let top = parseInt(dom.offsetTop, 10);
        let left = parseInt(dom.offsetLeft, 10);
        y = top <= 0 ? 1 : top >= window.innerHeight - 30 ? -1 : y;
        x = left <= 0 ? 1 : left >= window.innerWidth - 20 ? -1 : x;
        top += y;
        left += x;
        dom.style.top = top + 'px';
        dom.style.left = left + 'px';
      }, 50);
      this.shareTimer.push(tiemr);
    },
    _hideRed() {
      this.set_showRed(false);
      this.set_showRedInfo({
        type: '',
        id: ''
      });
    }
  },
  watch: {
    shareList() {
      this.$nextTick(() => {
        this._shareSuspension();
      });
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-shareSuccess', this.shareSuccess);
  }
};
</script>

<style lang="less" scoped>
.share-red {
  position: fixed;
  top: 0;
  left: 0;
  .item {
    position: absolute;
    display: block;
    width: 0.48rem;
    height: 0.45rem;
    background: url('./img/icon-share-red.png') no-repeat center center;
    background-size: 100% auto;
  }
}
.share-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url('./img/go-share.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 3rem auto;
}
</style>
