<template>
	<el-container v-loading="loading">
		<el-main>
			<el-empty v-if="tasks.length==0" :image-size="120">
				<template #description>
					<h2>没有正在执行的任务</h2>
				</template>
			</el-empty>
			<el-card v-for="task in tasks" :key="task.id" shadow="hover" class="user-bar-tasks-item">
				<div class="user-bar-tasks-item-body">
					<div class="taskIcon">
						<el-icon :size="20">
							<el-icon-paperclip/>
						</el-icon>
					</div>
					<div class="taskMain">
						<div class="title">
							<h2>{{ task.taskName }}</h2>
							<p><span v-time.tip="task.createDate"></span> 创建</p>
						</div>
						<div class="bottom">
							<div class="state">
								<el-tag type="info" v-if="task.state=='0'">待处理</el-tag>
								<el-tag type="info" v-if="task.state=='1'">处理中</el-tag>
								<el-tag type="primary" v-if="task.state=='2'">完成</el-tag>
								<el-tag type="danger" v-if="task.state=='3'">失败</el-tag>
							</div>
							<div class="handler">
								<el-button v-if="task.state=='2'" type="primary" circle icon="el-icon-download"
										   @click="download(task)"></el-button>
							</div>
						</div>
					</div>
				</div>
			</el-card>
		</el-main>
		<el-footer style="padding:10px;text-align: right;">
			<el-button circle icon="el-icon-delete" @click="removeAll"></el-button>
			<el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
		</el-footer>
	</el-container>
</template>

<script setup>
import {ref, onMounted} from "vue";
import api from "@/api";
import {ElMessageBox} from 'element-plus'

let loading = ref(false)
let tasks = ref([])


onMounted(() => {
	getData()
})

async function getData() {
	// loading.value = true
	// const res = await api.system.tasks.list();
	// tasks.value= res.data
	// loading.value = false

	tasks.value.push({
			"id": "100",
			"taskName": "年度报表生成",
			"result": "",
			"state": "0",
			"createDate": "2022-06-13 17:04:55"
		})
	tasks.value.push({
			"id": "101",
			"taskName": "系统日志导出",
			"result": "http://www.baidu.com",
			"state": "2",
			"createDate": "2022-06-12 09:31:08"
		})
}

function refresh() {
	getData()
}

function removeAll() {
	ElMessageBox.prompt('请输入“清空所有”以确认操作', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern: /^清空所有$/,
		inputErrorMessage: '输入错误',
	}).then(() => {
		tasks.value = []
	}).catch(() => {})
}

function download(row) {
	let a = document.createElement("a")
	a.style = "display: none"
	a.target = "_blank"
	a.href = row.attach
	document.body.appendChild(a)
	a.click()
	document.body.removeChild(a)
}
</script>


<style scoped>
.user-bar-tasks-item {
	margin-bottom: 10px;
}

.user-bar-tasks-item:hover {
	border-color: var(--el-color-primary);
}

.user-bar-tasks-item-body {
	display: flex;
}

.user-bar-tasks-item-body .taskIcon {
	width: 45px;
	height: 45px;
	background: var(--el-color-primary-light-9);
	margin-right: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--el-color-primary);
	border-radius: 20px;
}

.user-bar-tasks-item-body .taskMain {
	flex: 1;
}

.user-bar-tasks-item-body .title h2 {
	font-size: 15px;
}

.user-bar-tasks-item-body .title p {
	font-size: 12px;
	color: #999;
	margin-top: 5px;
}

.user-bar-tasks-item-body .bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
}
</style>
