<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><van-button type="primary" round @click="callAPP()">测试上传4</van-button></div>
		<div v-for="(item,index) in needinfo.fileList">
			<div class="l_title">
				{{item.label}}
			</div>
			<van-uploader :ref="`uploader${index}`" accept="" :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>
			<!-- <van-button icon="plus" plain size="small" @click="callAPP(index)" type="primary">上传文件</van-button> -->

		</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'
	import Bridge from '@/jsBridge/Bridge.js'
	
	let selectedNum=ref(null);//选中的上传按钮
	const callAPP = () => {
		console.log(66666);
		// JS给APP传得参数
		const param = {
			type: 'photoLibrary',
			callBackMethod: 'upLoadAjax',
			params: {
				maxCount: '1',
				maxBytes: '2097152',
			}
		}
		Bridge.callHandler('nativePermission', param, (res) => {
			 
		})
	}
	
	const zhuce=()=>{
		Bridge.registerHandler('upLoadAjax', (datas, responseCallback) => {
			alert(datas)
		        // this.msg = `app获取js数据：${datas}`
		        // console.log(`app获取js数据：${datas}`)
		        // console.log(`responseCallback:${responseCallback}`)
		      })
	}


	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(() => {
			zhuce()
		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>