<template>
  <window-size>
    <van-cell title="就诊人" center>
      <template #default>
        <p style="color: #333333">{{ routeParams.name }}</p>
        <span style="font-size: 12px">{{ routeParams.inpatientNo }}</span>
      </template>
    </van-cell>
    <van-cell title="医院名称" value="长沙泰和医院"></van-cell>
    <van-cell title="住院科室" :value="routeParams.deptName"></van-cell>
    <van-cell title="可用余额">
      <template #default>
        <span style="color: orangered">￥ {{ routeParams.lastBalance }}</span>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-tag>选择预交金额</van-tag>
    <div style="height: 5px"></div>
    <van-row gutter="10">
      <van-col :span="8">
        <van-button type="success" block :plain="isPlainButton(500)" @click="setPrepaidAmount(500)">
          ￥ 500
        </van-button>
      </van-col>
      <van-col :span="8">
        <van-button type="success" block :plain="isPlainButton(1000)" @click="setPrepaidAmount(1000)">
          ￥ 1000
        </van-button>
      </van-col>
      <van-col :span="8">
        <van-button type="success" block :plain="isPlainButton(1500)" @click="setPrepaidAmount(1500)">
          ￥ 1500
        </van-button>
      </van-col>
    </van-row>
    <div style="height: 5px"></div>
    <van-row gutter="10">
      <van-col :span="8">
        <van-button type="success" block :plain="isPlainButton(2000)" @click="setPrepaidAmount(2000)">
          ￥ 2000
        </van-button>
      </van-col>
      <van-col :span="8">
        <van-button type="success" block :plain="isPlainButton(3000)" @click="setPrepaidAmount(3000)">
          ￥ 3000
        </van-button>
      </van-col>
      <van-col :span="8">
        <van-button type="success" block :plain="isPlainButton(5000)" @click="setPrepaidAmount(5000)">
          ￥ 5000
        </van-button>
      </van-col>
    </van-row>
    <div style="height: 5px"></div>
    <van-row gutter="10">
      <van-col :span="24">
        <van-field
          v-model="otherAmount"
          label="其他金额"
          type="digit"
          placeholder="请输入大于 0 的整数"
          clearable
        ></van-field>
      </van-col>
    </van-row>
    <div style="height: 20px"></div>
    <van-button type="primary" block @click="beforePay">提交订单</van-button>
  </window-size>
</template>

<script setup>
import { ref } from 'vue'
import { showConfirmDialog } from 'vant'
import { useRouter } from 'vue-router'
import store from "@/store";

const router = useRouter()
const routeParams = router.currentRoute.value.params
const prepaidAmount = ref(500)
const otherAmount = ref(null)
const isPlainButton = (val) => {
  return val !== prepaidAmount.value
}
const setPrepaidAmount = (val) => {
  otherAmount.value = null
  prepaidAmount.value = val
}

const beforePay = () => {
  if (otherAmount.value) {
    prepaidAmount.value = Number.parseInt(otherAmount.value)
  }
  showConfirmDialog({
    message: '您正在为【' + routeParams.name + '】缴纳住院预交金，金额为【' + prepaidAmount.value + '】。确认支付吗？',
    title: '提示',
    confirmButtonText: '前往支付',
    cancelButtonText: '取消',
  }).then(() => {
    toCashier()
  }).catch(() => {})
}

function toCashier() {
  const createOrderRequest = {
    body: '住院预交金',
    orderType: 3,
    totalFee: prepaidAmount.value,
    patientId: routeParams.patientId,
    inpatientNo: routeParams.inpatientNo,
    admissTimes: routeParams.admissTimes,
    deptName: routeParams.deptName,
    fundpayAmt: 0,
    acctpayAmt:0,
    cashpayAmt: prepaidAmount.value,
    couponAmt: 0,
    patientName: routeParams.name
  }
  store.dispatch({
    type: 'storeCreateOrderRequest',
    createOrderRequest,
  }).then(() => {
    router.push('/cashier')
  })
}
</script>
