<template>
    <page-layer>
        <template #header>
            <el-autocomplete v-model="deptNo" value-key="name" :fetch-suggestions="querySearchDept"
                :trigger-on-focus="false" clearable class="inline-input w-50 m-2" style="width: 240px"
                placeholder="请输入关键字">
                <template #prepend>科室</template>
            </el-autocomplete>
            <el-select v-model="timesTamp" style="width: 100px">
                <el-option label="全部" value="0"></el-option>
                <el-option label="24小时" value="1"></el-option>
                <el-option label="48小时" value="2"></el-option>
                <el-option label="72小时" value="3"></el-option>
            </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.sortable" :prop="col.prop" :label="col.label" :width="col.width"
                        :align="col.align" sortable show-overflow-tooltip>
                    </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 { getDateTiffDays, getDate } from '@/utils/date'
import { ElMessage } from 'element-plus'
import { selectReportPortalMenu, exportReportPortalData } from '@/api/reports/high-report'
import { selectSmallDept } from '@/api/medical-insurance/si-yb-util'
import XcTable from '@/components/xiao-chan/xc-table/XcTable.vue'

const deptNo = ref('')
const timesTamp = ref('0')
const queryTerm = reactive({
    startTime: "",
    endTime: "",
    dept: "",
    reportId: "cy_cywjs",
    menuId: "134",
    type: "1",
});

onMounted(() => {
    queryTerm.dept = deptNo.value;
    filterTimesTamp()
    query()
});

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

const querySearchDept = async (str, cb) => {
    let results = await selectSmallDept({ str })
    if (results) {
        // 调用 callback 返回建议列表的数据
        cb(results)
    }
}

const query = async () => {
    queryTerm.dept = deptNo.value;
    filterTimesTamp()

    selectReportPortalMenu(queryTerm)
        .then((res) => {
            returnData.value.tableDisplays = res.tableDisplays
            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 = deptNo.value;
    filterTimesTamp()
    // 导出excel表格标题
    queryTerm.exportName = '出院未结算统计';
    exportReportPortalData(queryTerm)
}

const filterTimesTamp = () => {
    let nowDate = getDate()
    if ('1' === timesTamp.value) {
        queryTerm.startTime = getDateTiffDays(1)
    } else if ('2' === timesTamp.value) {
        queryTerm.startTime = getDateTiffDays(2)
    } else if ('3' === timesTamp.value) {
        queryTerm.startTime = getDateTiffDays(3)
    }
    queryTerm.endTime = nowDate + " 23:59:59"
}

</script>