<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-input v-model="pageNo" placeholder="药单号" style="width: 145px" clearable></el-input>
            <el-divider direction="vertical"></el-divider>
            <el-button type="primary" icon="Search" @click="beginInquiry">查询</el-button>
            <el-button type="danger" icon="Printer" @click="printPage">打印</el-button>
        </template>
        <template #aside>
            <el-table :data="pageNos" stripe highlight-current-row @row-click="handlePageRowClick">
                <el-table-column prop="pageNo" label="药单号" width="100"></el-table-column>
                <el-table-column prop="confirmDate" label="确认时间" width="135"></el-table-column>
            </el-table>
        </template>
        <template #main>
            <div id="printArea">
                <table id="pageTable" style="width: 100%">
                    <thead>
                    <tr>
                        <td colspan="7"
                            style="width: 100%; text-align: center; padding: 16px 0; border: none">
                            <div style="position: relative">
                                <span style="font-size: 18px; font-weight: bold">
                                    医技科室领药单查询
                                </span>
                                <div style="position: absolute; top: 0; right: 200px">打印日期：{{today}}</div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7" style="border: none">
                            <div style="display: flex; height: 26px">
                                <div style="width: 23%">确认时间：{{currentPageNo.confirmDate}}</div>
                                <div style="width: 23%">领药科室：{{userInfo.deptName}}</div>
                                <div style="width: 23%">药品库房：住院药房</div>
                                <div style="width: 23%">单号：{{currentPageNo.pageNo}}</div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>药品编码</td>
                        <td>药品名称</td>
                        <td>规格</td>
                        <td>请领数量</td>
                        <td>单价</td>
                        <td>金额</td>
                        <td>发药数量</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in pageDetails" :key="index">
                        <td>{{ item.chargeCode }}</td>
                        <td>{{ item.drugName }}</td>
                        <td>{{ item.spec }}</td>
                        <td>{{ item.amount }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.chargeFee }}</td>
                        <td style="color: red">{{ item.amountFy }}</td>
                    </tr>
                    <tr>
                        <td colspan="4" style="border: none">
                            确认人：{{currentPageNo.confirmId}}
                        </td>
                        <td colspan="3" style="border: none">
                            合计金额：{{currentPageNo.totalCharge || '0.00'}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </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 {initLodop, getLodop} from '@/utils/c-lodop'
import {fetchSubmittedPageNos, fetchMedicinePageDetail} from "@/api/medicine-management/index.js"

const dateRange = $ref([])
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 pageNo = $ref(null)
const pageNos = ref([])
const currentPageNo = ref({})
const pageDetails = ref([])

const beginInquiry = () => {
    const params = {
        start: dateRange[0],
        end: dateRange[1],
        dept: userInfo.value.deptCode,
        pageNo: pageNo
    }
    fetchSubmittedPageNos(params).then(res => {
        pageNos.value = res
    })
}

const calculatePageTotalCharge = (res) => {
    let sum = 0.00
    for (let i = 0; i < res.length; i++) {
        sum += res[i].chargeFee
    }
    currentPageNo.value.totalCharge = sum.toFixed(2)
}

const handlePageRowClick = (page) => {
    currentPageNo.value = page
    fetchMedicinePageDetail(page).then(res => {
        pageDetails.value = res
        calculatePageTotalCharge(res)
    })
}

const printPage = () => {
    const styleContent = '<style>#pageTable tr td, #pageTable tr th {border: 1px solid black;text-align: center;font-size: 12px} #pageTable {border-collapse: collapse;}</style>'
    const strFormHtml = styleContent + '<body>' + document.getElementById('printArea').innerHTML + '</body>'
    let LODOP = getLodop()
    LODOP.PRINT_INIT('pagedetail')
    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>
#pageTable tr td, #pageTable tr th {
    border: 1px solid black;
    text-align: center;
    font-size: 12px;
    padding: 4px 0;
}
#pageTable {
    border-collapse: collapse;
}
</style>