<template>
	<view class="submitGamePicture">
		<template v-for="(item,index) in tempFileList">
			<view class="submitGamePicture-item" :key="item.path">
				<image :src="item.path" class="submitGamePicture-icon"></image>
				<uni-icons type="closeempty" class="submitGamePicture-delete" color="#ffffff" @click="deleteImgHandle(index)"></uni-icons>
			</view>
		</template>
		<view v-if="tempFileList.length<limit" class="submitGamePicture-btn" @click="chooseImageHandle">
			<uni-icons type="plusempty" size="30"></uni-icons>
			<text style="padding-top: 2px;">添加图片</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chooseImage",
		props: {
			limit: {
				type: String,
				default: '9'
			},
			FileList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				tempFileList: [], //选择图片临时存储
			};
		},
		mounted() {
			this.tempFileList = this.FileList;
		},
		methods: {
			//上传图片
			chooseImageHandle() {
				console.log("[上传图片]")
				let that = this;
				let limit = parseInt(this.limit);
				uni.chooseImage({
					count: limit, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res)
						let tempFiles = res.tempFiles;
						tempFiles.forEach(function(item, index) {
							let filePath = item.path;
							let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
							that.tempFileList.push({
								name: filename,
								path: filePath
							})
						})

					}
				})
			},
			//删除图片
			deleteImgHandle(currentIndex) {
				const temp = this.tempFileList.splice(currentIndex, 1);
			},
		}
	}
</script>

<style scoped>
	.submitGamePicture {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 2px;
	}

	.submitGamePicture-item {
		width:70px;
		height: 70px;
		margin-right: 9.5px;
		margin-top: 9.5px;
		display: flex;
		background-color: #FFFFFF;
		position: relative;
	}

	.submitGamePicture-icon {
		border: 1px solid #70737F;
		border-radius: 8px;
		width: 100%;
		height: 100%;
		display: block;
	}

	.submitGamePicture-delete {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #ff0000;
		border-radius: 10px;
	}

	.submitGamePicture-btn {
		border: 1px dashed #70737F;
		border-radius: 8px;
		width: 70px;
		height: 70px;
		margin-right: 9.5px;
		margin-top: 9.5px;
		display: flex;
		flex-direction: column;
		font-size: 13px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		justify-content: center;
		align-items: center;
	}
</style>