<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="onClickFeeItem(item)">
        <template #default>
          <span style="color: orangered">{{ makeMoney(item.totalAmt) }}</span>
        </template>
      </van-cell>
      <div style="height: 5px"></div>
    </div>
  </window-size>
</template>

<script setup>
import {getFundPayAmt, getUnPaidFee} from '@/api/pay-mz-fee'
import empty from '@/assets/empty.png'
import { useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue'

const router = useRouter()
const patientId = router.currentRoute.value.params.patientId
const unpaidFees = ref([])
const showEmpty = computed(() => {
  return unpaidFees.value.length === 0
})

const onClickFeeItem = (item) => {
  getFundPayAmt(item.hisOrdNum).then(res => {
    const routeParams = {
      patientId: patientId,
      hisOrdNum: item.hisOrdNum,
      patientName: item.patName,
      deptName: item.deptName,
      doctorCode: item.doctorCode,
      doctorName: item.doctorName,
      totalAmt: item.totalAmt,
      fundPay: res.fundPaySumamt,
      acctPay: res.acctPay,
      selfAmt: item.totalAmt - res.fundPaySumamt - res.acctPay
    }
    if (res.mdtrtId && !res.setlId) {
      routeParams.mdtrtId = res.mdtrtId;
      toMedinsSettle(routeParams);
    } else {
      toDetail(routeParams);
    }
  })
}

const toMedinsSettle = (params) => {
  router.push({
    name: 'medinsSettle',
    params,
  })
}

const toDetail = (params) => {
  router.push({
    name: 'unPaidDetail',
    params,
  })
}

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

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

onMounted(() => {
  getUnPaidFee(patientId).then((res) => {
    unpaidFees.value = res
  })
})

</script>