<template>
  <window-size>
    <van-notice-bar left-icon="warning-o">
      <template #default>
        <div v-if="data.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">
            {{ data.appointment.fee }}
          </div>
        </template>
      </van-grid-item>
    </van-grid>
    <div style="height: 5px"></div>
    <van-cell title="费用类型" value="当班挂号"></van-cell>
    <van-cell title="就诊科室" :value="data.appointment.deptName"></van-cell>
    <van-cell title="医生姓名" :value="data.appointment.doctorName"></van-cell>
    <van-cell title="就诊日期" :value="data.appointment.date + '  ' + data.appointment.week"></van-cell>
    <van-cell title="就诊时段" :value="data.appointment.ampm"></van-cell>
    <van-cell title="就诊人" :value="data.appointment.patientName"></van-cell>
    <van-cell title="就诊卡号" :value="data.appointment.patientId"></van-cell>
    <div style="height: 10px"></div>
    <van-button type="primary" block :disabled="data.disablePayButton" @click="pay">微信支付</van-button>
  </window-size>
</template>

<script>
import store from '../../../store'
import { reactive } from 'vue'
import { getLocalOpenId } from '../../../utils/check-patient-id'
import { wxPay } from '../../../utils/wx-pay'
import { Toast } from 'vant'
import router from '../../../router'
export default {
  name: 'PayAppointmentFee',
  setup() {
    const data = reactive({
      disablePayButton: false,
      appointment: store.state.appointmentInfo,
    })
    const countDownFinish = () => {
      data.disablePayButton = true
    }
    const pay = () => {
      const param = {
        body: '挂号费',
        orderType: 1,
        totalFee: data.appointment.fee,
        openId: getLocalOpenId(),
        patientId: data.appointment.patientId,
        mzyRequestId: data.appointment.mzyRequestId,
      }
      wxPay(param)
        .then((result) => {
          Toast.success(result)
          router.push('/hospitalService')
        })
        .catch((result) => {
          Toast.success(result)
          router.push('/hospitalService')
        })
    }
    return {
      data,
      countDownFinish,
      pay,
    }
  },
}
</script>
