<template>
  <window-size>
    <van-empty v-if="showEmpty" :image="empty" description="您没有待缴费记录"></van-empty>
    <div v-else>
      <van-grid :column-num="1">
        <van-grid-item>
          <template #default>
            <div style="font-size: 12px">支付金额(元)</div>
            <div style="color: orangered; font-size: 30px; font-weight: bold; margin-top: 5px">
              {{ appointment.totalAmount }}
            </div>
          </template>
        </van-grid-item>
      </van-grid>
      <div style="height: 5px"></div>
      <van-cell title="费用类型" value="挂号费"></van-cell>
      <van-cell title="就诊科室" :value="appointment.unitCode"></van-cell>
      <van-cell title="医生姓名" :value="appointment.doctorCode"></van-cell>
      <van-cell title="就诊日期" :value="appointment.requestDayStr"></van-cell>
      <van-cell title="就诊时段" :value="appointment.ampm"></van-cell>
      <van-cell title="就诊人" :value="appointment.name"></van-cell>
      <van-cell title="就诊卡号" :value="appointment.patientId"></van-cell>
      <div style="height: 10px"></div>
      <van-button type="primary" block @click="toCashier">去支付</van-button>
    </div>
  </window-size>
</template>

<script setup>
import empty from '@/assets/empty.png'
import {onMounted, ref} from 'vue'
import { getMzyReqrecInfo } from '@/api/appointment.js'
import {useRouter} from "vue-router";
import store from "@/store";
const router = useRouter()
const patientId = router.currentRoute.value.params.patientId
const times = router.currentRoute.value.params.times

const appointment = ref({})
const showEmpty = ref(true)

function toCashier() {
  const createOrderRequest = {...appointment}
  createOrderRequest.body = '诊间挂号'
  createOrderRequest.orderType = 0
  createOrderRequest.totalFee = appointment.totalAmount
  createOrderRequest.mzyRequestId = appointment.times
  createOrderRequest.fundpayAmt = 0
  createOrderRequest.acctpayAmt = 0
  createOrderRequest.cashpayAmt = appointment.totalAmount
  createOrderRequest.couponAmt = 0
  createOrderRequest.patientName = appointment.name
  store.dispatch({
    type: 'storeCreateOrderRequest',
    createOrderRequest,
  }).then(() => {
    router.push('/cashier')
  })
}

onMounted(() => {
  const params = { patientId, times, filterUnpaidReq: true }
  getMzyReqrecInfo(params).then(res => {
    appointment.value = res
    showEmpty.value = false
  }).catch(() => {
    showEmpty.value = true
  })
})
</script>
