<template>
  <van-nav-bar
      title="体检预约"
  />
  <div class="succeedImg">
    <img :src="succeedImg" alt="">
  </div>
  <h2 class="tit">恭喜您，预约成功！</h2>
  <div class="btns-area">
    <van-button 
      type="primary" 
      style="width: 45%; margin-bottom: 0.3rem; border-radius: 1rem; font-size: 18px; background-color: #fff; border-color: #1989fa; color: #1989fa;"
      @click="jumpHome"
    >返回首页
    </van-button>
    <van-button 
      type="primary" 
      style="width: 45%; border-radius: 1rem; font-size: 18px;"
      @click="jumpReceipt"
    >查看预约
    </van-button>
  </div>
</template>

<script setup lang="ts">

  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import succeedImg from '../../static/preOrderSucceed.png'

  const route = useRoute()
  const router = useRouter()
  const packageId = ref<any>('')

  // 返回首页
  const jumpHome = () => {
    router.replace({
      path: '/home'
    })
  }

  // 跳转体检预约单页面
  const jumpReceipt = () => {
    router.push({
      path: '/myPreOrder',
    })
  }

  onMounted(() => {
    console.log(route.query.id)
    packageId.value = route.query.id
  })

</script>

<style scoped lang="scss">
  .succeedImg{
    width: 80%;
    margin: 5rem auto;
    margin-bottom: 0.5rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .tit{
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .btns-area{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem auto;
  }
</style>