<template>
  <el-dialog :model-value="visible" :width="width" title="支付" :close-on-press-escape="false"
    :close-on-click-modal="!loading" @close="close()">
    <!-- <div class="flex">
      <div class="flex-grow w-0">
        <el-scrollbar wrap-class="max-h-60vh">
          <el-row>
            <template v-for="item in list">
              <el-col :span="6">
                <div class="pl-10px py-5px text-15px leading-22px text-gray-500 text-right">{{item.label}}</div>
              </el-col>
              <el-col :span="6">
                <div class="py-5px text-15px leading-22px text-black font-semibold text-right">{{form[item.key]||''}}
                </div>
              </el-col>
            </template>
          </el-row>
        </el-scrollbar>
      </div> -->
    <div class="pl-15px pr-20px py-10px">
      <!-- <div class="flex items-center text-blue-500 pl-15px pb-15px">
          <el-icon class="text-20px mr-5px">
            <Money />
          </el-icon>
          <div class="text-17px font-semibold">现金</div>
        </div> -->
      <div class="pl-15px flex items-center justify-between py-15px">
        <div class="text-16px text-gray">费用总额</div>
        <div class="text-16px text-black font-semibold">{{form.totalamount}}</div>
      </div>
      <div class="pl-15px flex items-center justify-between border-t border-gray-200 py-15px">
        <div class="text-16px text-gray">医保支付</div>
        <div class="text-16px text-black font-semibold">{{ybFee}}</div>
      </div>
      <div class="pl-15px flex items-center justify-between border-t border-gray-200 py-15px">
        <div class="text-16px text-gray">应收现金</div>
        <div class="text-16px text-black font-semibold">{{form.selfpay}}</div>
      </div>
      <div class="pl-15px pt-15px flex items-center justify-between border-t border-gray-200">
        <div class="text-16px text-gray flex-shrink-0">实收现金</div>
        <el-input v-model="fee" class="ml-10px text-right w-1/2" :readonly="loading" placeholder="请输入实收现金" />
      </div>
    </div>
    <!-- </div> -->
    <template #footer>
      <div text-center>
        <el-button plain class="w-100px" type="primary" :icon="Close" @click="close()">取消</el-button>
        <el-button class="w-100px" :loading="loading" :icon="Select" type="primary" @click="confirm()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { hlwWebRegSettle } from '@/api/hlw';
import { Close, Select } from "@element-plus/icons-vue";
import BigNumber from "bignumber.js";

const emits = defineEmits(["close", "change"]);
const props = defineProps({
  visible: { type: Boolean, default: false },
  patient: { type: Object, default: () => ({}) },
  data: { type: Object, default: () => ({}) },
  width: { type: [String, Number], default: "500px" },
});
const fee = ref('');
const loading = ref(false);
const form = computed(() => ({ ...props.data, ...props.patient }));
const ybFee = computed(() => {
  if (typeof form.value.totalamount === 'number' && typeof form.value.selfpay === 'number') {
    return new BigNumber(form.value.totalamount).minus(form.value.selfpay).toNumber()
  }
  return ''
})

const list = [
  { label: '人员姓名', key: 'name' },
  { label: '医疗费总额', key: '' },
  { label: '先行自付金额', key: '' },
  { label: '全自费金额', key: '' },
  { label: '超限价自费费用', key: '' },
  { label: '符合政策范围金额', key: '' },
  { label: '实际支付起付线', key: '' },
  { label: '基本医疗保险统筹基金支出', key: '' },
  { label: '基本医疗保险统筹基金支付比例', key: '' },
  { label: '职工大额医疗费用补助基金支出', key: '' },
  { label: '企业补充医疗保险基金支出', key: '' },
  { label: '居民大病保险资金支出', key: '' },
  { label: '公务员医疗补助资金支出', key: '' },
  { label: '公务员医疗补助资金支出', key: '' },
  { label: '医疗救助基金支出', key: '' },
  { label: '其他支出', key: '' },
  { label: '基金支付总额', key: '' },
  { label: '个人负担总金额', key: '' },
  { label: '个人账户支出', key: '' },
  { label: '个人现金支出', key: '' },
  { label: '医院负担金额', key: '' },
  { label: '个人账户共济支付金额', key: '' },
  { label: '余额', key: '' },
]

function close() {
  emits("close");
}

async function confirm() {
  if (loading.value) return;
  if (fee.value.trim() === '') {
    ElMessage.info('请输入实收金额');
    return;
  }
  if (Number(fee.value.trim()) !== form.value.selfpay) {
    ElMessage.info('实收金额与应收金额不符');
    return;
  }
  loading.value = true;
  emits("change", { status: 'loading', msg: '请稍等，挂号结算中...' });
  const { outparm_1101, outparm_2206A, inparm_2207A, outparm_2204 } = props.data;
  const { success, message } = await hlwWebRegSettle({ fee: Number(fee.value.trim()), id: props.data.id, orderno: props.data.orderno, outparm_1101, outparm_2206A, inparm_2207A, outparm_2204 });
  loading.value = false;
  if (success) {
    emits("change", { status: 'success', msg: message || '结算成功' });
    close()
  } else {
    emits("change", { status: 'error', msg: message || '结算失败' });
  }
}



watch(
  () => props.visible,
  (n) => {
    if (n) {
      if (form.value.selfpay === 0) {
        fee.value = '0'
      } else {
        fee.value = ''
      }
    }
  }
);
</script>
<style>
.text-right .el-input__inner {
  text-align: right;
}
</style>