<template>
	<div>
		<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
		<div class="m-t-7" />
		<div class="text-left p-6 toolbarStyle">
			<div class="formStyle">
				<el-form inline>
					<el-form-item>
						<el-text class="mx-1">时间:</el-text>
					</el-form-item>
					<el-form-item>
						<el-config-provider :locale="zhCn">
							<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始时间"
								end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
								time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
						</el-config-provider>
					</el-form-item>
					<el-form-item>
						<el-space>
							<el-button type="primary" @click="searchData">查询</el-button>
							<el-button type="primary" @click="getData">重置表格</el-button>

						</el-space>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="m-t-10" />
		<div>
			<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
				:cell-style="{ textAlign: 'center' }">
				<el-table-column property="number" label="序号" width="55" type="index" />
				<el-table-column property="spider" label="所属爬虫" show-overflow-tooltip />
				<el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip />
				<el-table-column property="run_status" label="调度状态" show-overflow-tooltip>
					<template #default="scope">
						{{ '已完成' }}
					</template>
				</el-table-column>
				<el-table-column label="错误消息" show-overflow-tooltip>
					<!-- 当错误消息为空时默认值为'-' -->
					<template #default="scope">
						{{ scope.row.message || '-' }}
					</template>
				</el-table-column>
				<el-table-column property="run_status" label="运行状态" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.run_status === "unknown" ? '已结束' : scope.row.run_status }}
					</template>
				</el-table-column>
				<el-table-column property="create_time" label="调度时间" width="200" show-overflow-tooltip />
			</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" v-model:pagerCount="pageObj.pagerCount" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getSpiderTaskRecord } from '@/api/spiderTask.ts'
import { ElMessage } from 'element-plus'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus';
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
defineOptions({ name: 'Pagination' })
// 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`';
zhCn.el.pagination.goto = '跳至';
zhCn.el.pagination.pagesize = '条/页';
zhCn.el.pagination.pageClassifier = '页';
const route = useRoute()
const router = useRouter()
const taskValue = ref('')
const timeValue = ref('')
const taskOptions = [
	{
		value: 'task1',
		label: 'sk网',
	},
	{
		value: 'task2',
		label: 'nasa网',
	},
	{
		value: 'task3',
		label: '网',
	},
]
const tableData = ref([])
const pageObj = ref({
	total: 10,
	pageSize: 10,
	pageNo: 1,
	pagerCount: 5,
})
// 前往运行日志，暂时不要
// const handleDetails = (row: any) => {
// 	console.log(row);
// 	router.push({
// 		path: '/os-log/list',
// 		query: {
// 			id: row.id
// 		}
// 	})
// }
const goToStatus = () => {
	if (route.query.mode === '状态监控') {
		router.push({
			path: '/osStatus/list',
		})
	} else {
		router.push({
			path: '/osTaskInformation/list',
		})
	}
}
// 获取任务执行记录列表
const getData = async () => {
	const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total' })
	pageObj.value.total = res.data.total
	tableData.value = res.data.list
}
//  数据的方法
const searchData = async () => {
	if (!timeValue.value) {
		ElMessage.warning('请先选择时间段')
		return
	}
	let resTime = []
	const startTime = timeValue.value[0]
	const endTime = timeValue.value[1]
	resTime.push(startTime)
	resTime.push(endTime)
	const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: 'total', times: resTime })
	pageObj.value.total = res.data.total
	tableData.value = res.data.list
}

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

<style scoped>
/* 工具栏样式 */
.toolbarStyle {
	background-image: url("@/assets/picture/box3.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* 表格样式 */
.formStyle {
	display: flex;
	justify-content: space-around;
	padding: 3px;
}

/* 文字样式 */
.el-text {
	color: #FFFFFF;
}

.backStyle {
	background-image: url("@/assets/picture/back.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 5vh;
	width: 5%;
	display: flex;
	margin-left: 0.8%;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
	background-color: #1d5484;
	box-shadow: none;
}

/* 删除el选择器选中时的边框 */
.is-hovering {
	box-shadow: none !important;
}

/* 修改el输入框的样式 */
.el-input__wrapper {
	background-color: #1d5484;
	box-shadow: none;
}

/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
	background-color: #1d5484;
}

/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
	color: #FFFFFF;
}

/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
	color: #409eff;
}

/* 修改el按钮的边框为none */
.el-button:focus {
	outline: none;
}

/* 修改el日期选择器的边框为none */
.el-date-editor {
	--el-input-border-color: none
}
</style>