<template>
	<el-form label-width="80px" size="mini" :inline="inline">
		<div v-for="(va, key) in value" :key="key">
			<template v-if="includes(va,'Array')">
				<div class="item-box" v-for="(i, index) in va" :key="index">
					<el-button class="close-btn" icon="el-icon-close" circle @click="value[key].splice(index,1)"></el-button>
					<el-popover width="300" placement="right" trigger="hover">
						<el-form label-width="80px">
							<el-upload style="margin-bottom: 10px;" :limit="1" :action="action" :on-success="success" :on-exceed="limit" :file-list="upfileList">
								<el-button type="primary" @click="clickUp(index)">
									本地上传
									<i class="el-icon-upload el-icon--right"></i>
								</el-button>
								<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张</div>
							</el-upload>
							<el-form-item label="网络地址:" style="margin-bottom: 0;"><el-input class="el-input" v-model="i.imgUrl"></el-input></el-form-item>
						</el-form>
						<el-image slot="reference" :src="i.imgUrl" :preview-src-list="[i.imgUrl]" class="item-box-img" fit="fill">
							<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
						</el-image>
					</el-popover>
				</div>
				<div style="width: 100%;text-align: center;">
					<el-button type="primary" style="font-size: 22px;" @click="value[key].push({...keys[key]})"><i class="el-icon-plus"></i></el-button>
				</div>
			</template>
			<template v-else>
				<el-form-item :label="keys[key] || key" v-if="keys[key]">
					<el-input v-model="value[key]"></el-input>
				</el-form-item>
			</template>
		</div>
	</el-form>
</template>

<script>
export default {
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		inline:{
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			upIndex: 0, //当前上传项
			upfileList: []
		};
	},
	computed: {
		action() {
			return this.$fileUpServer + '/file/uploadFile?fileType=map';
		}
	},
	methods: {
		clickUp(index) {
			this.upfileList = [];
			this.upIndex = index;
		},
		//上传照片
		success(e) {
			this.$port.upIuccess(e).then(res => {
				const src = res.fileUrl;
				this.value.list[this.upIndex].imgUrl = src.indexOf('http://') == 0 || src.indexOf('https://') == 0 ? src : this.$fileServer + '/' + src;
			});
		},
		//文件超限
		limit(e) {
			this.$message.error('只能上传一张');
		}
	}
};
</script>

<style lang="less">
.item-box {
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	padding: 5px;
	margin: 15px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	.close-btn{
		position: absolute;
		right: 0;
		top: 0;
		z-index: 5;
		padding: 5px;
		transform: translateX(50%) translateY(-50%);
	}
	&-img {
		width: 120px;
		height: 120px;
		margin-right: 5px;
		.image-slot {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40px;
			color: #cccccc;
		}
	}
	&-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.el-input {
			margin: 2px 0;
		}
	}
	.add-img {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #000000;
	}
}
</style>
