<template>
	<view class="list-body">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="400rpx" leftText="资质列表"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="content">
			<view class="item-wrap" v-for="(val,index) in rpjFileList" :key="val.id">
				<view class="duty-item">
					<view class="top-info">
						<view class="info-title" v-if="val.file_cate_">{{val.file_cate_.name}}</view>
					</view>
					<view class="center-info" v-if="val.files_.length>0">
						<view class="info-details">上传文件：</view>
						<view class="info-details" v-for="val in val.files_">
							<a :href="val.file">{{val.name}} </a>
						</view>
					</view>
					<view class="center-info" v-else>
						<view class="info-details">暂无上传文件</view>
					</view>
					<!-- <view class="bottom-btns">
						<view class="uploadFile" @click="rpjHandle(val,'show')">
							<image src="../../../static/common/addIcon.png" mode=""></image>
							上传
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="btn" v-if="showBtns">
			<button type="primary" class="save-btn" @click="nextStep">下一步</button>
		</view>
	</view>
</template>

<script>
	/* 这是条件编译,意思是：只在APP中出现如下的代码，小程序是不支持的 */
	// #ifdef APP-PLUS
	var file = uni.requireNativePlugin('TX-File');
	const plug = uni.requireNativePlugin("Html5app-filePicker");
	const plugin = uni.requireNativePlugin("K-ChooseFilesModule");
	// #endif

	export default {
		name: "rpjFiles",
		watch: {
			/* 文件下载监听 */
			lsDownLoadImg(newVal, oldVal) {
				let val = newVal;
				if (String(newVal).indexOf(",") > -1) {
					val = String(newVal).split(",")[0] === "true";
				}
				this.$set(this.downFiles, 'downLoadImg' + this.lsFileId, val)
			},
			/* 文件下载监听 */
			principal(newVal, oldVal) {
				if (!this.itemId) {
					if (oldVal.roleId === undefined && newVal.roleId !== undefined) {
						this.formData.itemInfo.applicationDept = newVal.deptId
					}
				}
			},
		},
		data() {
			return {
				formData: {
					name: '',
				},
				head: {
					Authorization: "Bearer " + this.vuex_token
				},
				showBtns: false,
				rpjFileList: [],
				result: [],
				// 文件进度
				imgFlag: false,
				//文件下载
				downFiles: {},
				uploadImgsList: [],
				fileList :[],
				rpj:'',
				rparty:'',
				rpjName:''

			}
		},

		onLoad(params) {
			if (params.rpj) {
				this.rpj = params.rpj;
				this.rparty = params.rparty;
				this.rpjName = params.rpjName;
			}
			this.showBtns = true;
		},
		onShow() {
			this.getHeader();
			this.getRpjLists();
		},
		methods: {
			getHeader() {
				this.header = {
					Authorization: "Bearer " + this.vuex_token
				}
			},
			//获取
			getRpjLists() {
				let that = this;
				that.$u.api.rpjFileList({
					rpj: that.rpj,
					page: 0
				}).then(res => {
					that.rpjFileList = res;
					debugger;
					console.log(res)
					
				})
			},
			/* 文件删除 */
			delFile(index) {
				this.formData.leaveApplicationFiles.splice(index, 1);
			},
			/*  */
			showValue(res, file) {
				debugger;
				console.log(res)
				console.log(file)
				console.log(this.uploadImgsList)
			},
			rpjHandle() {
				let that = this;
				debugger;
				console.log(this.vuex_token)
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择
					success: function(res) {

						console.log(JSON.stringify(res.tempFilePaths));
						let tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: 'http://1.203.161.103:2800/api/file/', //服务器地址
								fileType: "image", //ZFB必填,不然报错
								filePath: item, //这个就是我们上面拍照返回或者先中照片返回的数组
								name: 'file',
								// 请求头一定要加，否则 iOS 图片上传会失败
								header: {
									'content-type': 'multipart/form-data; boundary=----WebKitFormBoundarymlJpQcllstnJXOES',
									'Authorization': 'Bearer ' + that.vuex_token,

								},
								success: (uploadFileRes) => {

								}
							});
						})
					}
				});
			},
			uploads() {
				const _this = this;
				return Promise.all(_this.uploadImgsList.map(item => _this.uploadImage(item.picturePath))).then(res => {
					return res.map(item => ({
						fileName: item.fileName,
						filePath: item.url
					}))
				})
			},
			uploadImage(url) {
				return new Promise(async (resolve, reject) => {
					uni.uploadFile({
						url: this.$u.api.uploadFile, //后台地址
						filePath: url,
						name: 'file',
						success: (uploadFileRes) => {
							resolve(JSON.parse(uploadFileRes.data));
						}
					})
				})
			},
			//提交
			async submitFlood() {
				let photoList = await this.uploads();
			},

			nextStep() {
				let that = this;
				let params = `?rpj=${that.rpj}&rparty=${that.rparty}&rpjName=${that.rpjName}`;
				uni.navigateTo({
					url: '/pages/workSpace/rpj/rpjWorkers' + params
				})
				let files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				let sData = [];
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				for (var i = 0; i < files.length; i++) {
					if (files[i].response) {
						sData.push(files[i].response.data.id)
					} else {
						for (var m = 0; m < this.fileList.length; m++) {
							if (this.fileList[m].url == files[i].url) {
								sData.push(this.fileList[m].id)
							}
						}
					}

				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
	}

	.list-body {
		background-color: #f3fbff;
		padding-bottom: 113px;
	}

	.content {
		padding: 14rpx;
	}

	.item-wrap {
		margin-bottom: 14rpx;
	}

	.duty-item {
		width: 720rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 24rpx 21rpx;
		box-sizing: border-box;
	}

	.info-title {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		line-height: 72rpx;
		color: #3d3d3d;
		flex: 1;
	}

	.right-time {
		font-size: 24rpx;
		line-height: 72rpx;
		color: #ababab;
	}

	.center-info {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.info-details {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #5b5b5b;
	}

	.bottom-btns {
		text-align: center;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 83rpx;
	}

	.uploadFile {
		color: #2c6fd9;
	}

	.uploadFile image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.btn {
		margin: auto;
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
		width: 70%;
	}

	.save-btn {
		height: 80rpx;
		color: #fff;
		font-size: 30upx;
		justify-content: center;
		align-items: center;
	}
</style>
