<template>
  <div class="red-info" v-show="redInfo.rid">
    <div class="head" :style="{opacity: showHead ? '1' : '0'}">
      <img v-if="redInfo.businessLogoUrl == ''" :src="channelInfo.defaultPhoneHeadAva" @load="showImg">
      <img v-else-if="redInfo.businessLogoUrl == 'default'" :src="channelInfo.chatAdminAvaUrl" @load="showImg"/>
      <img v-else :src="redInfo.businessLogoUrl" alt @load="showImg">
    </div>
    <div class="content-box">
      <div class="content">
        <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.blessing || '恭喜发财，大吉大利！' }}</div>
        </div>
      </div>
    </div>
    <div class="open-box" v-if="isOpen">
      <div class="open" v-if="wait <= 0" @click="_openRed">领取红包</div>
      <div class="wait" v-else>{{ wait | formatTime('mm:ss') }}</div>
    </div>
    <div class="open-box" v-else-if="redInfo.advertUrlSwitchState">
      <a class="link" :href="redInfo.advertLink">{{ redInfo.advertBtName }}</a>
    </div>
    <div class="advert-box" v-if="redInfo.advert" :style="{opacity: showAdvert ? '1' : '0'}">
      <img :src="redInfo.advert" alt @load="showAdvertImg"/>
    </div>
  </div>
</template>

<script>
const RED_TYPE = 5;
import { robRedpacket, openBusinessRedpacket } from '@/plugins/API/apiRed';
import { mapGetters } from 'vuex';

export default {
  name: 'red-business',
  data() {
    return {
      redInfo: {},
      wait: 6,
      isAjax: true,
      timer: null,
      redTimer: null,
      showHead: false,
      showAdvert: false,
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo',
      showRedInfo: 'showRedInfo'
    }),
    isOpen() {
      return this.redInfo.isExpire !== 1 && this.redInfo.isRob !== 1 && this.redInfo.isEmpty !== 0;
    }
  },
  methods: {
    showImg(){
      this.showHead = true
    },
    showAdvertImg(){
      this.showAdvert = true
    },
    _getRed() {
      this.redInfo = {};
      clearTimeout(this.redTimer);
      this.redTimer = setTimeout(() => {
        this._robRedpacket();
        this.redTimer = null;
      }, 100);
    },
    async _robRedpacket() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const parm = {
        id: this.showRedInfo.id,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        sv: this.$md5(`${this.channelInfo.uin}_${this.userInfo.id}_${this.$redSV.rob}`)
      }
      const res = await robRedpacket(parm);
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.redInfo = res.data;
        this._timerWait(res.data.wait);
      } else {
        res.errorMessage && this.$layer.msg(res.errorMessage);
      }
    },
    async _openRed() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await openBusinessRedpacket({
        id: this.showRedInfo.id,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$Bus.$emit('bus-editBusinessLis', 1);
        this.$layer.msg('获得' + res.data + '元红包');
        this.redInfo.isRob = 1;
        this.redInfo.robAmount = res.data;
      }
      this.$nextTick(() => {
        this.isAjax = true;
      });
    },
    _timerWait(wait) {
      this.wait = wait;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.wait--;
        if (this.wait <= 0) {
          this.wait = 0;
          clearInterval(this.timer);
        }
      }, 1000);
    }
  },
  watch: {
    showRedInfo() {
      if (this.showRedInfo.type === RED_TYPE) {
        this.isAjax = true;
        this._getRed();
      }
    },
    redInfo(newVal) {
      if (Object.keys(newVal).length === 0) {
        this.showHead = false
        this.showAdvert = false
      }
      if (this.redInfo.rid) {
        if (this.redInfo.isExpire === 1) {
          this.$Bus.$emit('bus-editBusinessLis', 3);
        } else if (this.redInfo.isRob === 1) {
          this.$Bus.$emit('bus-editBusinessLis', 1);
        } else if (this.redInfo.isEmpty === 0) {
          this.$Bus.$emit('bus-editBusinessLis', 4);
        } else if (
          this.redInfo.isExpire !== 1 &&
          this.redInfo.isRob !== 1 &&
          this.redInfo.isEmpty !== 0
        ) {
          this.$Bus.$emit('bus-editBusinessLis', 2);
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.red-info {
  position: relative;
  padding-top: 0.7rem;
  width: 100%;
  height: 100%;
  .head {
    margin: auto;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    overflow: hidden;
    background: #febe5c;
    transition: opacity .3s;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .content-box {
    height: 0.95rem;
    display: flex;
    align-items: center;
    font-size: 0.16rem;
    text-align: center;
    .content {
      flex: 1;
      .name {
        margin-bottom: 0.1rem;
        color: #fff;
      }
      .rob {
        margin-bottom: 0.12rem;
        color: #febe5c;
        .num {
          font-size: 0.2rem;
        }
      }
    }
  }
  .advert-box {
    position: absolute;
    bottom: 0.1rem;
    left: 0.1rem;
    margin: auto;
    width: 2.55rem;
    height: 1.03rem;
    border: 0.02rem solid #febe5c;
    background: #febe5c;
    transition: all .3s;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .open-box {
    position: relative;
    z-index: 100;
    .open,
    .wait,
    .link {
      display: block;
      margin: auto;
      width: 2.1rem;
      height: 0.35rem;
      line-height: 0.35rem;
      border-radius: 0.35rem;
      text-align: center;
      background-color: #febe5c;
      color: #dd424b;
      font-size: 0.14rem;
    }
  }
}
</style>
