<template>
  <window-size>
    <van-empty v-if="showEmpty" :image="empty" description="未查询到您的挂号记录"></van-empty>
    <div v-for="(item, index) in records" :key="index">
      <van-cell center>
        <template #title>
          <div style="font-size: 12px; color: rgb(128, 128, 128)">
            <div>挂号科室：{{ item.unitName }}</div>
            <div>挂号医生：{{ item.doctorName }}</div>
            <div>挂号号别：{{ item.chargeType }}</div>
          </div>
        </template>
        <template #default>
          <div style="font-size: 12px">
            <div>
              挂号金额：<span style="color: orangered">￥ {{ item.fee }}</span>
            </div>
            <div>挂号日期：{{ item.opDay.split(' ')[0] }}</div>
            <div>就诊日期：{{ item.requestDay.split(' ')[0] }}</div>
          </div>
        </template>
      </van-cell>
    </div>
  </window-size>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import empty from '@/assets/empty.png'
import { getPaidMzGhList } from '@/api/appointment'

const router = useRouter()
const patientId = router.currentRoute.value.params.patientId
const records = ref([])
const showEmpty = computed(() => {
  return records.value.length === 0
})
onMounted(() => {
  getPaidMzGhList(patientId).then((res) => {
    records.value = res
  })
})
</script>