<template>
	<view>
		<view class="single_Phone">
			<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
		</view>
		<view class="fliebox" v-for="(x,y) in CompData.FileListName" :key='y'>
			<view class="fliebox_l">{{x}}</view>
			<view class="fliebox_r">
				<u-icon  name="cross" color="#909399"  size="36" @click='getdelete(y)'></u-icon>
			</view>
		</view>
		<u-button type="primary" size='mini' @click="xzfile" v-if="CompData.FileList.length<CompData.FileCount">上传文件</u-button>
		<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
	</view>
</template>

<script>
	
	export default {
		props: ["CompData",'index'],

		data() {
			return {
				action: '',
				FileList:'',
			}
		},
		created() {
			this.FileList = JSON.parse((JSON.stringify(this.CompData.FileList)))
			var newPath = "/korea/Test/Upload/";
			this.action  = this.UploadConfig().UploadUrl + "?fileSavePath=" + newPath;
			if(this.CompData.FileListName==undefined){
				this.CompData.FileListName = []
			}
			console.log(this.CompData)
		},
		methods: {
			getdelete(index){
				this.CompData.FileList.splice(index,1)
				this.CompData.FileListName.splice(index,1)
				this.$emit('success', this.CompData, this.index)
			},
			xzfile(){
				
				let that = this
				wx.chooseMessageFile({
				  count: 9,
				  type: 'file',
				  success (res) {
					  
				    const tempFilePaths = res.tempFiles
					let show = false
					tempFilePaths.map((x,index)=>{//判断是否是文件
					
						if(show == true){return}
						if(that.CompData.FileList.length>=that.CompData.FileCount){
							uni.showToast({
								title:'超出了最多文件数量',
								icon:'none'
							})
							show = true
						}
						if(x.type!='file'){
							uni.showToast({
								title:'请选择正确文件',
								icon:'none'
							})
							show = true
						}else{
							if(that.CompData.FileType.indexOf(that.gethou(x.path))==-1){
								uni.showToast({
									title:'请选择正确文件',
									icon:'none'
								})
								show = true
							}else{
								if(that.CompData.FileSizeLimit>0){//大于0 进入判断
									let size = res.size
									if(x.size>(that.CompData.FileSizeLimit*1024*1024)){
										uni.showToast({
											title:'文件超出指定大小',
											icon:'none'
										})
										show = true
									}else{
										that.upFile(x.path,x.name)
									}
								}else{
									that.upFile(x.path,x.name)
								}
							}
						}
						
					})
				  },
				  fail(err){
					 console.log(err)
					uni.navigateTo({
						url:'/pages/webbox/webbox2?u=https://edu.kookaku.com/#/koreaUpload&data='+encodeURIComponent(JSON.stringify(that.CompData))+'&index='+that.index
					})
					  
				  }
				})
				
			},
			upFile(filePath,name) {
				uni.showLoading({
					title:'上传中...'
				})
				let action = this.action
				let that = this
				uni.uploadFile({
					url: action,
					filePath: filePath,
					name: 'file',
					formData: {
						user: 'tesdt'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						var jsonData=JSON.parse(uploadFileRes.data);
						      if (jsonData.StatusCode == 1) {
						       var url= that.UploadConfig().ImageUrl+ jsonData.FilePath;
							   that.CompData.FileList.push(url)
							   that.CompData.FileListName.push(name)
							   that.$emit('success', that.CompData, that.index)
						}
					},
					fail: function(res) {
						uni.hideLoading()
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			},
			gethou(filename){//获取后缀名
				var index = filename.lastIndexOf(".");
				var suffix = filename.substring(index+1);
				return suffix 
			}
		
		}
	}
</script>

<style>
	.slot-btn {
		width: 220rpx;
		height: 220rpx;
		background: #F5F5F5;
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slot-btn .image {
		width: 54rpx;
		height: auto;
	}

	.mmyVideo {
		width: 100%;
		height: 100%;
	}
	.fliebox{
		width: 100%;
		height: 30px;
		padding: 0 10px;
		border:1px solid #e2e2e2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 4px;
		font-size: 12px;
		margin-bottom: 5px;
		
	}
	.fliebox_l{
		width: 1px;
		flex:1;
		overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;
	}
	.fliebox_r{
		width: 36rpx;
		
	}
</style>
