<template>
  <div class="default" v-show="redInfo.rid" @click="_closeRed">
    <div class="box" @click.stop>
      <i class="close" @click="_closeRed"></i>
      <div class="red-info" v-if="!showLuck">
        <div class="content-box">
          <div class="name">{{ redInfo.name }}的红包</div>
          <div class="rob">
            <div v-if="redInfo.isExpire == 1">来晚了，红包已过期！</div>
            <div v-else-if="redInfo.isRob == 1">
              <span class="num">{{ redInfo.robAmount | floatNum }}</span>
              元
            </div>
            <div v-else-if="redInfo.isEmpty == 0">手慢了，红包派完了！</div>
            <div v-else>{{ redInfo.content || '恭喜发财，大吉大利！' }}</div>
          </div>
        </div>
        <div class="open" v-if="isOpen" @click="_openRed"></div>
        <div class="luck" v-if="redInfo.num && redInfo.num <= 500" @click="_getLuck">
          <span>看看大家的手气</span>
        </div>
      </div>
      <luck-list v-if="showLuck" :luckInfo="luckInfo" :channelInfo="channelInfo"></luck-list>
    </div>
  </div>
</template>

<script>
const RED_TYPE = 1;
import { robRedpacket, openRedpacket, redpacketDetail } from '@/plugins/API/apiRed';
import { mapGetters, mapMutations } from 'vuex';
import luckList from './luckList';
export default {
  name: 'red-default',
  components: {
    luckList
  },
  data() {
    return {
      isAjax: true,
      redInfo: {},
      luckInfo: {},
      showLuck: false
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo',
      showRedInfo: 'showRedInfo'
    }),
    isOpen() {
      return this.redInfo.isExpire !== 1 && this.redInfo.isRob !== 1 && this.redInfo.isEmpty !== 0;
    }
  },
  methods: {
    ...mapMutations({
      set_showRed: 'set_showRed'
    }),
    async _getRed() {
      if (Number(this.showRedInfo.id) === Number(this.redInfo.rid)) {
        return false;
      }
      this.redInfo = {};
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await robRedpacket({
        id: this.showRedInfo.id,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        sv: this.$md5(`${this.channelInfo.uin}_${this.userInfo.id}_${this.$redSV.rob}`)
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.redInfo = res.data;
      }
    },
    async _openRed() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await openRedpacket({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        sv: this.$md5(
          `${this.channelInfo.uin}_${this.userInfo.id}_${this.$redSV.open}_${this.redInfo.rid}_${this.redInfo.svSalt}`
        )
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.msg('获得' + res.data + '元红包');
        this.redInfo.isRob = 1;
        this.redInfo.robAmount = res.data;
      }
      this.$nextTick(() => {
        this.isAjax = true;
      });
    },
    async _getLuck() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await redpacketDetail({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.showLuck = true;
        this.luckInfo = res.data;
      }
    },
    _closeRed() {
      this.set_showRed(false);
    }
  },
  watch: {
    showRedInfo() {
      if (this.showRedInfo.type === RED_TYPE) {
        this.showLuck = false;
        this._getRed();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.default {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.3);
  .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin: auto;
    width: 3.75rem;
    height: 3.5rem;
    .close {
      position: absolute;
      right: 0.5rem;
      top: -0.4rem;
      z-index: 2;
      width: 0.32rem;
      height: 0.32rem;
      background: url('./img/icon-close.png') no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .red-info {
    padding: 1.5rem 0.5rem 0;
    position: relative;
    width: 100%;
    height: 100%;
    background: url('./img/red-bg.png') no-repeat 0 0;
    background-size: 100% 100%;
    text-align: center;
    .content-box {
      padding-top: 0.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.16rem;
      .name {
        margin-bottom: 0.12rem;
        color: #fff;
      }
      .rob {
        margin-bottom: 0.12rem;
        color: #febe5c;
        .num {
          font-size: 0.2rem;
        }
      }
    }
    .open {
      margin: 0 auto 0.1rem;
      width: 0.64rem;
      height: 0.64rem;
      background: url('./img/icon-open.png') no-repeat center center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .luck {
      width: 100%;
      text-align: center;
      font-size: 0.14rem;
      color: #fff;
    }
  }
}
</style>
