<template>
  <window-size>
    <van-empty :image="empty" description="您没有待缴费记录" v-if="showEmpty"></van-empty>
    <div v-for="item in unpaidFees" :key="item.hisOrdNum">
      <van-cell :title="makeTitle(item)" :label="item.priceTime" is-link center @click="toDetail(item)">
        <template #default>
          <span style="color: orangered">{{ makeMoney(item.totalAmt) }}</span>
        </template>
      </van-cell>
      <div style="height: 5px"></div>
    </div>
  </window-size>
</template>

<script>
import { getUnPaidFee } from '../../../api/pay-mz-fee'
import empty from '../../../assets/empty.png'
import { useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
export default {
  name: 'PayMzFee',
  setup() {
    const router = useRouter()
    const patientId = router.currentRoute.value.params.patientId
    const unpaidFees = ref([])
    const showEmpty = computed(() => {
      return unpaidFees.value.length === 0
    })
    const toDetail = (item) => {
      router.push({
        name: 'unPaidDetail',
        params: {
          patientId: patientId,
          hisOrdNum: item.hisOrdNum,
          patName: item.patName,
          deptName: item.deptName,
          doctorName: item.doctorName,
          totalAmt: item.totalAmt,
          selfAmt: item.selfAmt,
          fundPay: item.fundPay,
          acctPay: item.acctPay
        },
      })
    }
    onMounted(() => {
      getUnPaidFee(patientId).then((res) => {
        unpaidFees.value = res
      })
    })
    return {
      empty,
      patientId,
      unpaidFees,
      showEmpty,
      makeTitle,
      makeMoney,
      toDetail,
    }
  },
}

function makeTitle(item) {
  return item.deptName + ' | ' + item.doctorName
}

function makeMoney(money) {
  const m = money / 100
  return '￥ ' + m.toFixed(2)
}
</script>