<template>
  <window-size>
    <van-cell title="就诊人" center>
      <template #default>
        <p style="color: #333333">{{ params.name }}</p>
        <span style="font-size: 12px">{{ params.inpatientNo }}</span>
      </template>
    </van-cell>
    <van-cell title="医院名称" value="湖南泰和医院"></van-cell>
    <van-cell title="住院科室" :value="params.deptName"></van-cell>
    <van-cell title="可用余额">
      <template #default>
        <span style="color: orangered">￥ {{ params.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>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getLocalOpenId } from '../../../utils/check-patient-id'
import { wxPay } from '../../../utils/wx-pay'
import { Dialog } from 'vant'
export default {
  setup() {
    const router = useRouter()
    const params = 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 = otherAmount.value
      }
      Dialog.confirm({
        message: '您正在为【' + params.name + '】缴纳住院预交金，金额为【' + prepaidAmount.value + '】。确认支付吗？',
        title: '提示',
        confirmButtonText: '支付',
        cancelButtonText: '取消',
      })
        .then(() => {
          pay()
        })
        .catch(() => {})
    }

    const pay = () => {
      const param = {
        body: '住院预交金',
        orderType: 3,
        totalFee: prepaidAmount.value,
        openId: getLocalOpenId(),
        patientId: params.patientId,
        inpatientNo: params.inpatientNo,
        admissTimes: params.admissTimes,
      }
      wxPay(param)
    }
    return {
      params,
      isPlainButton,
      setPrepaidAmount,
      otherAmount,
      beforePay,
      pay,
    }
  },
}
</script>

<style scoped>
.input-amount {
  width: 100%;
  height: 30px;
  padding: 0px 8px;
  font-size: 12px;
  color: rgb(7, 193, 96);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(7, 193, 96);
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  transition: opacity 0.2s ease 0s;
  appearance: none;
}
</style>