<template>
    <div>

        <!-- 筛选区 -->
        <div>
            <span style="margin-left: 30px">检验类型</span>
            <el-select v-model="visitType" placeholder="请选择" style="width: 140px; margin-left: 10px">
                <el-option label="检查" value="0" />
                <el-option label="化验" value="1" />
            </el-select>
            <el-input v-model="searchDoctor" placeholder="审核医生/检查项目" style="width: 240px;margin-left: 8px; " clearable />
            <el-button type="primary" class="filter-btn" style="margin-left: 8px;" @click="handleSearch">查询</el-button>
            <el-button class="filter-btn" @click="handleReset">重置</el-button>
        </div>
       
        <!-- 表格区 -->
        <el-table :data="tableData" border class="check-table" style="width: 100%">
            <el-table-column prop="item" label="检查项目" />
            <el-table-column prop="deptName" label="申请科室" />
            <el-table-column prop="applyDoctor" label="申请医生" />
            <el-table-column prop="applyTime" label="申请时间" />
            <el-table-column prop="reviewDoctor" label="审核医生" />
            <el-table-column prop="diagnosis" label="临床诊断" />
            <template #empty>
                <div class="empty-data">暂无数据</div>
            </template>
        </el-table>
        <!-- 分页区 -->
        <div class="pagination-bar">
            <span>共0条</span>
            <span class="pagination-gap">前往</span>
            <el-input v-model="page" size="small" class="page-input" style="width: 40px;" />
            <span class="pagination-gap">页</span>
            <el-pagination background layout="prev, pager, next, sizes" :total="0" :page-size="10" :current-page="page" :page-sizes="[10, 20, 50, 100]" class="pagination" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const visitType = ref('1');
    const checkType = ref('2');
    const searchDoctor = ref('');
    const tableData = ref([]); // 空数据
    const page = ref(1);
</script>

<style scoped>
    .check-indicators-container {
        background: #f6f9fb;
        min-height: 100vh;
        padding: 0;
    }

    .custom-tab-bar {
        display: flex;
        background: #7ec0fa;
        height: 40px;
        align-items: stretch;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 24px;
    }

    .custom-tab {
        color: #fff;
        font-size: 16px;
        padding: 0 32px;
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 100%;
        transition: background 0.2s;
        background: #7ec0fa;
        font-weight: 500;
    }

    .custom-tab.first.active,
    .custom-tab.active {
        background: #4a7ebc;
    }

    .custom-tab:not(.active):hover {
        background: #6bb0e6;
    }

    .custom-tab+.custom-tab {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .filter-bar {
        display: flex;
        align-items: center;
        padding: 24px 0 0 24px;
        gap: 12px;
        background: #fff;
    }

    .date-picker {
        width: 200px
    }

    .date-picker.custom-date-picker {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }

    .date-picker.custom-date-picker :deep(.el-input__wrapper) {
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 4px !important;
        border: 1px solid #dcdfe6 !important;
        font-size: 14px !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 0 8px !important;
    }

    .date-picker.custom-date-picker :deep(.el-input__inner) {
        height: 32px !important;
        line-height: 32px !important;
        font-size: 14px !important;
        padding: 0 4px !important;
    }

    .date-picker.custom-date-picker :deep(.el-range-separator) {
        padding: 0 2px !important;
        color: #c0c4cc !important;
        font-size: 14px !important;
    }

    .date-picker.custom-date-picker :deep(.el-range-input) {
        font-size: 14px !important;
        padding: 0 2px !important;
    }

    .date-picker.custom-date-picker :deep(.el-icon) {
        font-size: 16px !important;
        color: #c0c4cc !important;
    }

    .check-type {
        width: 160px;
    }

    .search-doctor {
        width: 260px;
    }

    .search-btn {
        margin-left: 8px;
    }

    .reset-btn {
        margin-left: 0;
    }

    .check-table {
        margin: 16px 0 0 0;
        background: #fff;
    }

    .check-table ::v-deep .el-table__header th {
        background: #e6f0fa;
        color: #333;
        font-weight: 500;
        font-size: 15px;
    }

    .empty-data {
        text-align: center;
        color: #999;
        padding: 32px 0;
        background: #fff;
        font-size: 16px;
    }

    .pagination-bar {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 8px 24px 24px 0;
        justify-content: flex-end;
        gap: 8px;
        font-size: 14px;
        margin-top: 0;
    }

    .pagination-gap {
        margin: 0 4px;
    }

    .page-input {
        text-align: center;
    }

    .pagination {
        margin-left: 8px;
    }
</style>