<template>
  <div class="password" 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="header-box">
          <div class="title">口令红包</div>
          <div class="prompt">{{ redInfo.prompt || '可以在直播过程中发现口令哦!' }}</div>
        </div>
        <div class="content-box">
          <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-box" v-if="isOpen">
          <input class="input" type="text" v-model="password" placeholder="请输入口令领取红包" />
          <div class="open" @click="_openRed">抢红包</div>
        </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 = 3;
import { robRedpacket, openRedpacket, redpacketDetail } from '@/plugins/API/apiRed';
import { mapGetters, mapMutations } from 'vuex';
import luckList from './luckList';
export default {
  name: 'red-password',
  components: {
    luckList
  },
  data() {
    return {
      redInfo: {},
      luckInfo: {},
      showLuck: false,
      password: '',
      isAjax: true
    };
  },
  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.password.trim()) {
        this.$layer.msg('口令不能为空！');
        return false;
      }
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await openRedpacket({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        password: this.password,
        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);
    },
    _closeLuck() {
      this.set_showRed(false);
    }
  },
  watch: {
    showRedInfo() {
      if (this.showRedInfo.type === RED_TYPE) {
        this.password = '';
        this.showLuck = false;
        this._getRed();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.password {
  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;
    .header-box {
      position: absolute;
      top: 0.1rem;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 0.14rem;
      .title {
        margin-bottom: 0.1rem;
        color: #febe5c;
      }
      .prompt {
        color: #fff;
      }
    }
    .content-box {
      padding-top: 0.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.16rem;
      .rob {
        margin-bottom: 0.12rem;
        color: #febe5c;
        .num {
          font-size: 0.2rem;
        }
      }
    }
    .open-box {
      .input {
        margin: 0 auto 0.1rem;
        display: block;
        width: 2.1rem;
        height: 0.35rem;
        line-height: 0.35rem;
        border-radius: 0.35rem;
        background: #fff;
        border: 0;
        outline: 0;
        text-align: center;
        font-size: 0.14rem;
        &::-webkit-input-placeholder {
          color: #dd424b;
        }
      }
      .open {
        margin: 0 auto 0.1rem;
        display: block;
        width: 2.1rem;
        height: 0.35rem;
        line-height: 0.35rem;
        border-radius: 0.35rem;
        background: #febe5c;
        color: #dd424b;
        text-align: center;
        font-size: 0.14rem;
      }
    }
    .luck {
      width: 100%;
      text-align: center;
      font-size: 0.14rem;
      color: #fff;
    }
  }
}
</style>
