<template>
  <x-popup :visible="visible">
    <div class="gift-content">
      <div class="title">
        <span :class="{'is-active': i === giftCur}"
              v-for="(g, i) in giftType"
              :key="i"
              @touchstart="changeGiftType(i)">{{g}}</span>
      </div>
      <div class="gift-content__box"
           v-show="giftCur===0">
        <div class="gift-list">
          <div :class="['gift-item', giftChoose === i ? 'is-active' : '']"
               v-for="(g, i) in giftList"
               :key="g.id"
               @touchstart="chooseGift(i)">
            <img :src="g.icon"
                 :alt="g.name">
            <p class="gift-name">{{g.name_desc}}</p>
            <p class="gift-cost">{{g.cost}}书币</p>
            <span class="gift-num" v-show="+g.num">{{g.num}}</span>
          </div>
        </div>
        <p class="user-free__send" v-show="+giftList[giftChoose].num">可免费使用：{{giftList[giftChoose].num || 0}}</p>
        <p class="send"
           @touchstart="toSend">{{btnText}}</p>
      </div>
      <div class="gift-content__box gift-content__box--record"
           v-show="giftCur===1">
        <!-- <p class="is-empty"
           v-if="!giftRecordList.records.length">
          <img src="../../../assets/no-gift.png"
               alt=""
               style="width:100%">
        </p> -->
        <div class="record-list__rank">
          <div class="rank-item">
            <div class="rank-item__head rank-item-0">
              <img :src="(giftRecordTop[0] && giftRecordTop[0].head_img) || giftDefault"
                   alt="">
              <div class="bg"></div>
            </div>
            <p class="rank-item__name"
               v-if="giftRecordTop[0]">{{giftRecordTop[0].nickname || "ID："+giftRecordTop[0].uid}}</p>
            <span class="rank-item__cost"
                  v-if="giftRecordTop[0]">累计<i>{{giftRecordTop[0].cost_sum}}</i>书币</span>
            <span class="rank-item__cost"
                  v-else>虚位以待</span>
          </div>
          <div class="rank-item">
            <div class="rank-item__head rank-item-1">
              <img :src="(giftRecordTop[1] && giftRecordTop[1].head_img) || giftDefault"
                   alt="">
              <div class="bg"></div>
            </div>
            <p class="rank-item__name"
               v-if="giftRecordTop[1]">{{giftRecordTop[1].nickname || "ID："+giftRecordTop[1].uid}}</p>
            <span class="rank-item__cost"
                  v-if="giftRecordTop[1]">累计<i>{{giftRecordTop[1].cost_sum}}</i>书币</span>
            <span class="rank-item__cost"
                  v-else>虚位以待</span>
          </div>
          <div class="rank-item">
            <div class="rank-item__head rank-item-2">
              <img :src="(giftRecordTop[2] && giftRecordTop[2].head_img) || giftDefault"
                   alt="">
              <div class="bg"></div>
            </div>
            <p class="rank-item__name"
               v-if="giftRecordTop[2]">{{giftRecordTop[2].nickname || "ID："+giftRecordTop[2].uid}}</p>
            <span class="rank-item__cost"
                  v-if="giftRecordTop[2]">累计<i>{{giftRecordTop[2].cost_sum}}</i>书币</span>
            <span class="rank-item__cost"
                  v-else>虚位以待</span>
          </div>
        </div>
        <div v-show="giftRecordList.length"
             class="record-list__item"
             v-for="(r, i) in giftRecordList"
             :key="i">
          <p class="item-name">{{r.user_nickname}}：<span>{{r.send_time}}</span></p>
          <p class="item-gift"><span>赠送</span><img :src="r.icon"
                 :alt="r.gift_name"><span>*1</span></p>
        </div>
      </div>
    </div>
  </x-popup>
</template>

<script>
import popup from "../popup";
import { getGiftList, sendGift, getSendGiftRecord } from "../../../api";

export default {
  components: {
    "x-popup": popup
  },
  data() {
    return {
      giftType: ["我要送礼", "送礼记录"],
      giftCur: 0,
      giftList: [],
      giftChoose: 0,
      giftRecordList: [],
      giftRecordTop: [],
      meta: {},
      giftLoading: false,
      userBalance: 0,
      btnText: "送给作者",
      nopay: false,
      toLoad: true,
      btnLoading: false,
      giftDefault: require("../../../assets/gift_default.png")
    };
  },
  methods: {
    getGiftList() {
      getGiftList().then(r => {
        this.giftList = r.gift;
        this.userBalance = r.balance;
        if (+r.gift[0].num < 1) {
          if (this.userBalance <= 0 || this.userBalance < r.gift[0].cost) {
            this.btnText = "书币不足请充值！";
            this.nopay = true;
          }
        }
      });
    },
    changeGiftType(i) {
      if (this.giftCur === i) return;
      this.giftCur = i;
      // do something else
      if (i === 1) {
        // 送礼记录
        // 避免多次请求
        if (!this.toLoad) return;
        getSendGiftRecord({ bid: this.bid }).then(r => {
          this.giftRecordTop = r.rank || [];
          this.giftRecordList = r.records || [];
          this.toLoad = false;
        });
      }
    },
    chooseGift(i) {
      this.giftChoose = i;
      if (+this.giftList[i].num > 0) {
        this.btnText = "送给作者";
        this.nopay = false;
      } else if (this.giftList[i].cost > this.userBalance) {
        this.btnText = "书币不足请充值！";
        this.nopay = true;
      } else {
        this.btnText = "送给作者";
        this.nopay = false;
      }
    },
    toSend() {
      // * 送礼
      if (!this.nopay) {
        if (this.btnLoading) return;
        this.btnLoading = true;
        let data = {
          bid: this.bid,
          gift_id: this.giftList[this.giftChoose].id
        };
        sendGift(data)
          .then(r => {
            this.$Toast("赠送成功，小主收下啦~");
            this.toLoad = true;
            // * 赠送成功后 - 对应的花费
            this.userBalance =
              this.userBalance - this.giftList[this.giftChoose].cost;
            +this.giftList[this.giftChoose].num && this.giftList[this.giftChoose].num--;
            setTimeout(() => {
              this.btnLoading = false;
            }, 1000);
            this.close();
          })
          .catch(e => {
            this.$Toast("赠礼失败！");
          });
      } else {
        // 余额不够的情况下 跳转到充值页面
        this.reject();
        this.close();
      }
    }
  },
  created() {
    this.getGiftList();
  }
};
</script>
