<template>
  <window-size>
    <van-empty :image="empty" v-if="showEmpty" description="此功能正在开发中，不影响您的自助缴费。"></van-empty>
    <van-notice-bar v-if="!showEmpty" left-icon="volume-o" :scrollable="false">
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item>
          住院号：{{ data.baseInfo.inpatientNo }}， 住院次数：{{ data.baseInfo.admissTimes }}
        </van-swipe-item>
        <van-swipe-item>
          入院日期：{{ data.baseInfo.admissDate }}，入院科室：{{ data.baseInfo.deptName }}
        </van-swipe-item>
        <van-swipe-item> 总金额：￥ {{ data.baseInfo.totalCharge }} </van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <div style="height: 5px"></div>
    <div v-for="(pay, index) in data.prepaid" :key="index">
      <van-cell :label="pay.depoDate" center>
        <template #title>第{{ pay.depoTimes }}次充值预交金</template>
        <template #default>
          <span style="color: orangered">￥ {{ pay.depoAmount }}</span>
        </template>
      </van-cell>
      <div style="height: 3px"></div>
    </div>
  </window-size>
</template>

<script setup>
import { computed, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import empty from '@/assets/empty.png'
import { getPrepaidHistory } from '@/api/inpatient-service'

const router = useRouter()
const patientId = router.currentRoute.value.params.patientId
const data = reactive({
  baseInfo: {},
  prepaid: [],
})
const showEmpty = computed(() => {
  return data.prepaid.length === 0
})
onMounted(() => {
  getPrepaidHistory(patientId).then((res) => {
    data.baseInfo = res.baseInfo
    data.prepaid = res.prepaid
  })
})
</script>

<style scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>