<template>
    <page-layer>
        <template #main>
            <xc-table :data="returnData" :openPaging="false" :height="15">
                <el-table-column type="index" label="序号" width="100">
                    <template #default="scope">
                        <span class="index_common">{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="result" label="统计结果" width="500" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.reportName }}:
                        <span style="color: #fc0404;">{{ scope.row.overview }}</span>
                        {{ scope.row.unit }}
                    </template>
                </el-table-column>
                <el-table-column prop="timeFine" label="统计日期" width="220">
                    <template #default="scope">
                        <span v-if="scope.row.kssj">{{ scope.row.kssj }} 至 {{ scope.row.jssj }}</span>
                        <span v-else>{{ nowdate }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="port" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="reportFirstInfo(scope.row)">详细信息</el-button>
                    </template>
                </el-table-column>
            </xc-table>
        </template>
    </page-layer>
    <el-dialog :title="titleChart" v-model="fstDrawer" fullscreen destroy-on-close>
        <ReportFirstPage :reportFirst="reportFirst" />
    </el-dialog>
</template>
<script setup name="OperateMonitoring">
import PageLayer from '@/layout/PageLayer.vue'
import { getDate } from '@/utils/date'
import { clone } from '@/utils/clone'
import router from "@/router"
import { ref } from '@vue/reactivity'
import XcTable from "@/components/xiao-chan/xc-table/XcTable"
import { selectReportPortal, selectReportGroup } from '@/api/reports/high-report'
import ReportFirstPage from '@/components/operate-monitoring/ReportFirstPage.vue'

const nowdate = getDate()
const queryTerm = ref({})
onMounted(() => {
    let val = router.options.routes.filter(e => e.path === '/operateMonitoring')[0].children;
    let param = val.filter(f => f.path === 'inpatient/inHospital')[0].params
    queryTerm.value = param
    query();
});
const returnData = ref({
    currentPage: 1,
    pageSize: 30,
    total: 0,
    title: '',
    data: []
});
const query = async () => {
    selectReportPortal(queryTerm.value)
        .then((res) => {
            returnData.value.data = res.data
            returnData.value.title = res.title
        });
};
// ------------------------------详细信息----------------------------------------
const fstDrawer = ref(false)
const reportFirst = ref({})
const titleChart = ref('')
const reportFirstInfo = (row) => {
    const params = {
        reportId: row.reportId,
        reportName: row.reportName,
        reportType: row.reportType,
        displayType: row.displayType,
        menuId: row.menuId,
        levelType: queryTerm.value.levelType,
        type: queryTerm.value.type,
    }
    selectReportGroup(params).then((res) => {
        reportFirst.value = res
        titleChart.value = res.title
        fstDrawer.value = true
        reportFirst.value.row = row
        reportFirst.value.params = clone(params)
    })
}
</script>
<style scoped>
.index_common {
    text-shadow: none;
    font-size: 10px;
    padding-top: 1px;
    padding-bottom: 3px;
    font-weight: normal;
    line-height: 12px;
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 4em;
    color: #fff;
    background: #1e90ff;
}
</style>