<template>
	<view>
		<uni-popup ref="file" type="center" :mask-click="false">
			<view class="lending_content">
				 <view class="title">
					<text>{{$lang.lang.docException.customsType}}{{orderNo}}</text>
					<view class="btns" @click="$refs.file.close()">{{$lang.lang.login.close}}</view>
				 </view>
				 <view class="file-lists">
				 	<view class="file-list" v-for="item in fileList" :key="item.id">
						 <text>{{getFileName(item.url)}}</text>
						 <view class="btns-list">
							 <view v-if="isoper" @click="deleteFile(item.id)">{{$lang.lang.create.delete}}</view>
							 <view @click="downloadFile(item.url)">{{$lang.lang.notices.upload}}</view>
						 </view>
				 	</view>
				 </view>
				<view :class="isoper?'foot_btns':'foot_btns footbtn'">
					 <view v-if="isoper" class="btn" @click="upload">{{$lang.lang.notices.newfile}}</view>
					 <view class="btn" @click="$refs.file.close()">{{$lang.lang.notices.back}}</view>
				</view>
			</view>
		</uni-popup>
		<view class="progress-container" v-if="isShowProgress">
			<view class="progress-box">
				<view class="text">{{$lang.lang.notices.startDown}}</view>
				<progress :percent="progress" show-info stroke-width="3" />
			</view>
		</view>
	</view>
</template>

<script>
	
	// #ifdef APP-PLUS
	var AfDocument = uni.requireNativePlugin("Aq-ChooseFile");
	// #endif
	export default {
		name:'declarationDocuments',
		props: {
			orderId: [Number,String],
			orderNo: [Number,String],
			isoper:{
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				fileList:[],
				isShowProgress: false,
				progress: 0
			}
		},
		methods: {
			getFileList () {
				let that = this
				that.$request.post('/app-api/order/warehouse-picture/list',{bizId:that.orderId,type:6}).then(res => {
					if(res.code == 0 && res.data){
						that.fileList = res.data
					}
				})
			},
			deleteFile(id){
				let that = this
				uni.showModal({
					title: this.$lang.lang.notices.notice,
					content:this.$lang.lang.notices.deleteFile,
					success: function (res) {
						if (res.confirm) {
							that.$request.deleted('/app-api/order/warehouse-picture/delete?id='+id).then(res => {
								if(res.code == 0){
									uni.showToast({
										title:that.$lang.lang.notices.deleteSuccess
									})
									that.getFileList()
								}else{
									uni.showToast({
										title:res.msg
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getFileName(url){
				if(!url) return '/'
				var file = url.split('/')
				return file[file.length-1]
			},
			downloadFile(url) {
				  //#ifdef H5
				 window.open(url, '_self')
				// #endif
				// #ifdef APP-PLUS
				const downloadTask = uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							this.isShowProgress = false;
							console.log('下载成功');
						}
						let that = this;

							
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(red) {
								that.isShowProgress = false;
								uni.showModal({
									title: that.$lang.lang.notices.notice,
									content: that.$lang.lang.notices.saveed +':' + red.savedFilePath,
									cancelText: that.$lang.lang.notices.know,
									confirmText: that.$lang.lang.notices.openFile,
									success: function (res) {
										if (res.confirm) {
											uni.openDocument({
												filePath: red.savedFilePath,
												success: (sus) => {
													console.log('成功打开');
												}
											})
										}
									}
								});
							}
						});
						 
					}
				})
				downloadTask.onProgressUpdate((res) => {
					if(res.progress > 0) {
						this.isShowProgress = true;
					}
					this.progress = res.progress;
				})
				// #endif 
			},
			upload(){
				let that = this
				// #ifdef APP-PLUS
				if(that.fileList.length==10){
					uni.showToast({
						title: that.$lang.lang.order.controlUpload,
						icon: 'none',
					})
					uni.hideLoading()
					return
				}else{
					AfDocument.openMode({
						size: '1', //选择总数量
						paths:[],   //自定义选择目录
						isDown:true,//是否下钻（true 筛选当前目录以下的所有文件，fales 只筛选当前目录文件） 
						types:[{
							name:'文档',
							value:["doc","ppt","docx","xls","xlsx","pdf","txt"]
						},{
							name:'图片',
							value:['jpg','png','jpeg'] 
						}]
					},(res)=>{
						// this.data = JSON.stringify(res)
						var path = res.res[0].pathHolp
						console.log(path)
						uni.uploadFile({
							url: that.$request.baseUrl + '/app-api/file/org-name/up',
							filePath: path,
							name: 'file',
							header: that.$request.getImgHeader(),
							success: (uploadFileRes) => {
								uni.hideLoading()
								let res = JSON.parse(uploadFileRes.data)
								console.log('res', res)
								if(res.code == 0){
									that.createDocuments(res.data)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
									})
								}
							}
						})
					})
					// that.$refs.uploads.select()
				}
				// #endif 
				//#ifdef H5
				uni.chooseFile({
					count: 1,
					extension:['.xls','.doc','.ppt','.txt','.pdf','.jpg','.png','.jpeg','.docx','.xlsx'],
					success:(res)=> {
						uni.showLoading({
							title: that.$lang.lang.notices.loading,
						})
						const file = res.tempFilePaths
						if((that.fileList.length+res.tempFilePaths.length)>10){
							uni.showToast({
								title: that.$lang.lang.order.controlUpload,
								icon: 'none',
							})
							uni.hideLoading()
							return
						}
						for(var i=0;i<file.length;i++){
							uni.uploadFile({
								url: that.$request.baseUrl + '/app-api/file/org-name/up',
								filePath: file[i],
								name: 'file',
								header: that.$request.getImgHeader(),
								success: (uploadFileRes) => {
									uni.hideLoading()
									let res = JSON.parse(uploadFileRes.data)
									console.log('res', res)
									if(res.code == 0){
										that.createDocuments(res.data)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
										})
									}
								}
							})
						}
						
					},
					fail: (Error) => {
						console.log(Error)
					}
				})
				// #endif 
			},
			createDocuments(url){
				let that = this
				that.$request.post('/app-api/order/warehouse-picture/create',{bizId:that.orderId,type:6,url:url}).then(res => {
					if(res.code == 0 && res.data){
						that.getFileList()
					}
				})
			},
			open() {
				this.$refs.file.open()
			}
		}
	}
</script>

<style scoped>
	
.lending_content{
	width: 580upx;
	padding: 20upx;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 12upx;
}
.title{
	width: 100%;
	position: relative;
	left: 10upx;
	color: #333;
}
.title text{
	font-weight: 600;
	font-size: 28upx;
}
.btns{
	position: absolute;
	right:0;
	top:-10upx;
	padding: 12upx 24upx;
	color: #fff;
	font-size: 28upx;
	background-color: #297CE7;
	border-radius: 8upx;
}
.btn{
	padding: 12upx;
	/* width: 160upx; */
	color: #fff;
	font-size: 28upx;
	background-color: #297CE7;
	border-radius: 8upx;
	text-align: center;
	min-width: 160upx;
}
.foot_btns{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footbtn{
	justify-content: center !important;
}
.file-list{
	display: flex;
	/* align-items: center; */
	color: #297CE7;
	margin: 20upx auto;
	flex-direction: column;
}
.btns-list{
	display: flex;
	align-items: center;
	justify-content: end;
}
.btns-list view{
	margin-left: 50upx;
	margin-top:20upx;
}
.progress-container {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background: rgba(0, 0, 0, .2);
	width: 750rpx;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.progress-box {
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
}
.text {
	margin-bottom: 20rpx;
}
.file-lists{
	padding: 30upx 0;
}
.file-list text{
	word-break: break-word;
}
</style>
