<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-05-31 18:32:38
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-07-01 17:58:30
 * @FilePath: /tswj/src/components/DonateBar/index.vue
 * @Description: 爱心助力底部固定栏
-->
<template>
  <div class="fix-btn">
    <div class="text" @click="showDonate=true">
      <slot />
    </div>
  </div>
  <donate-flower
    :show-popup="showDonate" 
    :item="donateInfo" 
    @on-close="showDonate=false"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { DonateFlower } from '@/utils/generateModules'
import { prepareDonateAPI } from '@/api/C/donate.js'

const props = defineProps({
  perfId: Number,
  kgId: {
    type: String,
    default: ''
  }
})

const donateInfo = ref({})
const showDonate = ref(false);
onMounted(async () => {
  const { data } = await prepareDonateAPI({ perf_id: props.perfId, kg_id: props.kgId });
  donateInfo.value = data;
})

</script>

<style lang="less" scoped>
.fix-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
  .text {
    text-align: center;
    padding: 0.7rem;
    margin: 1.2rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 24px;
    // border: 1px solid F7F7F7;
    color: @base-font-color;
    background-color: @base-color;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  }
}
</style>