<!-- 任务执行统计卡片组件 -->
<template>
	<div class="text-left p-4 toolbarStyle ">
		<div class="formStyle">
			<el-form inline>
				<el-form-item>
					<el-text class="mx-1" style="color: #fff;">所属爬虫:</el-text>
				</el-form-item>
				<el-form-item>
					<div>
						<el-select v-model="searchCondition.spiders" placeholder="请选择" style="width: 220px">
							<el-option v-for="item in taskSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</el-form-item>
				<el-form-item>
					<el-text class="mx-1" style="color: #fff;">任务名称:</el-text>
				</el-form-item>
				<el-form-item>
					<el-input v-model="taskName" placeholder="请输入" style="width: 220px" />
				</el-form-item>
				<el-form-item>
					<el-space>
						<el-button type="primary" @Click="getData">查询</el-button>
					</el-space>
				</el-form-item>
				<el-form-item>
					<el-space>
						<el-button type="primary" @click="openTaskDialog">新建任务</el-button>
					</el-space>
				</el-form-item>
			</el-form>
		</div>
	</div>
	<div class="cardStyle">
		<div class="taskCard  p-6 " v-for="task in taskList" :key="task.taskId">
			<div class="taskContent">
				<div>
					<el-form-item>
						<span class="titleStyle">{{ task.kwargs.options === '' ? '无名称' : JSON.parse(task.kwargs.options).jobName
							}}</span>
					</el-form-item>
				</div>
				<div>
					<el-form-item>
						<el-button type="primary" @click="editTask(task)" class="editButton">编辑</el-button>
						<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
						<el-button type="danger" @click="deleteTask(task)" class="deleteButton">删除</el-button>
					</el-form-item>
				</div>
				<div class="wordStyle">
					<el-form-item>
						<el-space>
							<span class="wordStyle">启用/停止: </span>
							<el-switch v-model="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
							<span class="wordStyle">执行频率: {{ task.frequency }} </span>
						</el-space>
					</el-form-item>
				</div>
				<div class="wordStyle">
					<el-form-item>
						<el-space>
							<span class="wordStyle">执行次数: 个; </span>
							<span class="wordStyle">成功次数: 个</span>
						</el-space>
					</el-form-item>
				</div>
				<div class="wordStyle ">
					<el-form-item>
						<el-space>
							<span class="wordStyle">失败次数: 个; </span>
							<span class="wordStyle">异常记录: 个</span>
						</el-space>
					</el-form-item>
				</div>
			</div>
		</div>
	</div>

	<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" @getTaskList="getData"
		:jobId="jobId" :cron="frequency" :spiderType="spiderType" :options="taskOptions" />

	<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getData" :jobId="jobId" />

</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import addTaskDialog from './addTaskDialog.vue'
import { getSpiderTaskList } from '@/api/spiderTask'
import { DeleteMode } from '@/components/Delete/enum.ts'
import { AddMode } from './enum'
import deleteDialog from './deleteDialog.vue'
defineProps({
	successTask: {
		type: String,
		default: ''
	},
	failTask: {
		type: String,
		default: ''
	},
	unusualTask: {
		type: String,
		default: ''
	}
})
const taskSelectOptions = [
	{
		value: 'api_spider',
		label: 'api_spider',
	},
	{
		value: 'dsn_now',
		label: 'dsn_now',
	},
	{
		value: 'itu_space_explorer',
		label: 'itu_space_explorer',
	},
]
const searchCondition = ref({
	spiders: '',
	options: ''
})
const taskName = ref('')
const taskValue = ref('')
const spiderType = ref('')
const router = useRouter()
const frequency = ref('')
const editMode = ref(AddMode.UPDATE_TASK)
const deleteMode = ref(DeleteMode.SINGLE_DELETE)
const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const taskOptions = ref('')
const jobId = ref('')
const taskList = ref([
	{
		taskId: 1,
		name: '任务1',
		status: 1,
		frequency: '每天',
		kwargs: {
			options: ''
		}
	}
])

const deleteTask = (task: any) => {
	console.log(task);
	jobId.value = task.id
	deleteMode.value = DeleteMode.SINGLE_DELETE
	showDeleteDialog.value = true
}
const editTask = (task: any) => {
	jobId.value = task.id
	taskOptions.value = JSON.stringify(JSON.parse(task.kwargs.options))
	spiderType.value = task.kwargs.spider
	frequency.value = task.kwargs.cron
	editMode.value = AddMode.UPDATE_TASK
	showTaskDialog.value = true
	// console.log(JSON.stringify(JSON.parse(task.kwargs.options)));

}
const goToTaskRecord = () => {
	router.push({
		path: '/osTaskRecord/list',
		query: {
			jump: 'yes',
			mode: '任务信息'
		}
	})
}
const changeStatus = (task: any) => {

}
const handleEdit = () => {

}
const openTaskDialog = () => {
	editMode.value = AddMode.ADD_TASK
	showTaskDialog.value = true
}
const getData = async () => {
	const res = await getSpiderTaskList({ spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [] , options: JSON.stringify({ jobName: taskName.value }) })
	taskList.value = res.data
}

onMounted(() => {
	getData()

})
</script>

<style lang="scss" scoped>
.taskContent {
	display: flex;
	flex-direction: column; // 垂直排列
	align-items: center; // 水平居中
	justify-content: center; // 垂直居中
	height: 100%;
	gap: -15px;
	padding: 10px 0;
}

// .editButton{
// 	background: none;
//     background-image: url("@/assets/picture/button1.png");
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
// }
// .recordButton{
// 	background: none;
//     background-image: url("@/assets/picture/button2.png");
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
// }
// .deleteButton{
// 	background: none;
//     background-image: url("@/assets/picture/button3.png");
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
// }
.cardStyle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 1.5%;
	padding: 8px;
	height: 26vh;
}

// 任务卡片样式
.taskCard {
	background-image: url("@/assets/picture/box2.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-bottom: 20px;
	width: 380px;
	font-size: 20px;
	height: 100%;
	border-radius: 7px;
	display: flex;
	flex-direction: column;

	.titleStyle {
		font-size: 22px;
		margin-top: -5px;
		color: #FFFFFF;
	}

	.wordStyle {
		font-size: 16px;
		color: #FFFFFF;

	}
}

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

/* 表单样式 */
.formStyle {
	display: flex;
	justify-content: space-around;
	margin-top: 0.5%;
	padding: 2px;
}

// 去除按钮边框
.el-button:focus {
	outline: none;
	color: #ffffff;
	border: none;
}
</style>

<style>
/* .el-button{
	color: #ffffff;
	border: none;
} */

 .el-input {
	color: #FFFFFF;
}
</style>