<template>
	<view class="images-list" :style="'grid-template-columns: repeat('+columns+', 1fr);gap:'+gapNumber+'rpx;'">
		<view class="add-picture" :style="'height:'+height+'rpx'" v-for="(list, index) in filesList" :key="index">
			<image class="delete-img" v-if="canEditor" src="/static/delete.png" @click.stop="deleteImg(index)">
			</image>
			<block v-if="list.fileType == 'image'">
				<image class="photo-img" :src="list.tempFilePath" @click.stop="preview(list.tempFilePath, index)">
				</image>
				</image>
			</block>
			<block v-if="list.fileType == 'video'">
				<video class="photo-img" object-fit="fill" :src="list.tempFilePath"></video>
			</block>
		</view>
		<view class="add-icon" :style="'height:'+height+'rpx'" v-if="fileIdData.length<=4" @click.stop="chooseImg">
			<image class="add-img" src="/static/add.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//选择的附件信息
			files: {
				type: Array,
				default: () => {
					return []
				}
			},
			//最多选择附件数量
			maxNumber: {
				type: Number,
				default: 2
			},
			//每行显示的附件数量
			columns: {
				type: Number,
				default: 4
			},
			//行与列的间隙(rpx)
			gapNumber: {
				type: Number,
				default: 20
			},
			//图片/视频高度(rpx)
			height: {
				type: Number,
				default: 150
			},
			//是否可以编辑
			canEditor: {
				type: Boolean,
				default: true
			},
			//视频上传时长限制(秒)
			maxDuration: {
				type: Number,
				default: 30
			},
			//选择的文件类型
			mediaType: {
				type: Array,
				default: () => {
					return ['image']
				}
			},
		},
		data() {
			return {
				filesList: [],
				fileIdData: []
			};
		},
		watch: {
			files: {
				deep: true,
				immediate: true,
				handler(newArr) {
					this.filesList = newArr
				},
			},
			filesList(newArry) {
				this.$emit('update:files', newArry);
			}
		},
		methods: {
			chooseImg() {
				let count = this.maxNumber - this.filesList.length
				uni.chooseMedia({
					count: 1,
					mediaType: this.mediaType,
					sourceType: ['album', 'camera'],
					maxDuration: this.maxDuration,
					success: (res) => {
						this.getFileID(res.tempFiles[0]);
					},
				});
			},
			getFileID(file) {
				let that = this;
				let fileType = file.tempFilePath.split('.')[1];
				uni.getFileSystemManager().readFile({ // 读取本地文件内容
					filePath: file.tempFilePath,
					encoding: 'base64', //编码格式
					success(res) {
						that.$http('feedback.uploadFile', {
							itemcode: "fbck",
							fileName: "问题附件",
							fileSufx: fileType,
							fileContent: `data:image/${fileType};base64,${res.data}`
						}, 'id生成中', true).then((res) => {
							if (res.code === 0) {
								let fileCont = {
									[res.data.id]: `问题附件.${fileType}`
								}
								let fileDataID = {
									id: res.data.id,
									filePath: file.tempFilePath
								}
								let filterID = that.fileIdData.filter((item) => {
									return item.id == res.data.id;
								})
								if (filterID.length > 0) {
									uni.showToast({
										title: '重复附件不可上传',
										icon: "none"
									})
									return;
								}
								that.fileIdData = [...that.fileIdData, fileDataID];
								that.filesList = [...that.filesList, file];
								that.$emit('createFile', fileCont);
							}
						})
					}
				})
			},
			deleteImg(index) {
				this.fileIdData.forEach((item) => {
					if (this.filesList[index].tempFilePath === item.filePath) {
						this.$emit('deleteID', item.id);
					}
				})
				this.filesList.splice(index, 1);
				this.fileIdData.splice(index, 1);
			},
			preview(photoImg) {
				let imgsArray = []
				imgsArray[0] = photoImg
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			}
		}
	};
</script>

<style lang="scss">
	.images-list {
		display: grid;
		grid-auto-rows: minmax(0, auto);

		.add-picture {
			border-radius: 2rpx;
			position: relative;
			border: solid #f0f0f0 1px;

			.photo-img {
				width: 100%;
				height: 100%;
			}

			.delete-img {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 0;
				top: 0rpx;
				z-index: 99;
			}
		}

		.add-icon {
			background-color: #f0f0f0;
			border-radius: 2rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.add-img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>