<template>
    <page-layer>
        <template #header height="45px;">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" :shortcuts="shortcuts"> </el-date-picker>
            <el-select v-model="dept" filterable remote placeholder="科室" remote-show-suffix clearable :loading="loadingDept"
                :remote-method="selectDeptMultiple" cha>
                <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="doctor" filterable remote placeholder="医生" remote-show-suffix clearable
                :loading="loadingDoctor" :remote-method="selectDoctorMultiple">
                <el-option v-for="item in doctorOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
            <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
        </template>
        <template #main>
            <xc-table :data="returnData" localPaging :height="105">
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <template v-for="col in returnData.tableDisplays">
                    <el-table-column v-if="col.prop.endsWith('-t')" :prop="col.prop" :label="col.label" :width="col.width"
                        :align="col.align" show-overflow-tooltip>
                        <template v-for="cell in returnData.chirdData">
                            <el-table-column v-if="cell.pid === col.id" :prop="cell.prop" :label="cell.label"
                                :width="cell.width" :align="cell.align" show-overflow-tooltip>
                            </el-table-column>
                        </template>
                    </el-table-column>
                    <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width" :align="col.align"
                        show-overflow-tooltip>
                    </el-table-column>
                </template>
            </xc-table>
        </template>
    </page-layer>
</template>
<script setup name="OutHospUnsettl" >
import PageLayer from '@/layout/PageLayer.vue'
import { reactive, ref } from '@vue/reactivity'
import { shortcuts, clockinShortcuts } from '@/data/shortcuts'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { ElMessage } from 'element-plus'
import { selectReportPortalMenu, exportReportPortalData } from '@/api/reports/high-report'
import { selectAllSmallDept, selectAllDoctor } from '@/api/medical-insurance/si-yb-util'
import XcTable from '@/components/xiao-chan/xc-table/XcTable.vue'

let nowDay = new Date()
nowDay.setTime(nowDay.getTime() - 24 * 60 * 60 * 1000)
let yf, inday
if (nowDay.getMonth() < 9) {
    yf = '0' + (nowDay.getMonth() + 1)
} else {
    yf = nowDay.getMonth() + 1
}
if (nowDay.getDate() < 10) {
    inday = '0' + nowDay.getDate()
} else {
    inday = nowDay.getDate()
}
let s1 = nowDay.getFullYear() + "-" + yf + "-" + inday
const start = formatDate(s1);
const end = formatDate(s1);
const dateRange = ref([]);
const queryTerm = reactive({
    startTime: "",
    endTime: "",
    dept: "",
    doctor: "",
    reportId: "mz_ysyydt",
    menuId: "147",
    type: "1",
});

const dept = ref([])
const doctor = ref([])

onMounted(() => {
    queryTerm.startTime = start + '00:00:00';
    queryTerm.endTime = end + " 23:59:59";
    dateRange.value = [start, end];
    const param = {
        str: '',
    }
    selectAllSmallDept(param).then((res) => {
        deptOptions.value = res
    })
    selectAllDoctor(param).then((res) => {
        doctorOptions.value = res
    })
    query()
});

const deptOptions = ref([])
const doctorOptions = ref([])
const loadingDept = ref(false)
const loadingDoctor = ref(false)
const selectDeptMultiple = (ks) => {
    if (ks) {
        loadingDept.value = true
        const param = {
            str: ks,
        }
        selectAllSmallDept(param).then((res) => {
            deptOptions.value = res
        })

        if (deptOptions.value) {
            setTimeout(() => {
                loadingDept.value = false
                dept.value = deptOptions.value.filter((item) => {
                    return item.label.toLowerCase().includes(ks.toLowerCase())
                })
            }, 1000)
        } else {
            deptOptions.value = []
        }
    } else {
        deptOptions.value = []
    }
}

const selectDoctorMultiple = (ys) => {
    if (ys) {
        loadingDoctor.value = true
        let d = dept.value
        const paramF = {
            str: ys,
            dept: d,
        }
        selectAllDoctor(paramF).then((res) => {
            doctorOptions.value = res
        })
        if (doctorOptions.value) {
            setTimeout(() => {
                loadingDoctor.value = false
                doctor.value = doctorOptions.value.filter((item) => {
                    return item.label.toLowerCase().includes(ys.toLowerCase())
                })
            }, 1000)
        } else {
            doctorOptions.value = []
        }
    } else {
        doctorOptions.value = []
    }
}

const returnData = ref({
    currentPage: 1,
    pageSize: 30,
    total: 0,
    data: []
});

const query = async () => {
    if (dateRange.value) {
        let dateS = getDateRangeFormatDate(dateRange.value);
        queryTerm.startTime = dateS.startTime;
        queryTerm.endTime = dateS.endTime;
    } else {
        queryTerm.startTime = start;
        queryTerm.endTime = end;
        ElMessage({
            type: "info",
            message: "默认查询本月的数据",
            duration: 2500,
            showClose: true,
        });
    }
    queryTerm.dept = dept.value;
    queryTerm.doctor = doctor.value;
    await selectReportPortalMenu(queryTerm)
        .then((res) => {
            let id
            returnData.value.tableDisplays = []
            returnData.value.chirdData = []
            res.tableDisplays.forEach(item => {
                if (item.prop.endsWith('-t')) {
                    id = item.id
                    returnData.value.tableDisplays.push(item)
                } else {
                    if (item.pid === id) {
                        returnData.value.chirdData.push(item)
                    } else {
                        returnData.value.tableDisplays.push(item)
                    }
                }
            })
            returnData.value.data = res.dataList
            returnData.value.total = returnData.value.data.length
        });
};
const exportData = () => {
    if (returnData.value.data.length <= 0) {
        ElMessage({
            message: '没有可以导出的数据！',
            type: 'warning',
            duration: 2500,
            showClose: true,
        })
    }
    queryTerm.dept = dept.value;
    queryTerm.doctor = doctor.value;
    // 导出excel表格标题
    queryTerm.exportName = '门诊部医师运营动态';
    exportReportPortalData(queryTerm)
}

</script>