<template>
  <div class="more">
      <div class="btn" @click.stop="isShow = !isShow">
        <div class="icon"></div>
      </div>
    <transition name="fade">
      <div class="menu-list" v-show="isShow">
        <div class="item" v-if="channelInfo.isSendRed" @click="_sendRed">
          <div class="icon red"></div>
          <span>红包</span>
        </div>
        <div class="item" @click="_wallet">
          <div class="icon wallet"></div>
          <span>提现</span>
        </div>
        <div class="item" @click="_personal">
          <div class="icon personal"></div>
          <span>个人中心</span>
        </div>
        <div class="item" v-if="isQuestionnaire.isEnable" @click="_openQuestionnaire">
          <div class="icon questionnaire"></div>
          <span>问卷报表</span>
        </div>
        <div class="item" @click="_setgift">
          <div :class="`icon ${giftAni ? 'gift' : 'gift-close'}`"></div>
          <span>礼物特效</span>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'vertical-more-box',
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      channelConfig: 'channelConfig',
      userInfo: 'userInfo',
      jumpUrls: 'jumpUrls',
      giftAni: 'giftAni'
    }),
    isQuestionnaire() {
      const info = this.channelConfig.questionnaire || {};
      return info;
    }
  },
  mounted() {
    this.$Bus.$on('bus-remEnclosure', this._remEnclosure);
  },
  methods: {
    ...mapMutations({
      set_giftAni: 'set_giftAni'
    }),
    _setgift() {
      this.set_giftAni()
      if (this.giftAni){
        this.$layer.msg('已开启礼物特效')
      } else {
        this.$layer.msg('已屏蔽礼物特效')
      }
    },
    _sendRed() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        window.location.href = this.jumpUrls.pay_redPacket;
      }
    },
    _wallet() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        window.location.href = this.jumpUrls.center_wallet;
      }
    },
    _personal() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        window.location.href = this.jumpUrls.center;
      }
    },
    _openQuestionnaire() {
      if (!this.userInfo.id) {
        this.$layer.msg('请登录');
        this.$Bus.$emit('bus-showLogin', true);
      } else {
        this.$Bus.$emit('bus-questionnaire');
      }
    },
    _remEnclosure() {
      this.isShow = false;
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-remEnclosure', this._remEnclosure);
  }
};
</script>
<style lang="less" scoped>
.fade-enter,.fade-leave-to{
  opacity: 0;
}
.fade-enter-to,.fade-leave{
  opacity: 1;
}
.fade-enter-active,.fade-leave-active{
  transition: opacity .3s cubic-bezier(0,0,0.58,1);
}
.more {
  position: relative;
  z-index: 100;
  width: 0.32rem;
  height: 0.32rem;
  .btn {
    position: relative;
    top: 0.01rem;
    width: 0.32rem;
    height: 0.32rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    .icon {
      width: 100%;
      height: 100%;
      background: url(./img/icon-more.png) no-repeat center center;
      background-size: 0.17rem auto;
    }
  }
  .menu-list {
    position: absolute;
    bottom: calc(100% + 0.1rem);
    right: -0.05rem;
    width: 1.1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.04rem;
    .item {
      padding: 0 0.1rem;
      height: 0.4rem;
      line-height: 0.4rem;
      border-top: 1px solid rgba(102, 102, 102, 0.75);
      font-size: 0.12rem;
      color: #fff;
      .icon {
        vertical-align: middle;
        margin-right: 0.08rem;
        display: inline-block;
        width: 0.16rem;
        height: 0.16rem;
        &.red {
          background: url(./img/icon-red.png) no-repeat center center;
          background-size: contain;
        }
        &.wallet {
          background: url(./img/icon-wallet.png) no-repeat center center;
          background-size: contain;
        }
        &.personal {
          background: url(./img/icon-personal.png) no-repeat center center;
          background-size: contain;
        }
        &.questionnaire {
          background: url(./img/icon-questionnaire.png) no-repeat center center;
          background-size: contain;
        }
        &.gift {
          background: url(./img/icon-gift.png) no-repeat center center;
          background-size: contain;
        }
        &.gift-close {
          background: url(./img/icon-giftclose.png) no-repeat center center;
          background-size: contain;
        }
      }
      &:first-child {
        border-top: 0;
      }
    }
  }
}
</style>
