<template>
  <el-button type="warning" @click="dialog = true">生成退药单</el-button>
  <xc-dialog-v2 v-model="dialog" title="生成退药单">
    <div class="header">
      药房：
      <el-select v-model="groupNo"
                 style="width: 90px"
                 @change="dateRangeChange">
        <el-option value="71" label="门诊"/>
        <el-option value="73" label="住院"/>
      </el-select>
      <div>
        <el-date-picker
            style="width: 220px"
            type="daterange"
            v-model="dateRange"
            @change="dateRangeChange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"/>
      </div>
      <el-divider direction="vertical"/>
      <el-button @click="clickToAccess">取数</el-button>
      <el-button @click="generateClick">生成药单</el-button>
      <el-button @click="queryTheMedicineList">查询药单</el-button>
      <el-button type="primary" icon="Printer" @click="printThePrescription">打印</el-button>
    </div>

    <div style="display: flex">
      <div style="flex: 1">
        <div v-for="(value,key) in pageNoList"
             class="drug_button"
             :style="medicationListSelectionStyle(value.pageNo)"
             @click="clickTheMedicineList(value)">
          {{ value.pageNo }}
          {{ value.groupName }}
        </div>
      </div>
      <div style="border: 1px solid; height: 500px;width: 560px">
        <div ref="divRef" style="width: 100%">
          <table>
            <thead>
            <tr>
              <th colspan="7">
                <div style="font-size: 20px;margin: 5px">护士退药单</div>
                <div>
                  药单号： {{ data.pageNo === null ? '未生成药单' : data.pageNo }}
                </div>
              </th>
            </tr>
            <tr>
              <th>编码</th>
              <th>名称</th>
              <th>规格</th>
              <th>数量</th>
              <th>零售价</th>
              <th>金额</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(drugs,di) in data.pageNo ===null ? data.notGenerated : data.toGenerate">
              <td>
                {{ drugs.chargeCode }}
              </td>
              <td>
                {{ drugs.drugName }}
              </td>
              <td>
                {{ drugs.specification }}
              </td>
              <td>
                {{ drugs.amount }}
              </td>
              <td>
                {{ drugs.packRetprice }}
              </td>
              <td>
                {{ drugs.retprice }}
              </td>
            </tr>
            </tbody>
          </table>

        </div>
      </div>
    </div>

  </xc-dialog-v2>
</template>

<script setup name='GenerateMedicineReturnOrder'>
import XcDialogV2 from "@/components/xiao-chan/dialog/XcDialogV2.vue";
import {getServerDateApi} from "@/api/public-api";
import {getDateRangeFormatDate, getFormatDatetime} from "@/utils/date";
import {
  generateMedicationList, getAPrescriptionByPageNo,
  getNoMedicineReturnOrderGenerated,
  getPrescription
} from "@/api/inpatient/xiang-mu-lu-ru";
import {BizException, ExceptionEnum} from "@/utils/BizException";
import {listIsBlank, stringIsBlank} from "@/utils/blank-utils";
import {getLodop, initLodop} from "@/utils/c-lodop";
import {clone} from "@/utils/clone";

const dialog = ref(false)
const dateRange = ref([])

let data = $ref({
  notGenerated: [],
  toGenerate: [],
  pageNo: null
})
let groupNo = $ref('73')

// 获取未生成的药单
const clickToAccess = () => {
  let {startTime, endTime} = getDateRangeFormatDate(dateRange.value)
  if (stringIsBlank(startTime)) {
    BizException(ExceptionEnum.MESSAGE_ERROR, "时间不能为空。")
  }
  getNoMedicineReturnOrderGenerated(startTime, endTime, groupNo).then((res) => {
    data.notGenerated = res
    data.pageNo = null
  });
}

const dateRangeChange = () => {
  data.notGenerated = []
}

const generateClick = async () => {
  if (listIsBlank(data.notGenerated)) {
    BizException(ExceptionEnum.MESSAGE_ERROR, "请先取数")
  }
  let {startTime, endTime} = getDateRangeFormatDate(dateRange.value)
  data.pageNo = await generateMedicationList(startTime, endTime, groupNo)
  data.toGenerate = clone(data.notGenerated)
  await queryTheMedicineList()
}

let pageNoList = $ref([])
const queryTheMedicineList = () => {
  let dateS = getDateRangeFormatDate(dateRange.value)
  getPrescription(dateS.startTime, dateS.endTime).then((res) => {
    pageNoList = res
    console.log(res)
  })
}

// 根据要单号获取药品
const clickTheMedicineList = ({pageNo}) => {
  getAPrescriptionByPageNo(pageNo).then(res => {
    console.log(res)
    data.pageNo = pageNo
    data.toGenerate = res
  })
}

const divRef = ref(null)
const printThePrescription = () => {
  let LODOP = getLodop()
  LODOP.PRINT_INIT('护士退药单') // 初始化打印机 名字
  LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')// 设置纸张大小  A4
  LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
  let style = '<style>' + 'table,tr,td{border-collapse:collapse;border:1px solid}table{width:100%}' + '</style>'
  let body = '<body>' + divRef.value?.innerHTML + '</body>'
  LODOP.ADD_PRINT_HTM('2mm', '5mm', '100%', '100%', style + body) //要打印的内容
  LODOP.PREVIEW() // 关闭
}


const medicationListSelectionStyle = (pageNo) => {
  console.log(pageNo, data.pageNo)
  if (pageNo === data.pageNo) {
    return {
      "backgroundColor": 'red',
    }
  }
}

onMounted(async () => {
  let temp = await getServerDateApi()
  temp = getFormatDatetime(temp, "YYYY-MM-DD")
  dateRange.value = [temp, temp]
  initLodop()
})

</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

table, tr, td {
  border-collapse: collapse;
  border: 1px solid;
}

table {
  width: 100%;
}

.drug_button {
  padding: 5px;
  border-radius: 5px;
  margin: 5px;
  font-size: 12px;
  cursor: default;
  text-align: center;

  background-color: #0a84fd;
  color: white;
}
</style>
