<template>
    <div>
        <div class="bigBox">
            <div class="tableBox">
                <el-table :data="reportList" height="250" style="width: 100%" :stripe="true">
                    <el-table-column label="序号" width="auto">
                        <template #default="{ $index }">{{ $index + 1 }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="任务名称" width="auto" />
                    <el-table-column prop="flash" label="变电站" width="auto" />
                    <el-table-column prop="scd" label="SCD名称" width="auto" />
                    <el-table-column prop="date" label="检测日期" width="auto" />
                    <el-table-column fixed="right" label="操作" width="auto">
                        <template #default>
                            <el-button text type="primary" size="small" ><el-icon><View /></el-icon>查看</el-button>
                            <el-button text type="primary" size="small"><el-icon><Download /></el-icon>下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <div class="pageBox">
                <Pagination :total="reportList.length"></Pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Pagination from './components/Pagination.vue'
export default {
    setup() {
        let reportList = ref([
            {
                name:"测试",
                flash:"测试1",
                scd:"sss.scd",
                date:"2000-00-00"
            },
            {
                name:"测试2",
                flash:"测试2",
                scd:"sss.scd",
                date:"2000-00-00"
            },
            {
                name:"测试3",
                flash:"测试3",
                scd:"sss.scd",
                date:"2000-00-00"
            },
        ])

        return {
            reportList,
        }
    },
    components:{
        Pagination
    }
}
</script>

<style scoped>
.bigBox{
    width: 98%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
.tableBox{
    width: 100%;
    height: 100%;
}
.pageBox{
    width: 420px;
    height: auto;
    position: absolute;
    top: 65rem;
    right: 2rem;
}
:deep(.el-scrollbar__view){
    width: 100%;
}
</style>