<template>
	<el-form-item :label="keys._name || label">
		<el-table :data="value" border style="width: 100%;" size="mini" max-height="400">
			<el-table-column v-for="(name, prop) in keys" :label="name" v-if="prop != '_name'" :key="prop" min-width="100">
				<template slot-scope="scope">
					<el-color-picker v-if="prop == 'color'" v-model="scope.row[prop]"></el-color-picker>
					<template v-else>
						<el-input v-model="scope.row[prop]"></el-input>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="100">
				<template slot-scope="scope">
					<el-button 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>
	</el-form-item>
</template>

<script>
export default {
	name: 'tplArray',
	props: {
		value: {
			type: Array,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		label:{
			type: String,
			default() {
				return "数据集";
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		add(index) {
			this.value.splice(index + 1, 0, {...(this.value[index] || this.keys)});
		},
		del(index) {
			this.value.splice(index, 1);
		}
	}
};
</script>
