<template>
  <div>
    <div class="mt-20">
    </div>
    <div>
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }">
            <el-table-column type="selection" width="40" height="40" />
            <el-table-column property="name" label="序号" />
            <el-table-column property="address" label="爬虫名称" show-overflow-tooltip />
            <el-table-column label="查看任务">
                <template #default="scope">
                    <el-button type="primary" plain @click="handleDetails(scope.row)">
                        任务
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
            @pagination="getData" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'

const tableData = ref([
    {
        name: '1',
        address: 'sk网',
    },
    {
        name: '2',
        address: 'sk网',
    },
    {
        name: '3',
        address: 'sk网',
    },
    {
        name: '4',
        address: 'sk网',
    },
    {
        name: '5',
        address: 'sk网',
    },
    {
        name: '6',
        address: 'sk网',
    },
    {
        name: '7',
        address: 'sk网',
    },
    {
        name: '8',
        address: 'sk网',
    },
    {
        name: '9',
        address: 'sk网',
    },
    {
        name: '10',
        address: 'sk网',
    },

])
const pageObj = ref({
    total: 10,
    pageSize: 10,
    pageNo: 1
})
const handleDetails = (row: any) => {
    console.log(row);
}
const getData = () => {
    console.log('getData');
}
</script>

<style scoped>
/* 去除按钮边框 */
.el-button:focus {
    outline: none;
}
</style>
