<template>
    <transition name="fade">
        <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(255, 255, 255, 0.9); width:100%;height: auto"> <!-- linear-gradient(to bottom left, rgba(243, 207, 106, 0.2) 0%, #fff 100%) -->
            <div class="tab-box" v-show="showTab">
              <div :class="{ 'z-active': tabIndex == 0 }" @click.stop="_tabIndex(0)">
                礼物
              </div>
              <div :class="{ 'z-active': tabIndex == 1 }" @click.stop="_tabIndex(1)">
                现金打赏
              </div>
            </div>
            <div class="type-box">
                  <transition-group :name="showAni ? 'fadeMaxHeight' : 'hideAni'">
                    <rewardGift v-show="value && showRewardGift" :key="1"/>
                    <rewardCash v-show="value && showReward" :key="2"/>
                  </transition-group>
            </div>
          </div>
          </div>
        </div>
    </transition>
</template>

<script>
import { mapGetters } from 'vuex';
const rewardCash = resolve => require(['./rewardCash'], resolve);
const rewardGift = resolve => require(['./rewardGift'], resolve);

export default {
  name: 'suspension-reward',
  components: {
    rewardCash,
    rewardGift
  },
  data() {
    return {
      showAni: true,
      tabIndex: 0,
      defaultIcon: require('./img/icon-reward.png')
    };
  },
  props: {
     value: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: 'value',
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo'
    }),
    switchShow() {
      return this.value ? (this.showRewardGift * 2 + this.showReward) : 0
    },
    showTab() {
      return this.channelInfo.rewardGiftStatus === 1 && this.channelInfo.rewardStatus === 1;
    },
    showRewardGift() {
      if (this.showTab && this.channelInfo.rewardGiftStatus === 1 && this.tabIndex === 0) {
        return true;
      } else if (!this.showTab && this.channelInfo.rewardGiftStatus === 1) {
        return true;
      } else {
        return false;
      }
    },
    showReward() {
      if (this.showTab && this.channelInfo.rewardStatus === 1 && this.tabIndex === 1) {
        return true;
      } else if (!this.showTab && this.channelInfo.rewardStatus === 1) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    close() {
      this.$emit('input', false)
    },
    _tabIndex(index) {
      this.tabIndex = index;
    },
  },
  watch: {
    switchShow(newVal, oldVal) {
       this.showAni = (newVal === 0 || oldVal === 0)
    }
  }
 
};
</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: 60vh;
}
.fadeMaxHeight-enter-active,.fadeMaxHeight-leave-active{
  transition: max-height .6s cubic-bezier(0,0,0.58,1);
}

.reward-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  background-color: rgba(0, 0, 0, 0.4);
  .type-box {
  }
  .tab-box {
    padding: 0.12rem 0.1rem;
    display: flex;
    justify-content: space-around;
    div {
      display: inline-block;
      margin-right: 0.1rem;
      vertical-align: top;
      font-size: 0.12rem;
      &.z-active {
        color: var(--main-color);
        font-weight: 800;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          left: calc(50% - 0.15rem);
          margin: 0.05rem auto 0;
          display: block;
          height: 0.02rem;
          width: 0.3rem;
          background-color: var(--main-color);
        }
      }
    }
  }
}
</style>
