<script setup lang="ts">
import {reactive, ref} from "vue";
import Mask from "@/components/common/Mask.vue";

const show = ref(false);
const init = (orderInfo: any) => {
  show.value = true;
  leftList.value = [
    {
      name: '起付线',
      value: orderInfo.act_pay_dedc
    },
    {
      name: '统筹基金支付比例',
      value: orderInfo.pool_prop_selfpay
    },
    {
      name: '符合政策范围金额',
      value: orderInfo.inscp_scp_amt
    },
    {
      name: '超限价自费费用',
      value: orderInfo.overlmt_selfpay
    },
    {
      name: '全自费金额',
      value: orderInfo.fulamt_ownpay_amt
    }
    ,
    {
      name: '先行自付金额',
      value: orderInfo.preselfpay_amt
    }
  ]
  centerList.value = [
    {
      name: '统筹基金支出',
      value: orderInfo.hifp_pay
    },
    {
      name: '公务员医疗补助支出',
      value: orderInfo.cvlserv_pay
    },
    {
      name: '企业补充医保支出',
      value: orderInfo.hifes_pay
    },
    {
      name: '居民大病保险支出',
      value: orderInfo.hifmi_pay
    },
    {
      name: '职工大额补助支出',
      value: orderInfo.hifob_pay
    },
    {
      name: '医疗救助金支出',
      value: orderInfo.maf_pay
    },
    {
      name: '补充医疗保险支出',
      value: orderInfo.oth_pay
    },
  ]
  rightTopList.value = [
    {
      name: '个人账户支出',
      value: orderInfo.acct_pay
    },
    {
      name: '个人账户共济支出',
      value: orderInfo.acct_mulaid_pay
    },
  ]
  rightBottomList.value = [
    {
      name: '医院负担金额',
      value: orderInfo.hosp_part_amt
    },
    {
      name: '个人现金支出',
      value: orderInfo.psn_cash_pay
    },
  ]
}
const leftList = ref<any>([
  {
    name: '起付线',
    value:'￥0.00'
  },
  {
    name: '统筹基金支付比例',
    value: '0.00'
  },
  {
    name: '符合政策范围金额',
    value: '￥0.00'
  },
  {
    name: '超限价自费费用',
    value: '￥0.00'
  },
  {
    name: '全自费金额',
    value: '￥0.00'
  },
  {
    name: '先行自付金额',
    value: '￥0.00'
  }
])
const centerList = ref<any>([
  {
    name: '统筹基金支出',
    value: '￥0.00'
  },
  {
    name: '公务员医疗补助支出',
    value: '0.00'
  },
  {
    name: '企业补充医保支出',
    value: '￥0.00'
  },
  {
    name: '居民大病保险支出',
    value: '￥0.00'
  },
  {
    name: '职工大额补助支出',
    value: '￥0.00'
  },
  {
    name: '医疗救助金支出',
    value: '￥0.00'
  },
  {
    name: '补充医疗保险支出',
    value: '￥0.00'
  },
])
const rightTopList = ref<any>([
  {
    name: '个人账户支出',
    value: '￥0.00'
  },
  {
    name: '个人账户共济支出',
    value: '￥0.00'
  },
])
const rightBottomList = ref<any>([
  {
    name: '医院负担金额',
    value: '￥0.00'
  },
  {
    name: '个人现金支出',
    value: '￥0.00'
  },
])
const formatValue = (value: number | string): string => {
  const num = parseFloat(value as string);
  return isNaN(num) ? '0.00' : num.toFixed(2);
};
defineExpose({init})
</script>

<template>
  <Mask :is-show="show" :width=918 :height="364" @close="show=false" title="支付详情">
    <div class="detail-content">
      <div class="left">
        <span class="item" v-for="item in leftList" :key="item.name">
          <span>{{ item.name }}</span>
          <span>{{ item.name != '统筹基金支付比例' ? '￥' : ''}}{{formatValue(item.value) }}{{ item.name == '统筹基金支付比例' ? '%' : ''}}</span>
        </span>
      </div>
      <div class="center">
        <span class="item" v-for="item in centerList" :key="item.name">
          <span>{{ item.name }}</span>
          <span>{{ item.name != '公务员医疗补助支出' ? '￥' : ''}}{{formatValue(item.value) }}{{ item.name == '公务员医疗补助支出' ? '%' : ''}}</span>
        </span>
      </div>
      <div class="right">
        <div class="top">
          <span class="item" v-for="item in rightTopList" :key="item.name">
            <span>{{ item.name }}</span>
            <span>￥{{ formatValue(item.value) }}</span>
          </span>
        </div>
        <div class="bottom">
            <span class="item" v-for="item in rightBottomList" :key="item.name">
            <span>{{ item.name }}</span>
            <span>￥{{ formatValue(item.value) }}</span>
          </span>
        </div>
      </div>
    </div>
  </Mask>
</template>
<style scoped lang="scss">
.detail-content {
  height: 100%;
  padding: 24px;
  display: flex;

  div {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
  }

  .left {
    padding: 24px;
    background: #F9FAFC;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      font-style: normal;
    }
  }

  .center {
    margin: 0 24px;
    padding: 24px;
    background: #FEFCF8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      font-style: normal;
    }
  }

  .right {
    display: flex;
    flex-direction: column;

    dev {
      flex: 1;
      min-height: 0;
    }

    .top {
      background: #F7FEFA;
      margin-bottom: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        font-style: normal;
      }
    }

    .bottom {
      background: #FFEEEF;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        font-style: normal;
      }
    }
  }
}
</style>