<template>
	<el-form label-width="0" size="mini" :inline="inline">
		<el-form-item label="">
			<span v-for="(va, key) in value" :key="key">
				<distributed-list v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}" />
				<div v-else-if="includes(va, 'Array') && keys[key]">
					<el-table :data="value[key]" border style="width: 100%">
						<el-table-column v-for="(name, prop) in keys[key]" :label="name" v-if="prop != '_name'" :key="prop" :width='prop == "info" && 300'>
							<template slot-scope="scope">
								<template v-if="prop == 'info'">
									<el-table :data="scope.row[prop]" border style="width: 100%" :show-header="false">
										<el-table-column>
											<template slot-scope="sc">
												<el-input v-model="sc.row.value"></el-input>
											</template>
										</el-table-column>
										<el-table-column width="100">
											<template slot-scope="sc">
												<el-button v-if="sc.$index > 0" type="danger" icon="el-icon-delete" circle @click="scope.row[prop].splice(sc.$index,1)"></el-button>
												<el-button type="primary" icon="el-icon-plus" circle @click="scope.row[prop].splice(sc.$index,0,{value:'信息'})"></el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
								<template v-if="prop == 'addmap'">
									
								</template>
								<el-input v-else v-model="scope.row[prop]"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="100">
							<template slot-scope="scope">
								<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="del(scope.$index)"></el-button>
								<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index)"></el-button>
							</template>
						</el-table-column>
						<template slot="empty">
							<el-button type="primary" @click="add(-1)">新增</el-button>
						</template>
					</el-table>
				</div>
			</span>
		</el-form-item>
	</el-form>
</template>

<script>
	import md5 from "md5";
export default {
	name: 'DistributedList',
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		inline: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			
		};
	},
	methods: {
		add(index) {
			//如果数据其他项没有ID 则取下标作为ID
			let newId = [],
				time = new Date().getTime();
			this.value.list.map((x, i) => {
				const id = x.id || (x.id + '' == 'undefined' ? false : x.id + ''),
					_id = md5(`${i}${time}`);
				id || (this.value.list[i].id = _id);
				newId.push(this.value.list[i].id);
				//处理菜单
				x.path && (this.value.list[i].uId = md5(x.path).slice(5, 10));
			});
			newId.push(time);
			/**
			 * 计算该新增项的ID
			 * 取其他数据项ID相加+时间戳 md5 = 该新增项ID
			 */
			this.value.list.splice(index + 1, 0, JSON.parse(JSON.stringify({...(this.value.list[index] || this.keys), id: md5(newId.join('-')) })));
		},
		del(index) {
			this.value.list.splice(index, 1);
		}
	}
};
</script>
