<template>
	<view>
		<uni-card>
			<uni-list>
				<uni-list-item>
					<template v-slot:header>
						EU单号
					</template>
					<template v-slot:footer>
						YGTX-QJ7
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						部门
					</template>
					<template v-slot:footer>
						研发部
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						发起人
					</template>
					<template v-slot:footer>
						账号1
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						请假类别
					</template>
					<template v-slot:footer>
						年假
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						开始时间
					</template>
					<template v-slot:footer>
						2024-10-10
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						结束时间
					</template>
					<template v-slot:footer>
						2024-10-12
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						多少小时
					</template>
					<template v-slot:footer>
						48
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						部门经理审批
					</template>
					<template v-slot:footer>

					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						综合管理部审批
					</template>
					<template v-slot:footer>

					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						副总经理审批
					</template>
					<template v-slot:footer>

					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						总经理审批
					</template>
					<template v-slot:footer>

					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
		<uni-card>
			<uni-list-item>
				<template v-slot:header>
					上传附件
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:body>
					<uni-file-picker v-model="fileList" :autoUpload="false" mode="list" limit="5" file-mediatype="all"
						title="选择文件" @select="handleSelect" @progress="handleProgress" @delete="handleDelete"></uni-file-picker>
				</template>
			</uni-list-item>
		</uni-card>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	let fileList = reactive([])
	function handleSelect(e) {
		console.log('handleSelect', e)
		for (const file of e.tempFiles) {
			fileList.push(file)
		}
		console.log('fileList', fileList)
	}
	function handleProgress(e) {
		console.log('handleProgress', e)
	}
	function handleDelete(e) {
		console.log('handleDelete', e)
		fileList.splice(fileList.indexOf(e.tempFiles), 1)
		console.log('fileList', fileList)
	}
	onLoad((options) => {
		// 获取传入的标题参数
		const title = options.title || '流程信息';
		const id = options.id;
		console.log('id', id);
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: title
		});
	})
</script>

<style lang="scss">

</style>