<template>
	<el-form-item :label="keys._name || '数据表格'">
		<array-2-obj v-for="(x,index) in headers" :keys="[x,keys] | getKeys" :value="value[index]" :key="index"></array-2-obj>
		<el-table v-if="!headers.length" :data="value" border style="width: 100%;" size="mini" max-height="400">
			<el-table-column type="index" width="50" label="序号"></el-table-column>
			<el-table-column v-for="(name,index) in keys" :label="name" v-if="index != '_name'" :key="index" min-width="100">
				<template slot-scope="scope">
					<el-input v-model="scope.row[index]"></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>
		</el-table>
	</el-form-item>
</template>

<script>
export default {
	name: 'array2Obj',
	props: {
		value: {
			type: Array,
			default() {
				return [];
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		headers: {
			type: Array,
			default() {
				return [];
			}
		},
		changeData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		//监听检测哪一项发生变化了
		headers(n) {
			const { index, type } = this.changeData;
			switch (type) {
				case 'add':
					this.value.splice(index + 1, 0, [...this.value[index]]);
					break;
				case 'del':
					this.value.splice(index, 1);
					break;
			}
		}
	},
	filters:{
		ddd(value){
			console.log(value);
			return "100";
		},
		getKeys([value,keys]){
			return {
				...keys,
				_name:value.name
			}
		}
	},
	methods: {
		add(index) {
			this.value.splice(index + 1, 0,{...(this.value[index]),id:Math.random()+""});
		},
		del(index) {
			this.value.splice(index,1);
		}
	}
};
</script>
