<!-- 任务执行统计卡片组件 -->
<template>
	<div class="taskCard  p-6" v-for="task in taskList" :key="task.taskId">
		<div class="flex justify-center">
			<el-form-item>
				<span class="titleStyle">任务名称</span>
			</el-form-item>
		</div>
		<div class="flex justify-center ">
			<el-form-item>
				<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
				<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
				<el-button type="danger" @click="deleteTask" class="deleteButton">删除</el-button>
			</el-form-item>
		</div>
		<div class="wordStyle flex justify-center">
			<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 flex justify-center">
			<el-form-item>
				<el-space>
					<span class="wordStyle">执行次数: {{ task.executeCount }} 个; </span>
					<span class="wordStyle">成功次数: {{ task.successCount }} 个</span>
				</el-space>
			</el-form-item>
		</div>
		<div class="wordStyle flex justify-center">
			<el-form-item>
				<el-space>
					<span class="wordStyle">失败次数: {{ task.failCount }} 个; </span>
					<span class="wordStyle">异常记录: {{ task.unusualCount }} 个</span>
				</el-space>
			</el-form-item>
		</div>
	</div>

	<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
	<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue'
defineProps({
	successTask: {
		type: String,
		default: ''
	},
	failTask: {
		type: String,
		default: ''
	},
	unusualTask: {
		type: String,
		default: ''
	}
})
const router = useRouter()
const editMode = ref('')
const deleteMode = ref('1')
const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const taskList = ref([
	{
		taskId: '1',
		taskName: '任务1',
		status: 1,
		frequency: '1',
		executeCount: '2',
		successCount: '3',
		failCount: '4',
		unusualCount: '5'
	},
	{
		taskId: '2',
		taskName: '任务2',
		status: 0,
		frequency: '6',
		executeCount: '7',
		successCount: '8',
		failCount: '9',
		unusualCount: '10'
	},
	{
		taskId: '3',
		taskName: '任务3',
		status: 1,
		frequency: '11',
		executeCount: '12',
		successCount: '13',
		failCount: '14',
		unusualCount: '15'
	},
	{
		taskId: '4',
		taskName: '任务4',
		status: 0,
		frequency: '16',
		executeCount: '17',
		successCount: '18',
		failCount: '19',
		unusualCount: '20'
	},
	{
		taskId: '5',
		taskName: '任务5',
		status: 1,
		frequency: '21',
		executeCount: '22',
		successCount: '23',
		failCount: '24',
		unusualCount: '25'
	},
	{
		taskId: '6',
		taskName: '任务6',
		status: 0,
		frequency: '26',
		executeCount: '27',
		successCount: '28',
		failCount: '29',
		unusualCount: '30'
	},
])

const deleteTask = () => {
	deleteMode.value = '1'
	showDeleteDialog.value = true
}
const editTask = () => {
	editMode.value = '2'
	showTaskDialog.value = true
}
const goToTaskRecord = () => {
	router.push({
		path: '/osTaskRecord/list',
		query: {
			jump: 'yes',
			mode: '任务信息'
		}
	})
}
const changeStatus = (task: any) => {

}
const handleEdit = () => {

}
const handleDeleteConfirm = () => {

}
</script>

<style lang="scss" scoped>
// .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;
// }
// 任务卡片样式
.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;

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

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

	}
}

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

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