<template>
	<div class="uploadfiles">
		<LoadingD :status="loading"></LoadingD>
		<van-steps active="0" active-icon="checked" active-color="#33cdc9">
			<van-step>类型选择(上传)</van-step>
			<van-step>选择日期</van-step>
			<van-step>预约完成</van-step>
		</van-steps>
		<div class="head">
			请上传"{{needinfo.label}}"相关证件
		</div>
		<div v-for="(item,index) in needinfo.fileList">
			<div class="l_title">
				{{item.label}}
			</div>
			<van-uploader :ref="`uploader${index}`" :name="index" :key="index" :after-read="afterRead"
				v-model="needinfo.fileList[index].fileurl" preview-size="2.5rem"  multiple>
				<van-button icon="plus" plain size="small" type="primary">上传文件</van-button>
			</van-uploader>
	 
		</div>
		<van-button type="primary" class="button" round @click="to()">下一步</van-button>
	</div>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import { showToast } from 'vant';
	import {
		useRouter
	} from "vue-router"
	import {
		UpFile
	} from "@/api/api.js";
	import {
		usePiniaStore
	} from '@/stores/index.js'
	const pinia = usePiniaStore()
	const router = useRouter();
	const to = () => {
		//遍历整体信息提取上传的图片 数组
		let t_filelist=[]
		let check_status=true
		needinfo.value.fileList.forEach((v,k)=>{
			t_filelist.push([])
			if(v.fileurl.length==0){
				showToast('第'+(k+1)+'项,不能为空');
				 check_status=false
			}
			v.fileurl.forEach((v1,k1)=>{
				t_filelist[k].push(v1.upurl)
			})	
		})
		
		let info = pinia.yuyue_info
		info.upfileList = t_filelist
		pinia.ChangeYuYueInfo(info)
		console.log(info);
		if(check_status){
			router.push('/selectDate')
		}
		

	}
	let loading = ref(false)
	let needinfo = ref([]) //需要展示的数据
	onMounted(() => {

		if (pinia.yuyue_info.doc_id) {
			needinfo.value = pinia.hangyeInfo[pinia.yuyue_info.doc_id - 1]
		}

	})

	const afterRead = (file, detail) => {

		if (Array.isArray(file)) {
			file.forEach(item => {
				item.status = 'uploading'
				item.message = '上传中...'
				uploadMaterialImg(item,detail)
			})
		} else {
			file.status = 'uploading'
			file.message = '上传中...'
			uploadMaterialImg(file,detail)
		}

		
	}
	const  uploadMaterialImg=(file,detail)=>{
		var data = new FormData();
		data.append('file', file.file);
		
		loading.value = true
		UpFile(data).then(res => {
			loading.value = false
			if (res.status == true) {
				file.message = ''
				file.status = ''
				file.upurl=res.data
			} else {
				showToast(res.msg);
			}
		})
	}
</script>
<style scoped>
	.uploadfiles {
		height: 100vh;
		background-image: url('../assets/image/r_head2.jpg');
		background-size: 50vw;
		background-repeat: no-repeat;
		background-position: 100% 100%;
		padding: 20px;
	}

	.head {
		font-size: 20px;
		font-weight: 700;
		color: #175e5c;
		padding-top: 10px;
	}

	.l_title {
		font-size: 14px;
		color: #4e4e4e;
		margin: 5px
	}

	.button {
		width: calc(100vw - 40px);
		background-color: #33cdc9;
		border: 0px;
		position: fixed;
		bottom: 20px;
		border: 3px solid #fff;
		left: 20px
	}
</style>