kyj-yanglao-web-new/src/views/elderly/fee/bill-pay/preview.vue

<template>
  <Dialog
    v-model="dialogVisible"
    title="对账单预览"
    class="billPayPreview"
    width="60%"
    scroll
    @closed="handleClosed"
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="打印类型A(含固定费明细)" name="first">
        <div class="first" id="printTab1">
          <div class="header">
            <p class="title" style="font-size: 18px">{{ tenantName }}对账单预览</p>
            <div class="info-wrap" style="margin-top: -4px">
              <span
                ><b>姓名:</b> {{ dataForm.elderName
                }}{{
                  dataForm.contractNumber == null || dataForm.contractNumber == ''
                    ? ''
                    : `（${dataForm.contractNumber}）`
                }}</span
              >
              <span><b>床位号:</b> {{ dataForm.bedName }}</span>
              <span><b>缴费时间:</b> {{ formatTime(dataForm.payTime, 'yyyy-MM-dd') }}</span>
              <!--              <span><b>应收金额:</b> {{ totalPayAmount }}元</span>-->
              <span><b>经手人:</b> {{ dataForm.payeeName }}</span>
              <!--              <span><b>账单月:</b> {{ dataForm.billingMonth }}</span>-->
              <!--              <span><b>打印时间:</b> {{ dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') }}</span>-->
            </div>
            <!--            <div class="info-wrap" style="margin-top: -10px">-->
            <!-- <span><b>发票号:</b> {{ dataForm.invoiceNumber }}</span> -->
            <!--              <span><b>应收金额:</b> {{ totalPayAmount }}元</span>-->
            <!-- <span><b>医保费用:</b> {{ formatNum(dataForm.insuranceAmount) || '0' }}元</span>
              <span><b>个人应缴:</b> {{ formatNum(dataForm.payAmount) }}元</span> -->
            <!--              <span><b>长护险余额:</b> {{ formatNum(longTermAmount) || '0' }}元</span>-->
            <!--              <span><b>抹零金额:</b> {{ roundDown }}元</span>-->
            <!--              <span><b>个人应缴:</b> {{ payTotal }}元</span>-->
            <!--            </div>-->
            <!--            <div class="info-wrap" style="margin-top: -10px">-->
            <!--              <span><b>缴费时间:</b> {{ formatTime(dataForm.payTime, 'yyyy-MM-dd') }}</span>-->

            <!--            </div>-->
          </div>
          <el-divider style="margin-top: 0px" />
          <div class="content">
            <!--            <p class="info">以下是账单明细</p>-->
            <div class="flex">
              <b>{{
                dataForm.description
                  ? tTitle + '(' + dataForm.description + ')'
                  : tTitle + '(' + bTitle + ')'
              }}</b>
              <span><b>金额小计：</b>￥ {{ tableSubtotal }}</span>
            </div>
            <table style="width: 100%" border="2">
              <tr align="center">
                <td>序号</td>
                <td>费用分类</td>
                <td>费用名称</td>
                <!-- <td>单价(元/月)</td>
                <td>数量</td> -->
                <td>金额(元)</td>
                <td>实际发生时间</td>
                <td>备注</td>
              </tr>
              <tr v-for="(item, index) in dataForm.items" :key="index" align="center">
                <td>{{ index + 1 }}</td>
                <td>{{ item.itemCategoryName }}</td>
                <td>{{ item.itemName }}</td>
                <!-- <td>{{ tableRowPrice(item) }}</td>
                <td>{{ item.count }}</td> -->
                <td>{{ tableRowPay(item) }}</td>
                <td>{{ formatStartDate(item) }}</td>
                <td>{{ item.description }}</td>
              </tr>
              <tr align="center">
                <td>支付方式描述</td>
                <td colspan="5" class="pay-text-cell">{{ payText }}</td>
              </tr>
              <!-- <tr align="center">
                <td>预缴金额</td>
                <td colspan="5"></td>
              </tr> -->
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="打印类型B(不含固定费明细)" name="second">
        <div class="second" id="printTab2">
          <div class="header">
            <p class="title">{{ tenantName }}对账单预览</p>
            <div class="info-wrap">
              <span>{{ dataForm.billingMonth }}账单</span>
              <span>{{ tenantName }}</span>
              <div class="right">
                <span><b>打印时间:</b> {{ dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
            </div>
          </div>
          <div class="content">
            <table style="width: 100%" border="2">
              <tr align="center">
                <td>姓名</td>
                <td colspan="3">{{ dataForm.elderName }}</td>
                <td>床位号</td>
                <td colspan="3"> {{ dataForm.bedName }}</td>
              </tr>
              <tr align="center">
                <td rowspan="4">月度费用</td>
                <td colspan="2">费用名称</td>
                <td>金额(元)</td>
                <td rowspan="4">其他费用</td>
                <td colspan="2">费用名称</td>
                <td>金额(元)</td>
              </tr>
              <tr align="center">
                <td colspan="2">
                  <p>{{ tTitle }}</p>
                  <p v-if="!dataForm.description">({{ bTitle }})</p>
                  <p v-if="dataForm.description">({{ dataForm.description }})</p>
                </td>
                <td>{{ table2MonthPay }}</td>
                <td colspan="2">{{ dataForm.otherName }}</td>
                <td>{{ table2OtherPay }}</td>
              </tr>
              <tr></tr>
              <tr align="center">
                <td colspan="2">小计</td>
                <td>{{ formatNum(dataForm.monthNum) }}</td>
                <td colspan="2">小计</td>
                <td>{{ formatNum(dataForm.otherNum) }}</td>
              </tr>
              <tr>
                <td colspan="2" align="center">账单金额</td>
                <td colspan="6">{{ totalPayAmount }}元</td>
              </tr>
              <tr>
                <td colspan="2" align="center">长护险费用</td>
                <td colspan="6">{{ formatNum(longTermAmount) || '0' }}元</td>
              </tr>
              <tr>
                <td colspan="2" align="center">抹零金额</td>
                <td colspan="6">{{ formatNum(roundDown) }}元</td>
              </tr>
              <tr>
                <td colspan="2" align="center">个人应缴</td>
                <td colspan="6">{{ payTotal }}元</td>
              </tr>
            </table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="handleClosed">取消</el-button>
      <el-button type="primary" v-print="printTab2" v-if="activeName == 'second'">打印</el-button>
      <el-button type="primary" v-print="printTab1" v-if="activeName == 'first'">打印</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getExpenseOrderDetail } from '@/api/elderly/fee/bill-pay'
import dayjs from 'dayjs'
import { useUserStore } from '@/store/modules/user'
import {
  fixedNum,
  formatCeil,
  formatDecimal,
  formatNum,
  formatRid,
  formatRound
} from '@/utils/formatter'
import { useSettingStore } from '@/store/modules/setting'
import { formatTime } from '@/utils'
import { getDictLabel, DICT_TYPE } from '@/utils/dict'
defineOptions({ name: 'BillPayPreview' })
const settingStore = useSettingStore()
const tenantName = useUserStore().getTenantName // 当前登录的编号
const dialogVisible = ref(false)
const activeName = ref('first')
const dataForm = ref({
  insuranceAmount: 0,
  payAmount: 0,
  billingMonth: '',
  contractNumber: '',
  items: [],
  payInfos: [],
  otherName: '',
  otherNum: '',
  monthNum: '',
  elderName: '',
  bedName: '',
  actualAmount: '',
  type: '',
  invoiceNumber: '',
  payTime: '',
  payeeName: '',
  description: ''
})
const longTermAmount = ref(0)
const payText = ref('')
const roundDown = ref(0)

const formatPayCreatedTime = (createdTime) => {
  if (!createdTime) return ''
  const timestamp = String(createdTime).length === 10 ? Number(createdTime) * 1000 : Number(createdTime)
  return dayjs(timestamp).format('YYYY-MM-DD')
}

/** 打开弹窗 */
const open = async (id, row) => {
  dialogVisible.value = true
  const res = await getExpenseOrderDetail(id)
  let flag = false
  dataForm.value = res
  res.items = res.items.filter((item) => item.isShow == 1)
  res.items.map((item) => {
    if (item.expenseSource == 'long_term_care_insurance') {
      longTermAmount.value += item.actualPrice
      item.payStatus = 0
      flag = true
      // 遍历长护险
      res.expenseSubsidyDO.map((d) => {
        if (Math.abs(d.id || 1) == Math.abs(item.sourceExpenseItemId || 0)) {
          item.createdTime = d.month
          item.description = d.remarks
          if (!item.itemCategoryName) {
            item.itemCategoryName = '长护险'
          }
        }
      })
    }
  })
  dataForm.value.payeeName = row.payeeName

  // 已支付状态下的才是所有items
  if (res.payStatus == 0) {
    const arr = []
    res.items.map((item) => {
      if (item.payStatus == 1) {
        arr.push(item)
      }
    })
    dataForm.value.items = arr
  }
  // 已支付订单金额
  let num = 0
  let insurance = 0
  res.payInfos.map((item) => {
    item.items.map((info) => {
      const payLine =
        getDictLabel(DICT_TYPE.BILL_PAY_TYPE, info.payType) +
        '：' +
        info.payAmount +
        '元（支付时间：' +
        formatPayCreatedTime(info.createdTime) +
        '）'
      payText.value += payText.value ? '\n' + payLine : payLine
    })
    num += formatDecimal(item.payAmount) as number
    insurance += item.insuranceAmount ? (formatDecimal(item.insuranceAmount) as number) : 0
    // 看看是否有抹零金额
    if (item.discountAmount) {
      roundDown.value += item.discountAmount
    }
  })
  dataForm.value.payAmount = formatRid(num) as number
  dataForm.value.insuranceAmount = formatRid(insurance) as number

  // 有长护险
  if (!flag) {
    if (res.expenseSubsidyDO && res.expenseSubsidyDO.length) {
      let num = 0
      res.expenseSubsidyDO.map((item) => {
        num += item.amount

        dataForm.value.items.push({
          expenseSource: 'long_term_care_insurance',
          itemCategoryName: '长护险',
          itemName: '长护险抵扣',
          description: item.remarks ? item.remarks : item.month + '长护险抵扣',
          roundAmount: -item.amount,
          roundTwoDecimalAmount: -item.amount,
          totalAmount: -item.amount,
          createdTime: item.month,
          payTime: '',
          payStatus: item.status
        })
      })

      // 去除长护险费用
      // unPayTotal.value -= num

      longTermAmount.value = num
      // payTotal.value -= res.num
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const handleClick = (val) => {
  activeName.value = val
  // 计算固定费用和其他费用
  if (val == 'second') {
    let monthNum = 0,
      otherNum = 0,
      otherName = ''
    dataForm.value.items.map((item) => {
      if (item.isMonthlyExpense == 1) {
        if (rounding.value) {
          // 取整
          monthNum +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.roundAmount)
        } else if (fixed2Num.value) {
          // 四舍五入
          monthNum +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.roundTwoDecimalAmount)
        } else {
          // 应收
          monthNum +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(formatNum(item.totalAmount))
        }
      } else {
        if (item.itemName != '长护险护理补贴费用') {
          otherName += item.itemName + ';'
          if (rounding.value) {
            // 取整
            otherNum +=
              item.expenseSource == 'consumer_voucher'
                ? getConsumerVoucherAmountNumber(item)
                : Number(item.roundAmount)
          } else if (fixed2Num.value) {
            // 四舍五入
            otherNum +=
              item.expenseSource == 'consumer_voucher'
                ? getConsumerVoucherAmountNumber(item)
                : Number(item.roundTwoDecimalAmount)
          } else {
            // 应收
            otherNum +=
              item.expenseSource == 'consumer_voucher'
                ? getConsumerVoucherAmountNumber(item)
                : Number(formatNum(item.totalAmount))
          }
        }
      }
    })
    dataForm.value.monthNum = monthNum
    dataForm.value.otherNum = otherNum
    dataForm.value.otherName = otherName
  }
}

const handleClosed = () => {
  payText.value = ''
  activeName.value = 'first'
  longTermAmount.value = 0
  dialogVisible.value = false
}

// 取整金额
const rounding = computed(() => {
  return settingStore.getRounding
})

// 四舍五入保留两位
const fixed2Num = computed(() => {
  return settingStore.getFix2Num
})

const getConsumerVoucherAmountNumber = (item) => {
  const ruleValue = settingStore.getCouponRuleValue
  const rawAmount = item?.totalAmount ?? 0
  if (ruleValue == 2 || ruleValue == '2') {
    return Number(formatRound(rawAmount))
  }
  return Number(formatNum(rawAmount))
}

const getConsumerVoucherAmountText = (item) => {
  const ruleValue = settingStore.getCouponRuleValue
  const rawAmount = item?.totalAmount ?? 0
  if (ruleValue == 2 || ruleValue == '2') {
    return formatRound(rawAmount)
  }
  return formatNum(rawAmount)
}

// 账单总额
const totalPayAmount = computed(() => {
  let num1 = 0,
    num2 = 0,
    num3 = 0 // 入院向上取整 、 入院保留两位、 入院应收
  // 遍历里面的所有数据得到数据
  dataForm.value.items.map((item) => {
    if (item.itemName != '长护险护理补贴费用') {
      num1 +=
        item.expenseSource == 'consumer_voucher'
          ? getConsumerVoucherAmountNumber(item)
          : Number(item.roundAmount)
      num2 +=
        item.expenseSource == 'consumer_voucher'
          ? getConsumerVoucherAmountNumber(item)
          : Number(item.roundTwoDecimalAmount)
      if (item.isMonthlyExpense == 1 && dataForm.value.type == 1) {
        if (settingStore.getAdmissionBill == 2) {
          // 向上取整
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(formatCeil(item.totalAmount))
        } else if (settingStore.getAdmissionBill == 3) {
          // 四舍五入保留两位
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.roundTwoDecimalAmount)
        } else if (settingStore.getAdmissionBill == 4) {
          // 四舍五入取整
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.roundAmount)
        } else {
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.totalAmount)
        }
      } else {
        if (rounding.value) {
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.roundAmount)
        } else if (fixed2Num.value) {
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.roundTwoDecimalAmount)
        } else {
          num3 +=
            item.expenseSource == 'consumer_voucher'
              ? getConsumerVoucherAmountNumber(item)
              : Number(item.totalAmount)
        }
      }
    }
  })
  if (dataForm.value.type == 1) {
    return formatNum(num3)
  } else {
    if (rounding.value) {
      // 取整（有问题）
      return formatNum(num1)
    } else if (fixed2Num.value) {
      // 四舍五入
      return formatNum(num2)
    } else {
      return formatNum(dataForm.value.actualAmount)
    }
  }
})

// 个人应缴
const payTotal = computed(() => {
  let num = 0
  dataForm.value.payInfos.map((item) => {
    num += item.payAmount
  })
  return formatNum(num)
  // return formatNum(totalPayAmount.value - longTermAmount.value - roundDown.value)
})

// 表格1单价
const tableRowPrice = (row) => {
  return formatNum(row.actualPrice)
}

// 表格1总额单项小计
const tableRowPay = (row) => {
  if (row.expenseSource == 'consumer_voucher') {
    return getConsumerVoucherAmountText(row)
  }
  if (dataForm.value.type == '1' && row.isMonthlyExpense == 1) {
    if (settingStore.getAdmissionBill == 2) {
      // 向上取整
      return formatNum(formatCeil(row.totalAmount))
    } else if (settingStore.getAdmissionBill == 3) {
      // 四舍五入保留两位
      return formatNum(row.roundTwoDecimalAmount)
    } else if (settingStore.getAdmissionBill == 4) {
      // 四舍五入取整
      return formatNum(row.roundAmount)
    } else {
      return formatNum(row.totalAmount)
    }
  } else {
    if (rounding.value) {
      return formatNum(row.roundAmount)
    } else if (fixed2Num.value) {
      return formatNum(row.roundTwoDecimalAmount)
    } else {
      return formatNum(row.totalAmount)
    }
  }
}

// 表格1总额小计
const tableSubtotal = computed(() => {
  let num = 0
  dataForm.value.items.map((item) => {
    if (dataForm.value.type == '1' && item.isMonthlyExpense == 1) {
      if (settingStore.getAdmissionBill == 2) {
        // 向上取整
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(formatCeil(item.totalAmount))
      } else if (settingStore.getAdmissionBill == 3) {
        // 四舍五入保留两位
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(item.roundTwoDecimalAmount)
      } else if (settingStore.getAdmissionBill == 4) {
        // 四舍五入取整
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(item.roundAmount)
      } else {
        // 应收
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(item.totalAmount)
      }
    } else {
      if (rounding.value) {
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(item.roundAmount)
      } else if (fixed2Num.value) {
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(item.roundTwoDecimalAmount)
      } else {
        num +=
          item.expenseSource == 'consumer_voucher'
            ? getConsumerVoucherAmountNumber(item)
            : Number(item.totalAmount)
      }
    }
  })
  return formatNum(num)
})

// 表格2月度总额
const table2MonthPay = computed(() => {
  return formatNum(dataForm.value.monthNum)
})
// 表格2其他费用
const table2OtherPay = computed(() => {
  return formatNum(dataForm.value.otherNum)
})

const tTitle = computed(() => {
  const arr = dataForm.value.billingMonth ? dataForm.value.billingMonth.split('-') : ''
  if (arr.length) {
    return `预收${arr[0]}年${arr[1]}月固定费用`
  }
  return ''
})

const bTitle = computed(() => {
  const arr = dataForm.value.billingMonth ? dataForm.value.billingMonth.split('-') : ''
  if (arr.length) {
    // 获取当月最后一天
    const date = new Date(new Date(Number(arr[0]), Number(arr[1]), 0)).getDate()
    return `${arr[0]}年${arr[1]}月01日-${arr[0]}年${arr[1]}月${date}日`
  }
  return ''
})

// const formatStartDate = (item) => {
//   return item.expenseSource == 'long_term_care_insurance' || item.itemName == '长护险护理补贴费用' ? item.createdTime : (item.expenseSource == 'expense_item' ? (dataForm.value.description ? dataForm.value.description : bTitle) : (item.startDate + '至' + item.endDate))
// }
const formatStartDate = (item) => {
  if (item.itemName == '长护险护理补贴费用' || item.expenseSource == 'long_term_care_insurance') {
    // 长护险
    return item.createdTime
    // let dataStr = item.startDate??"--"
    // if(dataStr.length>=10){
    //   dataStr = dataStr.substring(0,7)
    // }
    // return dataStr
  } else if (item.expenseSource == 'expense_item') {
    // if(dataForm.value.description){
    //   return dataForm.value.description
    // }else{
    //   return bTitle
    // }
    if (item.description && item.description.includes('的')) {
      return item.description.split('的')[0]
    } else if (item.startDate != null && item.endDate != null) {
      return `${item.startDate}至${item.endDate}`
    } else if (
      item.startDate == null &&
      dataForm.value.description &&
      dataForm.value.description.length > 21
    ) {
      return dataForm.value.description.toString().substring(0, 21)
    } else {
      return bTitle
    }
  } else {
    return item.startDate + '至' + item.endDate
  }
}

const formatStr = (dateStr) => {
  if (dateStr) {
    // 2. 按 "-" 拆分字符串，得到 [年, 月, 日] 数组
    const [year, month, day] = dateStr.split('-')

    // 3. 按目标格式拼接
    return `${year}年${month}月${day}日`
  }
  return ''
}

// 打印
const printTab1 = {
  id: 'printTab1',
  extraCss: '',
  popTitle: '', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: tenantName + '对账单预览', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！')
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！')
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！')
  },
  standard: ''
}
// 打印
const printTab2 = {
  id: 'printTab2',
  extraCss: '',
  popTitle: '', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: tenantName + '对账单预览', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！')
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！')
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！')
  },
  standard: ''
}
</script>
<style lang="scss" scoped>
.first {
  .header {
    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    .info-wrap {
      position: relative;

      span {
        display: inline-block;
        margin-bottom: 10px;
        width: 25%;
      }

      .right {
        display: inline-block;
        width: 49%;
        text-align: right;
        span {
          width: 100%;
        }
      }
    }
  }
  .content {
    .info {
      text-align: center;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
}
.second {
  .header {
    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    .info-wrap {
      display: flex;
      justify-content: space-between;
    }
  }
}

.pay-text-cell {
  white-space: pre-line;
}
</style>