<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 @on-click="toDonate" type="plain">我要爱心捐书</my-button>
    </div>
    <div style="padding: 0 15% 1rem 15%;">
      <my-button @on-click="goBack" type="primary">返回</my-button>
    </div>
  </div>

  <donate-book :showPopup="showDonate" :item="donateItem" @on-close="closeDonate"></donate-book>
</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 { donateItem } = useDefaultPerf(book_id);
if (!book_id) {
  Toast.fail('书籍数据不全');
}

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

const toDonate = () => {
  showDonate.value = true;
  // 生成捐赠数据
}

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

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

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

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