<template>
  <window-size>
    <van-notice-bar
        left-icon="warning-o"
        text="以下为医保预结算数据，最终结果以医保结算为准。"
    />
    <van-cell title="就诊人姓名">
      <template #default>
        <span>{{ presettle.psnName }}</span>
      </template>
    </van-cell>
    <van-cell title="医保就诊ID">
      <template #default>
        <span>{{ presettle.mdtrtId }}</span>
      </template>
    </van-cell>
    <van-cell title="医保就诊时间">
      <template #default>
        <span>{{ presettle.createTime }}</span>
      </template>
    </van-cell>
    <van-cell title="医保参保类型">
      <template #default>
        <span>{{ presettle.insutypeName }}</span>
      </template>
    </van-cell>
    <van-cell title="医保就诊类别">
      <template #default>
        <span>{{ presettle.medTypeName }}</span>
      </template>
    </van-cell>
    <van-cell title="处方总金额">
      <template #default>
        <span style="color: orangered">{{ makeMoney(presettle.medfeeSumamt) }}</span>
      </template>
    </van-cell>
    <van-cell title="医保报销金额">
      <template #default>
        <span style="color: orangered">{{ makeMoney(presettle.fundPaySumamt) }}</span>
      </template>
    </van-cell>
    <van-cell title="个账支付金额">
      <template #default>
        <span style="color: orangered">{{ makeMoney(presettle.acctPay) }}</span>
      </template>
    </van-cell>
    <van-cell title="自付金额">
      <template #default>
        <span style="color: orangered">{{ makeMoney(presettle.psnCashPay) }}</span>
      </template>
    </van-cell>

    <van-button style="margin-top: 20px" type="primary" block @click="showAcctPayPicker = true">医保结算</van-button>

    <van-popup v-model:show="showAcctPayPicker" round position="bottom">
      <van-picker
          :columns="acctPayColumns"
          @cancel="showAcctPayPicker = false"
          @confirm="executeSettle"
      />
    </van-popup>

  </window-size>
</template>

<script setup>

import router from "@/router";
import { getUnsettledMedinsTrade, medinsSettle } from '@/api/pay-mz-fee'
import {onMounted, ref} from "vue";
import {showDialog} from "vant";

const routeParams = router.currentRoute.value.params
const presettle = ref({})

const showAcctPayPicker = ref(false)
const acctPayColumns = [
  {text: '不使用个人账户', value: '0'},
  {text: '使用本人个人账户', value: '1'},
  {text: '使用共济人个人账户', value: '2'},
]

const executeSettle = ({selectedValues}) => {
  let autoSaved = false
  showAcctPayPicker.value = false
  presettle.value.acctUsedFlag = selectedValues[0]
  medinsSettle(presettle.value).then(res => {
    let message = `<div>处方总金额：<span style="color: orangered">￥${res.totalCost}</span></div><div>医保报销金额：<span style="color: orangered">￥${res.fundPay}</span></div><div>个账支付金额：<span style="color: orangered">￥${res.acctPay}</span></div><div>个人自付金额：<span style="color: orangered">￥${res.selfPay}</span></div>`
    if (Number.parseFloat(res.selfPay) === 0) {
      autoSaved = true
      message += `<div style="margin-top: 12px;color: red">您的自费部分为0，已为您自动保存处方。</div>`
    }
    showDialog({
      title: '结算成功',
      message: message,
      allowHtml: true,
      confirmButtonText: autoSaved ? '确定' : '前往缴费'
    }).then(() => {
      if (autoSaved) {
        router.push('/hospitalService')
      } else {
        routeParams.totalAmt = Number.parseFloat(res.totalCost) * 100
        routeParams.selfAmt = Number.parseFloat(res.selfPay) * 100
        routeParams.fundPay = Number.parseFloat(res.fundPay) * 100
        routeParams.acctPay = Number.parseFloat(res.acctPay) * 100
        router.push({
          name: 'unPaidDetail',
          params: routeParams,
        })
      }

    })
  })
}

onMounted(() => {
  getUnsettledMedinsTrade(routeParams.mdtrtId).then(res => {
    presettle.value = res
  })
})

function makeMoney(money) {
  return '￥' + Number.parseFloat(money).toFixed(2)
}

</script>