<template>
  <window-size>
    <van-empty :image="empty" description="您没有待缴费记录" v-if="showEmpty"></van-empty>
    <div v-else>
      <van-notice-bar left-icon="warning-o">
        <template #default>
          <div v-if="disablePayButton">
            <span>有效支付时间已过期</span>
          </div>
          <div v-else>
            <div style="display: inline-block">请在&nbsp;&nbsp;</div>
            <div style="display: inline-block">
              <van-count-down
                  style="color: orangered"
                  :time="60 * 15 * 1000"
                  format="mm分ss秒"
                  @finish="countDownFinish"
              />
            </div>
            <div style="display: inline-block">&nbsp;&nbsp;内完成支付</div>
          </div>
        </template>
      </van-notice-bar>
      <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 :disabled="disablePayButton" @click="pay">微信支付</van-button>
    </div>
  </window-size>
</template>

<script>
import empty from '../../../assets/empty.png'
import {onMounted, ref} from 'vue'
import { wxPay } from '../../../utils/wx-pay'
import { getMzyReqrecInfo } from '../../../api/appointment.js'
import { showToast } from 'vant'
import {useRouter} from "vue-router";
export default {
  name: 'PayClinicAppointmentOrder',
  setup() {
    const router = useRouter()
    const patientId = router.currentRoute.value.params.patientId
    const times = router.currentRoute.value.params.times

    const disablePayButton = ref(false)
    const countDownFinish = () => {
      disablePayButton.value = true
    }
    const appointment = ref({})
    const showEmpty = ref(true)
    const pay = () => {
      const param = {
        body: '诊间挂号',
        orderType: 0,
        totalFee: appointment.totalAmount,
        patientId: appointment.patientId,
        mzyRequestId: appointment.times
      }
      wxPay(param).then((result) => {
        showToast({
          message: result,
          position: 'top',
        });
        router.push('/hospitalService')
      })
    }

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

    return {
      empty,
      showEmpty,
      disablePayButton,
      countDownFinish,
      appointment,
      pay,
    }
  },
}
</script>
