<template>
  <xc-dialog-v2 v-model="dialog" title="退药单" @closed="emit('close')">
    <page-layer>
      <template #header>
        药房：
        <el-select v-model="groupNo" @change="queryTheDrugReturnForm">
          <el-option value="71" label="门诊"/>
          <el-option value="73" label="住院"/>
        </el-select>
        退费时间：
        <el-date-picker type="date"
                        placeholder="Pick a day"
                        value-format="YYYY-MM-DD"
                        v-model="refundTime"/>
        <el-button @click="queryTheDrugReturnForm">查询</el-button>
        <el-button @click="clickPrint">打印</el-button>
      </template>
      <template #mainMaxContentHeight>

        <div style="display: flex">
          <div style="flex: 1">
            <div v-for="(value,key) in billNoMap"
                 class="drug_button"
                 :style="selectStyle(key)"
                 @click="checkTheMedicineList(value,key)">
              药单： {{ key }}
            </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 style="font-size: 12px;margin: 5px; display: flex;justify-content: space-between">
                      <div>
                        住院号： {{ patient.inpatientNo }}
                      </div>
                      <div>
                        住院次数： {{ patient.admissTimes }}
                      </div>
                      <div>
                        姓名： {{ patient.name }}
                      </div>
                      <div>
                        药单： {{ currentPageNo }}
                      </div>
                    </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 list">
                  <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>


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

<script setup name='PrintTheDrugReturnForm'>
import {getLodop, initLodop} from '@/utils/c-lodop'
import {drugRefundForm} from '@/api/inpatient/xiang-mu-lu-ru'
import XcDialogV2 from "@/components/xiao-chan/dialog/XcDialogV2";
import PageLayer from "@/layout/PageLayer";
import {getServerDateApi} from "@/api/public-api";
import {getFormatDatetime} from "@/utils/date";

const emit = defineEmits(['close'])
const props = defineProps({
  patient: {
    type: Object
  }
})
const divRef = ref()

let groupNo = $ref('71')
let refundTime = $ref()
let dialog = $ref(true)
let list = $ref([])

/**
 * 打印退药但
 */
const clickPrint = () => {
  let LOOP = 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() // 关闭
}

let billNoMap = $ref({})

const queryTheDrugReturnForm = () => {
  drugRefundForm(groupNo, props.patient.inpatientNo, props.patient.admissTimes, refundTime == null ? '' : refundTime).then((res) => {
    billNoMap = res
  })
}

// 当前药单号
let currentPageNo = $ref('')
const checkTheMedicineList = (value, key) => {
  list = value
  currentPageNo = key
}

// 选中的样式
const selectStyle = (key) => {
  if (key === currentPageNo) {
    return {
      backgroundColor: '#f16565',
      color: '#fff'
    }
  }
}

onMounted(async () => {
  if (props.patient.groupNo) {
    groupNo = props.patient.groupNo
  }
  refundTime = getFormatDatetime(await getServerDateApi(), 'YYYY-MM-DD')
  queryTheDrugReturnForm()
  await nextTick()
  initLodop()
})

</script>

<style scoped lang="scss">
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>
