<template>
	<view class="content">
		<view class="main">
			<view class="title" style="padding-bottom: 0;">上传照片</view>
			<view class="imgBox" >
				<view class="imgLine" v-for="(img,imgindex) in imgArr">
					<image @click="previewImage(img,imgArr)" :class="{img4:(imgindex+1)%4==0}" :src="img" mode="" class="itemImg"></image>
				    <image src="../../../static/img/icon_delpic@2x.png" mode=""  class="delImg" @click="delimg(imgindex)"></image>
				</view>
				<view class="imgLine" @click="uploadImg">
					<image src="../../../static/img/icon_addpic@2x.png" mode="" class="itemImg" style="margin-right: 0;"></image>
				</view>
			</view>
			<view class="title">其他说明</view>
			<view>
				<textarea placeholder-style="color:#CCCCCC" placeholder="请输入其他说明信息~" v-model="exeContent" class="textareaCont"/>
			</view>
		</view>
		<view class="bottom"  >
				<view class="shoreDz" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'	
	export default {
		components: {
			   nodata
		},
		data() {
			return {
				imgArr:[],
				exeContent:'',
				id:'',
				type:'',
				sheetID:'',
			}
		},
		onLoad(opt) {
		  this.id=opt.id;
		  this.type=opt.type;
		  this.sheetID=opt.sheetID;
		},
		onShow() {
			
		},
		methods: {
			previewImage(img,arr){
				//var arr=[];
				//arr.push(img)
				// 预览图片
				uni.previewImage({
					urls: arr,
					current:img,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		    uploadImg(){
				var that=this;
				uni.chooseImage({
					sourceType: ['album'],
					count:9, 
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				       /* uni.uploadFile({
				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
				                console.log(JSON.parse(uploadFileRes.data).data );
								that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
								
				            }
				        }); */
						tempFilePaths.forEach(v=>{
							uni.uploadFile({
							    url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
							    filePath: v,
							    name: 'file',
							    formData: {
							        'user': 'test'
							    },
							    success: (uploadFileRes) => {
							        console.log(JSON.parse(uploadFileRes.data).data );
									that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
							    }
							}); 
						})
						/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
							
						}) */
				    }
				});
			},
			delimg(index){
				this.imgArr.splice(index,1)
			},
			submit(){
				if(this.imgArr.length==0){
					uni.showToast({
					    title: '请上传图片',
						icon:'none',
					    duration: 2000,
					});
					return false;
				}
				uni.showLoading({ });
				var exeImg=this.imgArr.join(',')
				this.$http('accompany/SuperCheckSheet/executeSuggestState', {
					id:this.id,
					exeContent:this.exeContent,
					exeImg:exeImg
				}, 'POST').then(res => {
				    //this.submitSuperCheckSheet()
					uni.showToast({
					    title: '提交成功',
						icon:'none',
					    duration: 2000,
					});
					if(this.type>1){
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.navigateTo({
							url:'editcomplete?sheetID='+this.sheetID
						})
					}
					
				})
			}
			
		}
	}
</script>

<style scoped>
	.content {
		background: #F4F5F7;
		min-height: 100vh;
		padding-top: 20rpx;
	}

	/* #ifdef H5 */
	.content {
		background: #F4F5F7;
		min-height: calc(100vh - 44px);
		
	}

	/* #endif */
	.main{
		background: #FFFFFF;
		padding: 30rpx 24rpx;
	}
	.title{
		font-size: 30rpx;
		color: #3C3C3C;
		padding-bottom: 20rpx;
	}
	.textareaCont{
		width: 666rpx;
		height: 200rpx;
		background: #F4F5F7;
		border-radius: 10rpx;
		padding: 18rpx;
	}
	.bottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
	}
	.shoreDz{
		width: 702rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
	    font-size: 30rpx;
		margin-top: 24rpx;
	}
	.imgBox{
		padding-top: 0rpx;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
	}
	.itemImg{
		width:150rpx;
		height: 150rpx;
		margin-right: 35rpx;
		margin-top: 30rpx;
	}
	.img4{
		margin-right: 0;
	}
	.delImg{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 135rpx;
		top: 10rpx;
	}
	.imgLine{
		position: relative;
	}
</style>
