<template>
  <window-size>
    <div class="barcode-wrapper">
      <svg id="barcode"></svg>
    </div>
    <van-cell title="开方科室" :value="params.deptName"></van-cell>
    <van-cell title="开方医生" :value="params.doctorName"></van-cell>
    <van-cell title="开方时间" :value="params.datetime"></van-cell>
    <van-cell title="总金额">
      <template #default>
        <span style="color: orangered">￥ {{ params.totalAmt }}</span>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <div style="background: white; text-align: center; font-size: 12px; padding: 0 10px">
      <div style="height: 5px"></div>
      <van-row>
        <van-col :span="10">名称</van-col>
        <van-col :span="5">用法</van-col>
        <van-col :span="4">数量</van-col>
        <van-col :span="5">金额（￥）</van-col>
      </van-row>
      <div style="height: 10px"></div>
      <div v-for="(fee, index) in list" :key="index">
        <van-row>
          <van-col :span="10">{{ fee.xmmc }}</van-col>
          <van-col :span="5">{{ fee.ypyf }}</van-col>
          <van-col :span="4">{{ fee.zsl }}</van-col>
          <van-col :span="5">{{ fee.zfy }}</van-col>
        </van-row>
        <div style="height: 10px"></div>
      </div>
    </div>
  </window-size>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getMzPaidDetail } from '@/api/pay-mz-fee'
import JsBarcode from 'jsbarcode'

const router = useRouter()
const params = router.currentRoute.value.params
const list = ref([])

const drawBarcode = (patNo) => {
  JsBarcode('#barcode', patNo, {
    lineColor: 'rgb(0, 80, 100)',
    width: 2, //线宽
    height: 50, //条码高度
    displayValue: true,
    fontSize: 16,
    background: 'rgb(251, 251, 255)',
  })
}

onMounted(() => {
  const hisOrdNum = params.hisOrdNum
  drawBarcode(hisOrdNum.split('_')[0])
  getMzPaidDetail(hisOrdNum).then((res) => {
    list.value = res
  })
})
</script>

<style scoped>
.barcode-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
