<template>
  <page-layer>
    <template #header>
      <el-select v-model="chargeType" style="width: 60px">
        <el-option :value="ChargeType.MEDICINE" label="药品"></el-option>
        <el-option :value="ChargeType.OTHER" label="项目"></el-option>
      </el-select>&nbsp;&nbsp;
      <el-date-picker
          v-model="dateRange"
          type="daterange"
          :shortcuts="shortcuts"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          size="small"
          @change="formatDateRange"
          style="width: 200px"
      ></el-date-picker>&nbsp;&nbsp;
      <el-input v-model="patNo" style="width: 100px" placeholder="住院号" clearable></el-input>&nbsp;&nbsp;
      <xc-combo-grid v-model="chargeName"
                     clearable
                     style="width: 260px"
                     code="chargeCode"
                     name="chargeName"
                     @row-click="handleClickRowData"
                     @clear="clearChargeCode"
                     placeholder="药品/项目名称搜索（拼音、编码、名称）"
                     :query-data-func="fetchChargeCodes">
        <el-table-column label="规格" prop="specification" width="250" show-overflow-tooltip/>
        <el-table-column label="厂家" prop="manufactor" width="250" show-overflow-tooltip/>
      </xc-combo-grid>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="Search" type="primary" @click="fetchChargeData">检索</el-button>
    </template>
    <template #main>
      <div :style="wrapperStyle">
        <table>
          <thead>
          <tr>
            <td>住院号</td>
            <td>次数</td>
            <td>姓名</td>
            <td>序号</td>
            <td>日期</td>
            <td>医嘱号</td>
            <td>医嘱名称</td>
            <td>收费编码</td>
            <td>收费名称</td>
            <td>规格</td>
            <td>数量</td>
            <td>金额</td>
            <td>操作员</td>
            <td>状态</td>
            <td>病房</td>
            <td>手术标志</td>
          </tr>
          </thead>
          <tbody v-for="(val, key) in chargeItems">
          <tr>
            <td :rowspan="val.length" style="border-bottom: 2px solid red">{{ val[0].patNo }}</td>
            <td :rowspan="val.length" style="border-bottom: 2px solid red">{{ val[0].times }}</td>
            <td :rowspan="val.length" style="border-bottom: 2px solid red">{{ val[0].patName }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">1</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].chargeDate }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].orderNo }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].orderName }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].chargeCodeMx }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].drugName }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].spec }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].chargeAmount }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].chargeFee }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].staffName }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].chargeStatus }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].deptName }}</td>
            <td :style="val.length === 1 ? {borderBottom: '2px solid red'} : {}">{{ val[0].opeFlag }}</td>
          </tr>
          <tr v-for="n in (val.length - 2 < 0 ? 0 : val.length - 2)" :key="key + '_' + n">
            <td>{{n+1}}</td>
            <td>{{ val[n].chargeDate }}</td>
            <td>{{ val[n].orderNo }}</td>
            <td>{{ val[n].orderName }}</td>
            <td>{{ val[n].chargeCodeMx }}</td>
            <td>{{ val[n].drugName }}</td>
            <td>{{ val[n].spec }}</td>
            <td>{{ val[n].chargeAmount }}</td>
            <td>{{ val[n].chargeFee }}</td>
            <td>{{ val[n].staffName }}</td>
            <td>{{ val[n].chargeStatus }}</td>
            <td>{{ val[n].deptName }}</td>
            <td>{{ val[n].opeFlag }}</td>
          </tr>
          <tr v-if="val.length > 1">
            <td style="border-bottom: 2px solid red">{{val.length}}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].chargeDate }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].orderNo }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].orderName }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].chargeCodeMx }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].drugName }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].spec }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].chargeAmount }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].chargeFee }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].staffName }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].chargeStatus }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].deptName }}</td>
            <td style="border-bottom: 2px solid red">{{ val[val.length - 1].opeFlag }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div style="margin-top: 12px; font-weight: bold">
        <span>合计：</span>
        <span>数量：{{sumChargeAmount}}</span>
        <span style="margin-left: 24px">金额：￥{{sumChargeFee}}</span>
      </div>
    </template>
  </page-layer>
</template>
<script setup>
import PageLayer from "@/layout/PageLayer.vue";
import {shortcuts} from '@/data/shortcuts'
import {getFormatDatetime} from "@/utils/date";
import XcComboGrid from "@/components/xiao-chan/combo-grid/XcComboGrid.vue";
import {selectCharges, selectInputItems} from '@/api/zhu-yuan-yi-ji/charge-input-inquiry.js'
import {useStore} from "vuex";

const store = useStore()

const windowSize = store.state.app.windowSize

const wrapperStyle = {
  maxHeight: windowSize.h - 40 + 'px',
  overflowY: 'auto'
}

class ChargeType {
  static MEDICINE = 1;
  static OTHER = 2;
}

const chargeType = $ref(ChargeType.MEDICINE)
const dateRange = $ref([])
const patNo = $ref(null)
let chargeCode = $ref('')
let chargeName = $ref('')


const fetchChargeCodes = (val) => {
  return selectCharges(chargeType, val)
}

const handleClickRowData = (val) => {
  chargeCode = val.code
  chargeName = val.code + ' | ' + val.name
}

const clearChargeCode = () => {
  chargeCode = ''
  chargeName = ''
}

const today = getFormatDatetime(new Date(), 'YYYY-MM-DD')
const formatDateRange = () => {
  dateRange[0] = getFormatDatetime(dateRange[0], 'YYYY-MM-DD')
  dateRange[1] = getFormatDatetime(dateRange[1], 'YYYY-MM-DD')
}

const sumChargeAmount = ref(null)
const sumChargeFee = ref(null)
const chargeItems = ref({})

const fetchChargeData = () => {
  const params = {
    type: chargeType,
    patNo,
    chargeCode,
    start: dateRange[0],
    end: dateRange[1],
    dept: store.state.user.info.deptCode
  }
  selectInputItems(params).then(res => {
    console.log(res)
    sumChargeAmount.value = res.sumChargeAmount
    sumChargeFee.value = res.sumChargeFee
    chargeItems.value = res.chargeItems
  })
}

onMounted(() => {
  dateRange[0] = today
  dateRange[1] = today
})
</script>

<style scoped>
table {
  width: 99%;
  border-collapse: collapse;
}
td {
  border: 1px solid #333333;
  padding: 2px 4px;
  color: black;
  text-align: center;
}
thead {
  font-weight: bold;
}
</style>