<template>
  <section class="chat-gift flex absolute overflow" @click.stop v-if="draw" v-show="vValue">
    <section class="flex-1 chat-gift-content">
      <swiper :swiper-option="swiperOption" v-if="giftData && giftData.length > 0"
              class="chat-gift-swiper screen"
              :pagination="true"
      >
        <swiper-item
            v-for="(item,index) in giftData"
            :key="'gift-item-'+index"
            class="chat-gift-item "
            :class="{
              'chat-gift-item-active':giftSelect === index,
              'cursor-pointer': giftSelect !== index
            }"
            @click="changeGiftSelect(index)"
        >
          <div class="center screen relative">
            <v-image :src="item.base_image" backgroundColor="transparent" radius="0.05rem" class="chat-gift-image"></v-image>
            <div class="line-1 chat-gift-name">{{item.gift_name}}</div>
            <div class="rowACenter chat-gift-price">
              <img src="@/assets/images/currency.png" class="chat-gift-currency" />
              <div class="flex-1">
                <div class="line-1">{{item.gift_price}}</div>
              </div>
            </div>
            <section class="absolute gift-screen-hover" @mouseover="mouseover($event,item)"
                     @mouseout="mouseout"></section>
          </div>
        </swiper-item>

      </swiper>
    </section>
    <footer class="chat-gift-footer row aCenter">
      <section class="flex-1">
        <article class="chat-gift-number rowACenter">
          <aside
            v-for="(item,index) in numberData"
            :key="'chat-gift-number-'+index"
            class="chat-gift-number-item center"
            :class="{
              'chat-gift-number-active': item === number,
              'cursor-pointer': item !== number
            }"
            @click="setNumber(item)"
          >{{item}}</aside>
        </article>
        <div class="rowACenter">
          <img src="@/assets/images/currency.png" class="chat-my-gift-currency" />
          <div class="chat-my-gift-price">{{$store.getters.integral}}</div>
          <div class="chat-my-gift-line"></div>
          <div @click="recharge" class="chat-my-gift-recharge rowACenter cursor-pointer">
            <span>充值</span>
            <icon type="more" class="chat-gift-recharge-icon"></icon>
          </div>
        </div>
      </section>
      <div class="chat-gift-exchange rowACenter">
        <div class="chat-gift-stepper">
          <stepper v-model:value="number" :max="9999" class="chat-gift-stepper-target" type="pure"></stepper>
        </div>
        <div @click="giveGift" class="flex-1 center cursor-pointer chat-gift-reward">打赏</div>
      </div>
    </footer>
  </section>
</template>

<script>
import {
  swiper,
  swiperItem,
  vImage,
  icon,
  stepper
} from '$components';
import unit from "$utils/unit/unit";
import {mapState} from "vuex";
import numberData from '../data/number';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "chat-gift",
  data(){
    return {
      swiperOption:{
        slidesPerView:5,
        slidesPerGroup:5,
        spaceBetween:unit.unitPx(10),
        slidesPerColumn:2,
        slidesPerColumnFill:'row'
      },
      draw:false,
      numberData,
      vValue:false
    }
  },

  watch:{
    value:{
      handler(){

        return this.changeValue(this.value);
      },
      immediate:true
    }
  },

  methods:{
    changeValue(value){
      if (value !== this.vValue) {
        this.vValue = value;

        if (value && !this.draw) {
          this.draw = true;
        }

        if (this.value !== value) {
          return this.$emit('input',value);
        }
      }
    }
  },

  components:{
    swiper,
    swiperItem,
    vImage,
    icon,
    stepper
  },
  computed:mapState({
    // @ts-ignore
    giftData:(state)=> state.gift.giftUserData
  }),

  created() {
    this.$store.dispatch('initializationUserGiftPromise');
  },

  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>