<template>
  <div class="reward-gift">
    <div class="gift-list">
      <div class="gift-item" v-for="(item, index) in list" :key="index">
        <div class="box" :class="{ 'z-active': index == changeIndex }" @click="_changeGift(index)">
          <div class="img">
            <img :src="giftImg(item)" />
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="price">{{ item.price }}元</div>
        </div>
      </div>
    </div>
    <div class="operation" v-if="giftInfo.id">
      <div class="left">
        <div class="name">{{ giftInfo.name }}</div>
        <div class="price">{{ priceSum }}元</div>
      </div>
      <div class="num">
        <span class="t">数量</span>
        <div class="jia" @click="_setCount(1)"></div>
        <input class="n" v-model="giftNum" />
        <div class="jian" @click="_setCount(-1)"></div>
      </div>
      <div class="send" @click="_giftReward">赠送</div>
    </div>
  </div>
</template>

<script>
import { getRewardGiftList, rewardGift } from '@/plugins/API/apiReward';
import { mapGetters } from 'vuex';
export default {
  name: 'suspension-reward-gift',
  data() {
    return {
      changeIndex: null,
      giftNum: 1,
      list: []
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo'
    }),
    giftInfo() {
      const list = this.list || [];
      return list[this.changeIndex] || {};
    },
    priceSum() {
      if (this.giftInfo.id) {
        const price = Number(this.giftInfo.price) || 0;
        return (price * this.giftNum).toFixed(2);
      } else {
        return 0;
      }
    }
  },
  mounted() {
    this._getRewardGiftList();
  },
  methods: {
    giftImg(gift) {
      return gift.imgUrl || `${process.env.DEF_OSS}/static/reward/gift-${gift.imgType}.png`;
    },
    // 获取礼物打赏
    async _getRewardGiftList() {
      const res = await getRewardGiftList({
        id: this.channelInfo.id,
        uin: this.channelInfo.uin
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.list = res.data;
      }
    },
    _changeGift(index) {
      if (this.changeIndex === index) {
        this.changeIndex = null;
      } else {
        this.changeIndex = index;
      }
    },
    _setCount(step) {
      const num = Number(this.giftNum) + step;
      this.giftNum = num;
    },
    async _giftReward() {
      const res = await rewardGift({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        giftId: this.giftInfo.id,
        num: this.giftNum,
        backUrl: window.location.href,
        payType: 1
      });
      if (res.code === 200 && res.errorCode === 0) {
        const { tradeType, prepayInfo } = res.data;
        const { uin } = this.channelInfo;
        if (res.data.url) {
          window.location.href = res.data.url;
        } else if (tradeType === 'MWEB') {
          const wxh5pay = `https://web.guangdianyun.tv/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 = `//web.guangdianyun.tv/pay/wxpay?uin=${uin}&payconfig=${data}`;
          window.location.href = url;
        } else {
          this.$layer.msg('网络错误，请稍后重试！');
        }
      }
    }
  },
  watch: {
    giftNum(nVal) {
      const num = nVal > 999 ? 999 : nVal < 1 ? 1 : nVal;
      this.giftNum = parseInt(num, 10);
    }
  }
};
</script>
<style lang="less" scoped>
.reward-gift {
  .gift-list {
    padding: 0.1rem 0.2rem;
    display: flex;
    flex-wrap: wrap;
    .gift-item {
      position: relative;
      flex: 0 0 auto;
      width: 25%;
      .box {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        .img {
          position: relative;
          padding-top: calc(100% - 0.4rem);
          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .name {
          line-height: 0.2rem;
          font-size: 0.1rem;
          color: #2e2e2e;
        }
        .price {
          line-height: 0.2rem;
          font-size: 0.08rem;
          color: #666666;
        }
        &.z-active {
          box-shadow: 0 0 0.06rem 0 #ffb711;
          border: 0.01rem solid #ffb711;
          border-radius: 0.05rem;
        }
      }
    }
  }
  .operation {
    padding: 0 0.05rem 0 0.15rem;
    height: 0.5rem;
    display: flex;
    align-items: center;
    border-top: 0.01rem solid #f6f6f6;
    .left {
      flex: 1;
      line-height: 0.2rem;
      .name {
        font-size: 0.1rem;
        color: #2e2e2e;
      }
      .price {
        font-size: 0.12rem;
        color: #feb90e;
      }
    }
    .num {
      flex: 0 0 auto;
      line-height: 0.2rem;
      font-size: 0.1rem;
      color: #2e2e2e;
      .t {
        vertical-align: middle;
        margin-right: 0.1rem;
      }
      .jia {
        vertical-align: middle;
        display: inline-block;
        width: 0.16rem;
        height: 0.16rem;
        border-radius: 100%;
        background: #f5f5f5 url(./img/icon-jia.png) no-repeat center center;
        background-size: 50% auto;
        cursor: pointer;
      }
      .n {
        vertical-align: middle;
        display: inline-block;
        width: 0.45rem;
        text-align: center;
      }
      .jian {
        vertical-align: middle;
        display: inline-block;
        width: 0.16rem;
        height: 0.16rem;
        border-radius: 100%;
        background: #f5f5f5 url(./img/icon-jian.png) no-repeat center center;
        background-size: 50% auto;
        cursor: pointer;
      }
    }
    .send {
      flex: 0 0 auto;
      margin-left: 0.2rem;
      padding: 0 0.1rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #feb90e;
      border-radius: 0.02rem;
      font-size: 0.12rem;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
