<template>
  <page-layer>
    <template #header>
      <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-select v-model="medicineType" style="width: 80px">
        <el-option value="1" label="全部" key="med-type-1"></el-option>
        <el-option value="2" label="毒麻" key="med-type-2"></el-option>
        <el-option value="3" label="非毒麻" key="med-type-3"></el-option>
      </el-select>&nbsp;&nbsp;
      <el-button type="primary" icon="Search" @click="getMedicinePages">检索</el-button>
      <el-button type="success" icon="Upload" @click="uploadMedicinePages">提交药单</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="FirstAidKit" @click="getUsedMedicines">药品查询</el-button>
      <el-button type="danger" icon="DataLine" @click="getPoisonousAnesthetics">麻、精药品使用查询</el-button>
    </template>
    <template #main>
      <div id="normalMedicinePagesArea" style="position: relative">
        <div style="width: 100%; text-align: center; font-size: 18px; font-weight: bold">医技科室领药单</div>
        <div style="display: flex; margin-top: 12px">
          <div style="width: 50%; text-align: center">统计基准：{{dateRange[0]}} 至 {{dateRange[1]}}</div>
          <div style="width: 30%">领药科室：{{userInfo.deptName}}</div>
          <div style="width: 30%">药品库房：住院药房</div>
        </div>
        <div style="position: absolute; top: 55px; left: 2%">
          <el-button plain type="primary" icon="Switch" circle title="反选" @click="switchCheck"></el-button>
        </div>
        <div style="margin-top: 8px; width: 90%; margin-left: 5%; color: black; font-size: 14px">
          <div style="display: flex; width: 100%; height: 28px; overflow-y: scroll">
            <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">提交标志</div>
            <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">药品编码</div>
            <div style="height: 26px; line-height: 26px; width: 30%; text-align: center; border: 1px solid #333">药品名</div>
            <div style="height: 26px; line-height: 26px; width: 30%; text-align: center; border: 1px solid #333">规格</div>
            <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">数量</div>
            <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">单价</div>
            <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">金额</div>
          </div>
          <div style="height: 530px; overflow-y: scroll; border-bottom: 1px solid #333">
            <div v-for="item in cptMedicines" style="display: flex; width: 100%; text-align: center" :key="item.chargeCode">
              <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">
                <input type="checkbox" v-model="item.checked">
              </div>
              <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">{{item.chargeCode}}</div>
              <div style="height: 26px; line-height: 26px; width: 30%; text-align: center; border: 1px solid #333">{{item.drugName}}</div>
              <div style="height: 26px; line-height: 26px; width: 30%; text-align: center; border: 1px solid #333">{{item.spec}}</div>
              <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">{{item.amount}}</div>
              <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">{{item.price}}</div>
              <div style="height: 26px; line-height: 26px; width: 10%; text-align: center; border: 1px solid #333">{{item.chargeFee}}</div>
            </div>
          </div>
          <div style="display: flex; margin-top: 10px">
            <div style="width: 50%">总行数：{{cptMedicines.length}}</div>
            <div style="width: 50%; text-align: right">合计金额：{{cptTotalCharge}}</div>
          </div>
        </div>
      </div>
      <el-dialog v-model="showUsedMedicines" width="820px" title="药品查询">
        <el-table :data="usedMedicines" stripe height="500">
          <el-table-column prop="chargeCode" label="药品编码" width="80"></el-table-column>
          <el-table-column prop="drugName" label="药品名" width="120"></el-table-column>
          <el-table-column prop="spec" label="规格" width="100"></el-table-column>
          <el-table-column prop="amount" label="数量" width="60"></el-table-column>
          <el-table-column prop="price" label="单价" width="60"></el-table-column>
          <el-table-column prop="chargeFee" label="金额" width="60"></el-table-column>
          <el-table-column prop="patName" label="患者姓名" width="80"></el-table-column>
          <el-table-column prop="patNo" label="住院号" width="80"></el-table-column>
          <el-table-column prop="chargeDate" label="录入时间" width="130"></el-table-column>
        </el-table>
      </el-dialog>
      <div class="dialog-no-header">
        <el-dialog fullscreen v-model="showUsedPoisonousAnesthetics">
          <div style="position: fixed; top: 10px; right: 60px;">
            <el-button type="primary" icon="Printer" @click="printUsedPoisonousAnesthetics">打印</el-button>
            <el-button type="danger" icon="Close" @click="showUsedPoisonousAnesthetics = false">关闭</el-button>
          </div>
          <div id="poisonousAnestheticsArea">
            <table id="jmtable" style="width: 100%; color: black">
              <thead>
              <tr>
                <td colspan="14" style="border: none;text-align: center; font-size: 18px; font-weight: bold">
                  {{userInfo.deptName}}精、麻药品使用登记表
                </td>
              </tr>
              <tr>
                <td colspan="7" style="border: none;text-align: left">
                  &nbsp;&nbsp;统计基准：{{dateRange[0]}} 至 {{dateRange[1]}}
                </td>
                <td colspan="7" style="border: none;text-align: right">
                  打印日期：{{ today }}&nbsp;&nbsp;
                </td>
              </tr>
              <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>
              </tr>
              <tr>
                <td style="border: none"></td>
              </tr>
              </thead>
              <tbody v-for="(val, key) in usedPoisonousAnesthetics">
                <tr v-for="(item, index) in val" :key="'usedPoisonousAnesthetics-' + key + '-' + index">
                  <td>{{item.chargeDate}}</td>
                  <td>{{item.chargeName}}</td>
                  <td>{{item.patName}}</td>
                  <td>{{item.patGender}}</td>
                  <td>{{item.socialNo}}</td>
                  <td>{{item.patNo}}</td>
                  <td>{{item.admdiag}}</td>
                  <td>{{item.spec}}</td>
                  <td>{{item.chargeAmount}}</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td style="border: none" colspan="8"></td>
                  <td style="border: none;color: #0a84fd">总计：{{poisonousAnestheticsCounts[key]}}</td>
                  <td style="border: none" colspan="5"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-dialog>
      </div>
    </template>
  </page-layer>
</template>
<script setup>
import PageLayer from "@/layout/PageLayer.vue";
import {shortcuts} from '@/data/shortcuts'
import {getFormatDatetime} from "@/utils/date";
import {computed} from "vue";
import store from "@/store";
import {fetchMedicinePages,submitMedicinePages,fetchUsedMedicines,fetchPoisonousAnesthetics} from '@/api/medicine-management/index.js'
import {ElMessage} from "element-plus";
import { initLodop, getLodop } from '@/utils/c-lodop'

const poisonousAnestheticsFlag = ['3','4']

const dateRange = $ref([])
const medicineType = $ref('1')
const cptMedicines = computed(() => {
  return allMedicines.filter(item => {
    if (medicineType === '1') {
      return true;
    }
    if (medicineType === '2') {
      return poisonousAnestheticsFlag.indexOf(item.drugFlag) !== -1
    }
    return poisonousAnestheticsFlag.indexOf(item.drugFlag) === -1
  })
})
const cptTotalCharge = computed(() => {
  let sum = 0
  cptMedicines.value.forEach(item => {
    sum += item.chargeFee
  })
  return sum;
})
let allMedicines = $ref([])
let usedMedicines = $ref([])
let showUsedMedicines = $ref(false)
let usedPoisonousAnesthetics = $ref({})
let poisonousAnestheticsCounts = $ref({})
let showUsedPoisonousAnesthetics = $ref(false)

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 userInfo = computed(() => {
  return store.getters['user/info']
})

const getMedicinePages = () => {
  const params = {
    start: dateRange[0],
    end: dateRange[1],
    dept: userInfo.value.deptCode
  }
  fetchMedicinePages(params).then(res => {
    allMedicines = res
  })
}

const switchCheck = () => {
  cptMedicines.value.forEach(item => {
    item.checked = !item.checked
  })
}

const uploadMedicinePages = () => {
  const params = {
    start: dateRange[0],
    end: dateRange[1],
    dept: userInfo.value.deptCode,
    chargeList: pickedCheckedItem()
  }
  submitMedicinePages(params).then(res => {
    allMedicines = res
    ElMessage({
      message: '提交成功',
      type: 'success',
      duration: 2500,
      showClose: true
    })
  })
}

const pickedCheckedItem = () => {
    let arr = []
    cptMedicines.value.forEach(item => {
        if (item.checked) {
            arr.push(item)
        }
    })
    return arr
}

const getUsedMedicines = () => {
  const params = {
    start: dateRange[0],
    end: dateRange[1],
    dept: userInfo.value.deptCode
  }
  fetchUsedMedicines(params).then(res => {
    usedMedicines = res
    showUsedMedicines = true
  })
}

const getPoisonousAnesthetics = () => {
  const params = {
    start: dateRange[0],
    end: dateRange[1],
    dept: userInfo.value.deptCode
  }
  fetchPoisonousAnesthetics(params).then(res => {
    usedPoisonousAnesthetics = res.medicines
    poisonousAnestheticsCounts = res.amounts
    showUsedPoisonousAnesthetics = true
  })
}

const printUsedPoisonousAnesthetics = () => {
  const styleContent = '<style>#jmtable tr td, #jmtable tr th {border: 1px solid black;text-align: center;font-size: 12px} #jmtable {border-collapse: collapse;}</style>'
  const strFormHtml = styleContent + '<body>' + document.getElementById('poisonousAnestheticsArea').innerHTML + '</body>'
  let LODOP = getLodop()
  LODOP.PRINT_INIT('poisonousAnestheticsArea')
  LODOP.SET_PRINT_PAGESIZE(2, '210mm', '297mm', '')
  LODOP.SET_PRINT_MODE('RESELECT_PRINTER', true)
  LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width')
  LODOP.ADD_PRINT_TABLE('2mm', '2mm', '292mm', '195mm', strFormHtml)
  LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1)
  LODOP.SET_PRINT_STYLE('ItemType', 3)
  LODOP.ADD_PRINT_TEXT('4mm', '267mm', '20mm', '7mm', '第#页/共&页')
  LODOP.PREVIEW()
}

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

<style scoped>
:deep(.dialog-no-header .el-dialog__header) {
  display: none;
}

#jmtable tr td, #jmtable tr th {
  border: 1px solid black;
  text-align: center;
  font-size: 12px;
}
#jmtable {
  border-collapse: collapse;
}
</style>