<template>
	<view>
		<view class="fanku_con">
			<view class="img_z">
				<view style="position: relative;" v-for="(item,index) in img_list" :key="index" class="imgItemWrap">
					<image @click="preview(item)" class="imgItem" 
					style=""
					 :src="item"></image>
					<image class="shancs" src="./shanchus2.png" mode="" @click="selec(index)"></image>
				</view>
				<view class="imgadf center imgItemWrap" @click="ongetimg()" v-if="img_list.length<count">
					<image style="width: 58rpx;height: 58rpx;" src="./tupianadd.png" mode=""></image>
					<text style="margin-top: 5rpx;">上传图片</text>
				</view>
				
			</view>
		</view>
<img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view>
	</view>
</template>

<script>
	import imgView from "@/components/image-view/image-view.vue";
	export default {
		components: {
			// imgUpload,
			imgView
		},
		data() {
			return {
				img_list: [],
				preImgSrc:'',
				imgsList:[],
			}
		},
		props: {
			// 最多上数量 1-9
			count: {
				type: Number,
				default: false
			},
			// 已上传
			list: {
				type: Array,
				default: []
			},
			//图片上传地址
			url: {
				type: String,
				default: ''
			},
			//文件对应的 key 
			name: {
				type: String,
				default: ''
			},
			//请求头
			header: {
				type: Object,
				default: {}
			}
		},
		computed: {},
		mounted() {
			// debugger;
			this.img_list = this.list;
		},
		methods: {
			ongetimg() { //上传图片方法
				var that = this
				if (!that.url) {
					return uni.showToast({
						title: '请填写上传地址',
						icon: 'none',
						position: 'bottom'
					});
				}
				uni.chooseImage({ //选中本地图片
					count: that.count,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						uni.showLoading({ //加载框
							title: '加载中...'
						})
						const tempFilePaths = res.tempFilePaths;
						res.tempFilePaths.forEach((item, index) => { //本地选中的图片组
							console.log(that.url)
							uni.uploadFile({ //上传图片
								url: that.url, //上传接口地址
								filePath: item, //一张图
								name: that.name,
								header: that.header,
								success: (imgres) => {
									// debugger;
									console.log("imageData:"+JSON.parse(imgres.data));
									let resData = JSON.parse(imgres.data);
									if (that.img_list.length >= that.count) //限制
										return uni.showToast({
											title: '最多上传' + that.count + '张图片',
											icon: 'none',
											position: 'bottom'
										});
									that.img_list.push(this.vuex_host+resData.path); //plus数组
									that.imgsList.push(resData.id); //plus数组
									that.$emit('obtain_img', that.imgsList)
								}
							});
							uni.hideLoading() //关闭加载框
						});
					}
				});
			},
			//删除
			selec(index) {
				this.img_list.splice(index, 1);
				this.imgsList.splice(index, 1);
				this.$emit('obtain_img', this.imgsList)
			},
			cancelPreView(){
				this.preImgSrc = '';
			},
			//预览
			/* preview(index, urls) {
			
				uni.previewImage({
					urls: urls,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}, */
			//预览
			preview(img) {
				this.preImgSrc = img;
				this.$refs.imgPreView.open();
			}
		}
	}
</script>

<style>
	page {
		box-sizing: border-box;
	}

	.fanku_con {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.img_z {
		display: flex;
		flex-wrap: wrap;
		margin-top:30rpx;
		box-sizing: border-box;
	}
	.imgItemWrap{
		    width: 200upx;
		    height: 200upx;
		    overflow: hidden;
		    margin: 10upxpx;
		    background: #f4f5f6;
		    position: relative;
		    border-radius: 20upx;
		    display: flex;
			margin: 10rpx;
		    align-items: center;
		    justify-content: center;
	}
	.imgItem{
		width: 200rpx;
		height: 200rpx;
		background-color:rgba(0,0,0,0.1);
		border-radius: 20rpx;
	}
	.imgadf {
		width: 200rpx;
		height: 200rpx;
		background-color: #f4f5f6;
		border-radius: 20rpx;
		font-size: 20rpx;
		color: #666666;
		flex-direction: column;
	}

	.shancs {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #FFFFFF;
		border-radius: 100%;
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
