<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 v-if="task.type=='1'" :size="20"><el-icon-paperclip /></el-icon>
					</div>
					<div class="taskMain">
						<div class="title">
							<h2>{{ task.task_name }}</h2>
							<p><span v-time.tip="task.create_time"></span> 创建</p>
						</div>
						<div class="bottom">
							<div class="state">
								<el-tag type="info" v-if="task.status=='0'">待处理</el-tag>
								<el-tag v-if="task.status=='3'">处理中</el-tag>
								<el-tag type="info" v-if="task.status=='1'">完成</el-tag>
								<el-tag type="danger" v-if="task.status=='0'">失败</el-tag>
							</div>
							<div class="handler">
								<el-button v-if="task.status=='1'" 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-refresh" @click="refresh"></el-button>
		</el-footer>
	</el-container>
</template>

<script setup>
import {ref, onMounted} from "vue";
import api from "@/api";

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
}

function refresh(){
	getData()
}

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>
