<template>
    <div class="appearance-monitor-warp">
        <div class="appearance-monitor-left w-[56%] h-[100%]">
            <div class="monitor-left-top">
                <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
            </div>
            <div class="monitor-left-bottom">
                <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
            </div>
        </div>
        <div class="appearance-monitor-right w-[44%] h-[100%]">
            <div class="module-header">
                <ContentHeader bgLayout="918">
                    <template #title>
                        <div class="w-[200px] bg_title bg_title_5">
                        </div>
                    </template>
                    <template #extra>
                        <div></div>
                    </template>
                </ContentHeader>
            </div>
             <!-- 表格区域 -->
             <el-table 
                :data="tableData" 
                stripe 
                style="width: 100%; margin-top: 20px"
                class="custom-table"
                >
                <el-table-column prop="carNo" label="车号" width="80"></el-table-column>
                <el-table-column prop="carType" label="车型" width="60"></el-table-column>
                <el-table-column prop="carriageNo" label="车厢号" width="80"></el-table-column>
                <el-table-column prop="warnType" label="告警类型" width="80"></el-table-column>
                <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
                <el-table-column prop="level" label="等级" width="60"></el-table-column>
                <el-table-column prop="review" label="复核" width="60"></el-table-column>
                <el-table-column prop="time" label="时间" width="120"></el-table-column>
            </el-table>

            <!-- 分页区域 -->
            
            <div class="pagination-container">
                <el-pagination
                    :page-sizes="[100, 200, 300, 400]"
                    
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import ContentHeader from '@/components/ContentHeader.vue';
import { ref } from 'vue';
// 搜索表单
const searchForm = ref({
  trainNo: 'all',
  carriageNo: 'all',
  faultType: 'all'
});

// 模拟表格数据
const tableData = ref([
  { carNo: 'CA1001', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-05 14:33' },
  { carNo: 'CA1002', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-12 15:33' },
  // 其他数据...
]);

const total = ref(66);

// 搜索方法
const handleSearch = () => {
  console.log('搜索参数', searchForm.value);
};

// 重置方法
const handleReset = () => {
  searchForm.value = {
    trainNo: 'all',
    carriageNo: 'all',
    faultType: 'all'
  };
};

// 分页切换
const handlePageChange = (page) => {
  console.log('当前页码', page);
};
</script>
<style scoped lang="scss">
.appearance-monitor-warp {
    height: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    // .appearance-monitor-right {
    //     display: flex;
    // }
    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
    :deep(.el-pagination__total) {
        color: #606266;
        margin-right: 10px;
    }

    :deep(.el-pagination__sizes .el-select__inner) {
        background: #002a5c;
        color: white;
        border: 1px solid #409eff;
    }

    :deep(.el-pagination__item), 
    :deep(.el-pagination__button) {
        background: #002a5c;
        color: white;
        border: 1px solid #409eff;
        margin-right: 5px;
    }

    :deep(.el-pagination__item.is-active) {
        background: #409eff;
        color: white;

    }
}
</style>