<template>
	<view>

				<view style="display: flex;">
					<view class="form-left">
						照片
					</view>
					<view style="margin-left: 6px;">
						<view style="display: flex;">
							<view v-for="(pic,index) in fileList" :key="index">
								<image :src="pic.uri" @click="imgPreview(pic)" class="upLoadImg"></image>
							</view>
							<image v-if="fileList.length < 3" src="../../static/images/bglogo.png" style="width: 36px;height: 36px;margin: 13px 16px;" @click="selectPics">
								
							</image>
						</view>
					</view>
				</view>
				<view style="padding: 20rpx; display: flex;justify-content: space-around;">
					<view  class="submit-button" @click="submit()">
						提交
					</view>
					<view class="cancel-button" @click="cancel">
						取消
					</view>
				</view>
			
		</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				formData: {
					description: ''
				},
				fileList: [],
				srcs: [],
				execId: 0,
				taskId: '',
				hasDescription: false,
				fileUri:'',
				imageStyles:{
					width:64,
					height:64,
					border:{
						color:"#888888",
						width:2,
						style:'dashed',
						radius:'2px'
					}
				},
			}
		},
		onLoad(e) {
			var that = this
			that.execId = e.execId;
			that.taskId = e.taskId;
		},
		methods: {
			selectPics(){
				var that = this;
				uni.chooseImage({
					count: 3,
					success: (res) => {
						const files = res.tempFiles;
						let imgArr = [];
						for (let i = 0; i < files.length; i++) {
							let obj = new Object();
							obj.name = 'photo'+i;
							obj.uri = files[i].path;
							this.fileUri = files[i].path;
							that.fileList.push(obj);
						}
						if(this.fileList.length > 0){
							
							uni.uploadFile({
								url: url+'/api/blade-resource/oss/endpoint/put-file-attach', (主要是这个url是你的后端映射处理得的地址,后面加上接口)
								filePath: this.fileUri,
								header:{
									'Blade-Auth': 'bearer' + ' ' + uni.getStorageSync('token').content
								},
								name: 'file',
								fileType: "image",
								success: (res) => {
									var str =  JSON.parse(res.data);
									// console.log(str.data.link);
									
										uni.showToast({
											title: '上传成功'
										});
									
								},
								fail(res){
									console.log(res)
									uni.showToast({
										title: '上传失败'
									});
								}
							})
						}
					}
				})
			},
			close() {
			    this.show = false
			},
			cancel(){
				this.formData.description = '';
				this.fileList = [];
				this.show = false
			},
			// 图片预览
			imgPreview(img){
				if(img.src == null || img.src == '' || img.src == undefined){
					this.srcs.push(img.uri)
				}else{
					this.srcs.push(img.src)
				}
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: this.srcs
				})
				this.srcs = []
			},
		}
	}
</script>

<style>
	.form-left{
		margin-left: 16px;
		padding:18px 0;
	}
	.form-right{
		margin-top: 6px;
		margin-left: 6px;
		padding:18px 0;
		width: 90%;
		border: 1px solid #D8D8D8;
		border-radius: 3px;
	}
	.submit-button{
		background-color: #3c9cff;
		width: 106px;
		height: 36px;
		border-radius: 16px;
		text-align: center;
		line-height: 36px;
	}
	.cancel-button{
		background-color: #D8D8D8;
		width: 106px;
		height: 36px;
		border-radius: 16px;
		text-align: center;
		line-height: 36px;
	}
	.upLoadImg{
		width: 96rpx;
		height: 96rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
		margin-left: 6px;
	}
</style>