<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-05-31 18:32:38
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-07 16:33:09
 * @FilePath: /tswj/src/components/DonateBar/index.vue
 * @Description: 爱心助力底部固定栏
-->
<template>
  <div class="fix-btn">
    <div class="text" @click="toDonate"><slot /></div>
  </div>
  <donate-flower :user-type="donateType" :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { DonateFlower } from '@/utils/generateModules'
import { prepareDonateAPI } from '@/api/C/donate.js'

const $route = useRoute();
useTitle($route.meta.title);

const props = defineProps({
  donateType: {
    type: String,
    default: (value) => value,
    validator: value => {
      return ['C', 'V', 'K'].includes(value);  // type: C | V | K， 儿童｜访客｜幼儿园
    }
  }
})

// 捐钱-游客 type: V
// 捐钱-幼儿园 type: K
// 捐钱-指定儿童 type: C
const donateInfo = ref({})
let params = {};
if (props.donateType === 'C') { // 助力TA
  params = { perf_id: $route.query.perf_id }
} else if (props.donateType === 'K') {
  params = { kg_id: $route.query.kg_id }
}
onMounted(async () => {
  const { data } = await prepareDonateAPI(params);
  donateInfo.value = data;
})

// 弹出捐赠弹框模块
const showDonate = ref(false);

const toDonate = () => {
  showDonate.value = true;
}

const closeDonate = (v) => {
  showDonate.value = v;
}

</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: 0.8rem;
    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>