<template>
	<div>
		<div class="mt-20" />
		<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="number" label="序号" />
				<el-table-column property="spiderName" 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, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const tableData = ref([
	{
		number: '1',
		spiderName: '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);
	router.push({
		path: '/osTaskInformation/list',
		query: {
			jump: 'yes'
		}
	})
}
const getData = () => {
	console.log('getData');
}

onMounted(() => {
	console.log('爬虫管理');
})
</script>

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