<template>
  <window-size>
    <van-empty :image="empty" v-if="showEmpty" description="未查询到您的门诊缴费记录。"></van-empty>
    <div v-for="item in records" :key="item.hisOrdNum">
      <van-cell
        :title="item.visitDeptName + ' | ' + item.doctorName"
        :label="item.chargeDate"
        is-link
        center
        @click="toDetail(item)"
      >
        <template #default>
          <div style="color: orangered">￥ {{ item.amount }}</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 { getMzPaidList } from '@/api/pay-mz-fee'

const router = useRouter()
const patientId = router.currentRoute.value.params.patientId
const records = ref([])
const showEmpty = computed(() => {
  return records.value.length === 0
})
const toDetail = (item) => {
  router.push({
    name: 'mzFeePaymentDetail',
    params: {
      deptName: item.visitDeptName,
      hisOrdNum: item.hisOrdNum,
      doctorName: item.doctorName,
      totalAmt: item.amount,
      datetime: item.chargeDate,
    },
  })
}
onMounted(() => {
  getMzPaidList(patientId).then((res) => {
    records.value = res
  })
})
</script>