<template>
  <window-size>
    <div style="display: flex; width: 100%; height: 100%;">
      <div style="width: 330px;height: 100%; padding: 0 12px; border-right: 1px solid lightgray">
        <div class="flex-header">
          <el-input v-model="patNo" placeholder="住院号" clearable style="width: 160px"></el-input>
          <el-button type="primary" icon="Search" style="margin-left: 20px" @click="fetchOverview">查询</el-button>
        </div>
        <div style="width: 336px">
          <el-table :height="tableHeight" :data="patList" stripe highlight-current-row style="width: 336px"
                    @row-click="fetchBriefPatInfo">
            <el-table-column prop="times" label="次数" width="35"></el-table-column>
            <el-table-column prop="name" label="姓名" width="70"></el-table-column>
            <el-table-column prop="totalCharge" label="总费用" width="75"></el-table-column>
            <el-table-column prop="admdate" label="入院"></el-table-column>
            <el-table-column prop="disdate" label="出院">
              <template #default="scope">
                <span v-html="ajustDisdate(scope.row.disdate)"></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="position: fixed; right: 16px; top: 16px">
        <el-button type="success" plain circle icon="Upload" title="自费上传" @click="selfpayUpload"></el-button>
        <el-button type="primary" plain circle icon="Printer" title="打印" @click="execPrint"></el-button>
        <el-button type="danger" plain circle icon="Close" @click="closeTablet" title="关闭"></el-button>
      </div>
      <div id="printArea" style="width: calc(100% - 350px);height: 100%;margin: 0 10px">
        <table style="width: 100%">
          <thead>
          <tr>
            <td colspan="8"
                style="width: 96%;height: 40px;text-align: center;vertical-align:center;font-size: 20px;font-weight: bold;">
              住院病人费用明细清单
            </td>
          </tr>
          <tr>
            <td colspan="8" style="font-size: 16px; font-weight: bold">
              床号：{{ briefPatInfo.bedNo }}
            </td>
          </tr>
          <tr>
            <td style="height: 22px">住院号：{{ briefPatInfo.patNo }}</td>
            <td colspan="2">姓名：{{ briefPatInfo.name }}</td>
            <td colspan="3">性别：{{ briefPatInfo.gender }}</td>
            <td colspan="2">科室：{{ briefPatInfo.dept }}</td>
          </tr>
          <tr>
            <td style=";height: 22px">入院日期：{{ briefPatInfo.admdate }}</td>
            <td colspan="2">医疗类别：{{ briefPatInfo.medtype }}</td>
            <td colspan="3">可用余额：{{ briefPatInfo.balance }}</td>
            <td colspan="2">总费用：{{ briefPatInfo.totalCost }}</td>
          </tr>
          <tr>
            <td style="border-bottom: 2px solid black;height: 22px">开始日期：{{ briefPatInfo.begndate }}</td>
            <td colspan="2" style="border-bottom: 2px solid black">结束日期：{{ briefPatInfo.enddate }}</td>
            <td colspan="3" style="border-bottom: 2px solid black">天数：{{ briefPatInfo.days }}</td>
            <td colspan="2" style="border-bottom: 2px solid black">账页号：{{ briefPatInfo.ledger }}</td>
          </tr>
          <tr>
            <td style="height:28px;width: 20%;border-bottom: 1px solid lightgray">医保编码</td>
            <td style="width: 20%;border-bottom: 1px solid lightgray">项目名称</td>
            <td style="width: 8%;border-bottom: 1px solid lightgray">规格</td>
            <td style="width: 8%;border-bottom: 1px solid lightgray">单位</td>
            <td style="width: 8%;border-bottom: 1px solid lightgray">单价</td>
            <td style="width: 8%;border-bottom: 1px solid lightgray">数量</td>
            <td style="width: 8%;border-bottom: 1px solid lightgray">金额</td>
            <td style="width: 20%;border-bottom: 1px solid lightgray">执行科室</td>
          </tr>
          </thead>
           <tbody v-for="(val, key) in chargeListMap" :id="key">
           <tr><td style="height: 28px;font-weight: bold;font-size: 14px; border-bottom: 1px solid #333">{{ key }}</td></tr>
           <tr v-for="(item, index) in val" :key="index">
             <td style="width: 20%;height: 28px;padding: 4px 12px 4px 0">{{ item.code }}</td>
             <td style="width: 20%;height: 28px;padding: 4px 12px 4px 0">{{ item.name }}</td>
             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.specification }}</td>
             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.unit }}</td>
             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.priceString }}</td>
             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.quantityString }}</td>
             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.costString }}</td>
             <td style="width: 20%;height: 28px;padding: 4px 12px 4px 0">{{ item.execDept }}</td>
           </tr>
           <tr>
             <td colspan="7" style="border-bottom: 1px solid lightgray"></td>
             <td style="text-align: left; font-size: 15px;font-weight: bold;border-bottom: 1px solid lightgray">小计：{{sumsMap[key]}}</td>
           </tr>
           </tbody>
           <tbody>
           <tr>
             <td colspan="7" style="height:36px;border-bottom: 2px solid black"></td>
             <td style="text-align: left; font-size: 15px;font-weight: bold;border-bottom: 2px solid black">总计：{{ sumsMap['总计'] }}</td>
           </tr>
           </tbody>
        </table>
      </div>
    </div>
  </window-size>
</template>

<script>
import WindowSize from "@/components/window-size/Index.vue";
import {selectPatOverviews, selectBriefPatInfo, selectChargeList, executeSelfpayUpload} from "@/api/inpatient/charge-list";
import {ElMessage, ElMessageBox} from "element-plus";
import {getLodop, initLodop} from '@/utils/c-lodop'

export default {
  components: {WindowSize},
  props: {
    patNo: {
      type: String,
      require: false,
      default: null
    },
    times: {
      type: Number,
      require: false,
      default: null
    },
  },
  emits: ['close'],
  setup(props, ctx) {
    const tableHeight = window.innerHeight - 72
    const patList = ref([])
    const briefPatInfo = ref({})
    const chargeListMap = ref({})
    const sumsMap = ref({})

    const chargeListBoxStyle = {
      height: window.innerHeight - 180 + 'px',
      width: '100%',
      overflowY: 'scroll'
    }

    const fetchOverview = () => {
      if (!props.patNo) {
        ElMessage({
          message: '住院号不能为空！',
          type: 'warning',
          duration: 2500,
          showClose: true
        })
        return
      }
      selectPatOverviews(props.patNo).then(res => {
        patList.value = res
      })
    }

    const ajustDisdate = (disdate) => {
      return disdate ? disdate : '<span style="color: green">● 在院</span>'
    }

    const fetchBriefPatInfo = (row) => {
      selectBriefPatInfo(row).then(res => {
        briefPatInfo.value = res
        selectChargeList(row).then(rslt => {
          chargeListMap.value = rslt.chargeList
          sumsMap.value = rslt.sumsMap
        })
      })
    }

    const selfpayUpload = () => {
      if (!briefPatInfo.value.patNo) {
        ElMessage({
          message: '请先选择住院历史记录。',
          type: 'warning',
          duration: 2500,
          showClose: true
        })
        return
      }
      executeSelfpayUpload(briefPatInfo.value).then(res => {
        ElMessageBox.alert(res, '上传完成', {
          type: 'info',
          showCancelButton: false,
        })
      })
    }

    const execPrint = () => {
      if (!briefPatInfo.value.patNo) {
        ElMessage({
          message: '请先选择住院历史记录。',
          type: 'warning',
          duration: 2500,
          showClose: true
        })
        return
      }
      let LODOP = getLodop();
      const prntStyle = `<style>table, table * {margin: 0;padding: 0;border-collapse: collapse;font-size: 12px}</style>`
      const prntContent = document.getElementById('printArea').innerHTML
      let pagePrint = prntStyle + '<body>' + prntContent + '</body>'
      LODOP.PRINT_INIT('chargelist')
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
      LODOP.ADD_PRINT_TABLE('0mm', '0mm', '210mm', '230mm', pagePrint)
      LODOP.SET_PRINT_STYLE('ItemType', 3)
      LODOP.ADD_PRINT_TEXT('275mm', '177mm', '20mm', '10mm', '第#页/共&页')
      LODOP.PRINT()
    }

    onMounted(() => {
      initLodop()
      if (props.patNo && props.times) {
        selectPatOverviews(props.patNo).then(res => {
          patList.value = res
        })
      }
    })

    const closeTablet = () => {
      ctx.emit('close')
    }
    return {
      tableHeight,
      patList,
      briefPatInfo,
      chargeListMap,
      sumsMap,
      chargeListBoxStyle,
      fetchOverview,
      ajustDisdate,
      fetchBriefPatInfo,
      closeTablet,
      selfpayUpload,
      execPrint,
    }
  },
}
</script>

<style scoped>
.flex-header {
  display: flex;
  width: 100%;
  height: 60px;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

table, table * {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}
</style>