<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="序号" type="index" width="80" />
				<el-table-column property="spider" 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'
import { getSpiderList } from '@/api/system.ts'
const router = useRouter()
const tableData = ref([])
const pageObj = ref({
	total: 10,
	pageSize: 10,
	pageNo: 1
})
const handleDetails = (row: any) => {
	// console.log(row);
	router.push({
		path: '/osTaskInformation/list',
		query: {
			jump: 'yes',
			spiderType: row.spider,
			page:'spiderManager'
		}
	})
}
// 获取爬虫数据的方法
const getData = async () => {
	const res = await getSpiderList({scrapydServerId:'1',project:'spiders'})
	tableData.value = res.data
}

onMounted(() => {
	getData()
})
</script>

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