<template>
  <page-layer>
    <template #header>
      <span style="margin-left: 0">选择：</span>
      <el-select v-model="card.cardType" style="width: 100px">
        <el-option v-for="item in cardTypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <span>请输入{{ cardName }}：</span>
      <el-input v-model="card.cardNo" style="width: 110px" clearable :placeholder="cardName" @keyup.enter="fetchReceipts"></el-input>
      <span></span>
      <el-button type="primary" icon="Search" @click="fetchReceipts">查询处方</el-button>
      <el-button type="success" icon="Check" @click="makeZyFees">保存到住院费用</el-button>
    </template>
    <template #aside>
      <el-table ref="hisOrdeNumRef" :data="hisOrdNums" stripe highlight-current-row :height="tableHeight" @row-click="switchHisOrdNum">
        <el-table-column prop="patName" label="姓名" width="60"></el-table-column>
        <el-table-column prop="hisOrdNum" label="HIS单号" width="120"></el-table-column>
        <el-table-column label="金额（￥）">
          <template #default="scope">
            {{ scope.row.totalAmt / 100 }}
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #main>
      <div class="receipt-title">长沙泰和医院处方笺</div>
      <el-divider></el-divider>
      <div class="receipt-head">
        <div>姓名：{{ currentHisOrdNum.patName }}</div>
        <div>科别：{{ currentHisOrdNum.deptName }}</div>
        <div>开具日期：{{ currentHisOrdNum.priceTime }}</div>
      </div>
      <el-divider></el-divider>
      <div :style="receiptBoxStyle">
        <div v-for="(item, index) in currentReceipts" :key="index">
          <div class="receipt-item">
            <div class="w75">
              {{ index + 1 }}）{{ item.tcName }}
              （
              <span v-if="item.specification">{{ item.specification }}</span>
              <span v-else>{{ item.drugUnit }}</span>
              ）
            </div>
            <div class="w25">&times;&nbsp;&nbsp;&nbsp;{{ item.quantity }}</div>
          </div>
          <div class="receipt-tips">
            <span v-if="item.drugQuan"> 用法：{{ item.drugQuan }}{{ item.drugUnit }}/次 </span>
            <span v-if="item.frequency"> {{ item.frequency }} </span>
            <span v-if="item.orderDays"> {{ item.orderDays }}天 </span>
            <span v-if="item.supplyCode"> {{ item.supplyName }} </span>
            <span v-if="item.instructionText"> 备注：{{ item.instructionText }} </span>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="receipt-head">
        <div style="font-size: 15px">医师：{{ currentHisOrdNum.doctorName }}</div>
        <div style="font-size: 15px">
          总金额：<span style="font-size: 18px; font-weight: bold">￥{{ currentHisOrdNum.totalAmt / 100 }}</span>
        </div>
      </div>
    </template>
  </page-layer>

</template>

<script>
import { computed, reactive, ref } from 'vue'
import { getReceipts, saveToZyFees } from '@/api/dbz-fees'
import store from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {PageLayer},
  setup() {
    const card = reactive({
      cardType: 1,
      cardNo: '',
      hisOrdNum: '',
      receipts: [],
      totalAmt: null,
    })
    const cardTypes = initCardTypes()
    const cardName = computed(() => {
      return card.cardType === 1 ? '住院号' : '门诊ID'
    })
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 45
    const receiptBoxStyle = {
      height: tableHeight - 200 + 'px',
      overflowY: 'auto',
    }

    const hisOrdNums = ref([])
    const receipts = ref({})
    const currentHisOrdNum = ref({})
    const currentReceipts = ref([])
    const hisOrdeNumRef = ref(null)

    const switchHisOrdNum = (row) => {
      currentHisOrdNum.value = row
      currentReceipts.value = receipts.value[row.hisOrdNum]
    }

    const fetchReceipts = () => {
      getReceipts(card)
        .then((res) => {
          hisOrdNums.value = res.hisOrdNums
          receipts.value = res.receipts
          hisOrdeNumRef.value.setCurrentRow(res.hisOrdNums[0])
          currentHisOrdNum.value = res.hisOrdNums[0]
          currentReceipts.value = res.receipts[res.hisOrdNums[0].hisOrdNum]
        })
        .catch(() => {
          hisOrdNums.value = []
          currentReceipts.value = []
          receipts.value = {}
          currentHisOrdNum.value = {}
        })
    }

    const makeZyFees = () => {
      if (currentReceipts.value.length === 0) {
        ElMessage({
          message: '请先选择要保存的处方！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      ElMessageBox.confirm('是否将选中的处方保存到住院费用？请谨慎操作！', '提示', {
        type: 'warning',
        confirmButtonText: '确定保存',
        cancelButtonText: '返回修改',
      })
        .then(() => {
          card.hisOrdNum = currentHisOrdNum.value.hisOrdNum
          card.receipts = currentReceipts.value
          card.totalAmt = currentHisOrdNum.value.totalAmt
          saveToZyFees(card).then(() => {
            ElMessage({
              message: '保存成功！',
              type: 'success',
              duration: 2500,
              showClose: true,
            })
            fetchReceipts()
          })
        })
        .catch(() => {})
    }
    return {
      card,
      cardTypes,
      cardName,
      receiptBoxStyle,
      fetchReceipts,
      tableHeight,
      makeZyFees,
      hisOrdNums,
      currentHisOrdNum,
      currentReceipts,
      hisOrdeNumRef,
      switchHisOrdNum,
    }
  },
}

function initCardTypes() {
  return [
    {
      code: 1,
      name: '住院号',
    },
    {
      code: 2,
      name: '门诊id',
    },
  ]
}
</script>

<style scoped>
.receipt-title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  height: 32px;
  line-height: 32px;
}
.receipt-head {
  display: flex;
  height: 22px;
  line-height: 22px;
}
.receipt-head > div {
  width: 25%;
  padding-right: 20px;
}
.receipt-item {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.w75 {
  width: 60%;
  font-size: 15px;
  color: #0f5e0f;
  font-weight: bold;
}
.w25 {
  width: 25%;
  font-size: 15px;
  color: #0f5e0f;
  font-weight: bold;
}
.receipt-tips {
  margin: 0 0 10px 100px;
}
.receipt-tips > span {
  margin-right: 15px;
}
</style>
