<template>
    <transition name="fadeMaxHeight">
        <div class="reward-box" v-transfer-dom v-show="value" @click.stop="close">
          <div style="width:100%;height: auto;border-radius: 15px 15px 0 0;overflow: hidden;">
          <div style="background: rgba(0, 0, 0, 0.9); width:100%;height: auto" @click.stop>
            <div class="top-box">
              <div class="tab-box" v-show="swiper">
                <div :class="{ 'z-active': list[tabIndex].nameKey === 'gift' }" @click.stop="_tabSwitch('0')"
                  v-if="list.some(item => item.nameKey === 'gift')">
                  礼物
                </div>
                <div :class="{ 'z-active': list[tabIndex].nameKey === 'cash' }" @click.stop="_tabSwitch('1')"
                 v-if="list.some(item => item.nameKey === 'cash')">
                  现金打赏
                </div>
              </div>
              <div class="sendName-box">
                <div class="text">送给</div>
                <div class="header"><img :src="list.some(item => item.nameKey === 'cash') ? channelInfo.rewardPhoto : channelInfo.chatAdminAvaUrl"/></div>
                <div class="name">{{ list.some(item => item.nameKey === 'cash') ? channelInfo.rewardName : (channelInfo.chatAdminName || '管理员') }}</div>
                <!-- <div class="icon"></div> -->
              </div>
            </div>
            <div class="swiper-container" ref="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in list" :key="item.nameKey">
                  <template v-if="item.nameKey === 'gift'" @click.stop>
                    <reward-gift :show="value" @close="close"/>
                  </template>
                  <template v-if="item.nameKey === 'cash'" @click.stop>
                    <reward-cash @close="close"/>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
    </transition>
</template>
 
<script>
import { mapGetters } from 'vuex';
const rewardCash = resolve => require(['./rewardCashNew'], resolve);
const rewardGift = resolve => require(['./rewardGiftNew'], resolve);

export default {
  name: 'suspension-reward',
  components: {
    rewardCash,
    rewardGift
  },
  data() {
    return {
      showAni: true,
      tabIndex: 0,
      defaultIcon: require('./img/icon-reward.png'),
      swiper: null
    };
  },
  props: {
     value: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: 'value',
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo'
    }),
    list() {
      const list = []
      if (this.channelInfo.rewardGiftStatus === 1){
        list.push({name:'礼物', nameKey: 'gift'})
      }
      if (this.channelInfo.rewardStatus === 1) {
        list.push({name:'现金打赏', nameKey: 'cash'})
      }
       return list
    }
  },
  methods: {
    close() {
      this.$emit('input', false)
    },
    _tabSwitch(index) {
      this.swiper.slideTo(index + '' || this.tabIndex + '');
    },
    _initSwiper() {
     const self = this;
      const option = {
        touchRatio: 0.5,
        on: {
          slideChange() {
            self.tabIndex = this.activeIndex;
          }
        }
      };
      this.swiper = new this.$swiper(this.$refs.swiper, option);
    },
  },
  watch: {
    value(newVal) {
      if (newVal){
        this.$nextTick(() => {
          this._initSwiper();
          this.$nextTick(() => {
            this.swiper.slideTo(this.tabIndex)
          })
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.hideAni-enter,.hideAni-leave-to{
  position: fixed;
  z-index: -1;
  bottom: 0;
}

.fadeMaxHeight-enter,.fadeMaxHeight-leave-to{
  max-height: 0;
}
.fadeMaxHeight-enter-to,.fadeMaxHeight-leave{
  max-height: 70vh;
}
.fadeMaxHeight-enter-active,.fadeMaxHeight-leave-active{
  transition: max-height .5s cubic-bezier(0,0,0.38,1);
}

.reward-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  color: #fff;
  flex-direction: column-reverse;
  .top-box {
    padding: 0 .1rem;
    display: flex;
    height: .54rem;
    justify-content: space-between;
    align-items: center;
    .tab-box {
      width: 50%;
      display: flex;
      align-items: center;
      div {
        display: inline-block;
        margin: 0.1rem;
        vertical-align: top;
        font-size: 0.14rem;
        color: #7D7C8D;
        &.z-active {
          font-size: 0.15rem;
          color: #FFF;
          font-weight: 800;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            left: calc(50% - 0.05rem);
            margin: 0.05rem auto 0;
            display: block;
            height: 0.03rem;
            width: 0.1rem;
            background-color: #3185F7;
            border-radius: 1px;
          }
        }
      }
    }
    .sendName-box {
      background: rgba(90,93,135,.3);
      border-radius: .32rem;
      height: .32rem;
      display: flex;
      align-items: center;
      padding: 0 .1rem;
      font-size: .13rem;
      div {
        display: inline-block;
        padding: 0 .01rem;
      }
      .text {
        white-space: nowrap;
      }
      .icon {
        width: .12rem;
        height: .12rem;
        background: url('./img/icon-right.png') no-repeat center 55%;
        background-size: auto 80%;
        margin-left: .03rem;
        opacity: .5;
      }
      .header {
        width: .19rem;
        height: .19rem;
        border-radius: 50%;
        background: #fff;
        overflow: hidden;
        margin: 0 .07rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        font-size: .12rem;
        color: #FFEC79;
        padding-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
      }
    }
  }
}
</style>
