<template>
  <div class="gift-bubble absolute" v-show="vValue"
    :style="{
      'top': vY - height+'px',
      'left':vX - width+'px'
    }"
       @mouseover="mouseover"
       @mouseout="mouseout"
  >
    <header
      class="row gift-bubble-header"
    >
      <v-image :src="vItem.base_image" class="gift-bubble-image" radius="0.05rem"></v-image>
      <div class="flex-1 overflow gift-bubble-title">
        <div class="line-1">{{vItem.gift_name}}</div>
        <div class="rowACenter gift-bubble-price">
          <img src="@/assets/images/currency.png" class="gift-bubble-currency" />
          <div class="flex-1">
            <div class="line-1">{{vItem.gift_price}}</div>
          </div>
        </div>
      </div>
    </header>
    <footer class="gift-bubble-footer rowACenter">
      <aside class="gift-bubble-my-price flex-1 row">
        <div class="flex-1 rowACenter gift-bubble-price">
          <img src="@/assets/images/currency.png" class="gift-bubble-currency" />
          <div class="flex-1">
            <div class="line-1">{{$store.getters.integral}}</div>
          </div>
        </div>
        <div @click="openRecharge" class="gift-bubble-recharge center cursor-pointer">充值</div>
      </aside>
      <aside class="gift-bubble-reward-modal row overflow"
             :class="[config.buttonClass]"
      >
        <div class="flex-1" v-if="config.number">
          <stepper type="pure" v-model:value="vNumber"></stepper>
        </div>
        <div @click="triggerReward" class="gift-bubble-recharge gift-bubble-reward center cursor-pointer"

        >{{config.button}}</div>
      </aside>
    </footer>
  </div>
</template>

<script>
import {
  vImage,
  stepper
} from '$components';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "popup-gift-bubble",
  components:{
    vImage,
    stepper
  },
  mixins,
  props
}
</script>

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