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

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

import { DonateFlower } from '@/utils/generateModules'
import { prepareDonateAPI } from '@/api/C/donate.js'
import { USER_TYPE } from '@/constant'

const $route = useRoute();
const props = defineProps({
  donateType: {
    type: String,
    default: (value) => value,
    validator: value => {
      return [
      USER_TYPE.CHILDREN, 
      USER_TYPE.VISIT, 
      USER_TYPE.KINDERGARTEN
      ].includes(value);
    }
  }
})

// 查询参数
let params = {};
if (props.donateType === USER_TYPE.CHILDREN) params = { perf_id: $route.query.perf_id };
if (props.donateType === USER_TYPE.KINDERGARTEN) params = { kg_id: $route.query.kg_id };

const donateInfo = ref({})
onMounted(async () => {
  const { data } = await prepareDonateAPI(params);
  donateInfo.value = data;
})

const showDonate = ref(false);
</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>