<template>
  <div class="reward-cash" @click.stop>
    <ul class="reward-cash__list">
      <li
        :class="`item ${activeIndex === index ? 'active' : ''}`"
        v-for="(item, index) in channelInfo.rewardConfig"
        :key="index"
        @click="activeIndex === index ? (activeIndex = null) : (activeIndex = index)"
      >
        <div class="item__icon"></div>
        <div class="item__price">
          {{ item }}
          <span class="item__price--yuan">元</span>
        </div>
      </li>
    </ul>
    <div :class="`reward-cash__btn ${activeIndex !== null ? 'btn-active' : ''}`" @click.stop="_cashReward(channelInfo.rewardConfig[activeIndex])">确定</div>
  </div>
</template>

<script>
import { reward } from '@/plugins/API/apiReward';
import { mapGetters } from 'vuex';
export default {
  name: 'suspension-reward-cash',
  data() {
    return {
      activeIndex: null
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo'
    })
  },
  methods: {
    async _cashReward(cash) {
      const res = await reward({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        money: cash,
        backUrl: window.location.href,
        payType: 1
      });
      if (res.code === 200 && res.errorCode === 0) {
        const { tradeType, prepayInfo } = res.data;
        const { uin } = this.channelInfo;
         const DEF_SITE = process.client
          ? process.env.DEF_SITE + (window.location.protocol.split(':')[0] === 'https' ? process.env.HTTPS_PORT : process.env.HTTP_PORT)
          : `http:${process.env.DEF_SITE + process.env.HTTP_PORT}`;
        if (res.data.url) {
          window.location.href = res.data.url;
        } else if (tradeType === 'MWEB') {
          const wxh5pay = `https:${process.env.DEF_SITE + process.env.HTTPS_PORT}/pay/wxh5pay?uin=${uin}`;
          const backUrl = encodeURIComponent(window.location.href);
          const transferUrl = encodeURIComponent(`${wxh5pay}&url=${backUrl}`);
          const payUrl = encodeURIComponent(`${prepayInfo.mweb_url}&redirect_url=${transferUrl}`);
          const url = `${wxh5pay}&url=${payUrl}`;
          window.location.href = url;
        } else if (tradeType === 'JSAPI') {
          const data = encodeURIComponent(JSON.stringify(res.data));
          const url = `${DEF_SITE}/pay/wxpay?uin=${uin}&payconfig=${data}`;
          window.location.href = url;
        } else {
          this.$layer.msg('网络错误，请稍后重试！');
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>

.reward-cash {
  
  &__list {
    padding: 0.25rem 0.1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .active {
      border: 1px solid #FE5D5D !important;
    }
    .item {
      margin: 0 0.07rem 0.15rem 0.07rem;
      padding: 0.1rem;
      width: 1rem;
      line-height: 0.3rem;
      vertical-align: top;
      background: rgba(90,93,135,.3);
      color: #FE5D5D;
      border-radius: 0.1rem;
      // font-style: italic;
      font-size: 0.13rem;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      div {
        display: inline-block;
      }
      &__icon {
        flex: 1;
        width: .38rem;
        height: .4rem;
        background: url('./img/icon-redPacket.png') no-repeat center 55%;
        background-size: auto 100%;
        margin-left: .03rem;
      }
      &__price {
        flex: 1;
        white-space: nowrap;
        &--yuan {
          margin-left: .01rem;
        }
      }
    }
  }
  &__btn {
    width: calc(100% - .9rem);
    margin-left: .45rem;
    height: .4rem;
    color: #d4d4d4;
    border-radius: .45rem;;
    text-align: center;
    line-height: .4rem;
    transition: all .3s;
    margin-bottom: 0.25rem;
    background: linear-gradient(180deg, #FF6868 0%, #F43D3D 100%);
    opacity: 0.5;
  }
  .btn-active {
    opacity: 1;
    color: #fff;
  }
}
</style>
