<template>
  <van-nav-bar
      title="体检预约单"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="warn" v-if="showStatus === 1">暂无体检的相关信息</div>
  <div class="receipt-area" v-if="showStatus === 0">
    <h1>体检单据</h1>
    <h2>套餐名称：</h2>
    <span>{{ packageName }}</span>
    <!-- <h2>体检项目：</h2>
    <span v-for="(item, index) in receiptInfo" :key="index">
      {{ item.mealName + '  ' }}
    </span>
    <h2>体检内容：</h2>
    <div class="meal-content" v-for="(item, index) in receiptInfo" :key="index">
      <div class="content">{{ item.mealName }}：{{ item.mealContent }}</div>
      <div class="meal-price">{{ item.mealPrice }}元</div>
    </div>
    <h2 style="color: red;">体检总价：{{ totalPrice }}元</h2> -->
  </div>
</template>

<script setup lang="ts">

  import { useRoute } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import { seePackage } from '../../api/PreOrderReceipt'

  const route = useRoute()
  const packageId = ref<any>('')
  const packageName = ref<any>('')
  const receiptInfo = ref<any[]>([])
  const totalPrice = ref<number>(0)
  const showStatus = ref<number>(0)

  // 返回上一页
  const onClickLeft = () => {
    history.back()
  }

  // 体检单据详情
  const checkPackage = () => {
    seePackage({
      cancelId: packageId.value,
      token: localStorage.getItem('token')
    }).then((res: any) => {
      console.log(res)
      if (res.data.obj.length === 0) {
        showStatus.value === 1
      } else {
        receiptInfo.value = res.data.obj
        for (let i = 0; i < res.data.obj.length; i++) {
          totalPrice.value += Number(res.data.obj[i].mealPrice) 
        }
      }
    }).catch((err: any) => {
      console.log(err)
    })
  }

  onMounted(() => {
    console.log(route.query.id, route.query.combName)
    packageId.value = route.query.id
    packageName.value = route.query.combName
    checkPackage()
  })

</script>

<style scoped lang="scss">
  .warn{
    width: 85%;
    margin: 1rem auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 0.2rem;
    font-size: 24px;
    text-align: center;
  }
  .receipt-area{
    width: 85%;
    margin: 1.5rem auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 0.2rem;
    .meal-content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      border-bottom: 1px dashed black;
      box-sizing: border-box;
      padding-bottom: 0.5rem;
    }
    h1{
      width: 100%;
      text-align: center;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 0.6rem;
    }
    h2{
      font-size: 20px;
      margin: 0.4rem 0;
      font-weight: bold;
    }
    .content{
      width: 80%;
      font-size: 18px;
      line-height: 26px;
    }
    span{
      font-size: 18px;
      line-height: 26px;
    }
    .meal-price{
      font-size: 18px;
      text-align: right;
      color: red;
    }
  }
</style>