<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-04-26 16:06:31
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-05-31 20:12:23
 * @FilePath: /tswj/src/views/client/finishUpload.vue
 * @Description: 作品上传成功提示页面
-->
<template>
  <div class="finishUpload-page">
    <div style="background-color: #F7F7F7; padding-top: 2rem; padding-bottom: 2rem;">
      <van-image round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_success" />
      <p style="font-size: 1.05rem; margin: 0.5rem; font-weight: bold;">提交成功！</p>
      <p style="font-size: 0.9rem; margin-bottom: 0.5rem;">您的作品正在等待老师审核</p>
      <p style="font-size: 0.9rem;">请耐心等待～～</p>
    </div>
    <div style=" padding-top: 2rem; padding-bottom: 2rem; font-size: 0.9rem; color: #713610;">
      <p style=" margin-bottom: 0.5rem;">您是否愿意与偏远山区的小朋友</p>
      <p>共读这么精彩的书籍</p>
    </div>
    <div v-if="book_id" style="padding: 0 15% 0.5rem 15%;">
      <my-button type="primary" @on-click="toDonate">我要爱心助力</my-button>
    </div>
    <div style="padding: 0 15% 1rem 15%;">
      <my-button type="plain" @on-click="goBack">返回</my-button>
    </div>
  </div>

  <donate-book :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
</template>

<script setup>
import icon_success from '@images/que-sucess@2x.png'

import MyButton from '@/components/MyButton/index.vue'
import DonateBook from '@/components/DonateBook/index.vue'

import { useDefaultPerf } from '@/composables/useDefaultPerf.js'

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

/*************** 捐书模块START ***************/

const book_id = $route.query.x_field_1 ? $route.query.x_field_1.split('-')[1] : '';
const { userInfo } = useDefaultPerf(book_id);
if (!book_id) {
  Toast.fail('书籍数据不全');
}

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

const toDonate = () => {
  // TODO: 调用新的捐钱组件
  showDonate.value = true;
  // 生成捐赠数据
}

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

const goBack = () => {
  $router.push({
    path: '/client/bookDetail',
    query: {
      id: userInfo.value.book_id
    }
  })
}
</script>

<style lang="less" scoped>
.finishUpload-page {
  color: #222222;
  text-align: center;
}
</style>