<template>
	<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
		<div class="mapping-list">
			<el-button class="add-button" icon="el-icon-plus" size="mini" circle @click="onAdd"/>
			<div class="list" v-if="editData">
				<div class="item" v-for="(link, index) in editData">
					<el-input size="mini" style="width: 30%" v-model="link.name"/>
					<el-icon class="el-icon-connection"/>
					<el-input size="mini" v-model="link.path"/>
					<el-button class="delete-button" icon="el-icon-minus" circle size="mini" plain type="danger" @click="toDeleteItem(link, index)"/>
				</div>
			</div>
		</div>
	</el-scrollbar>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	import {clonePureObj} from "../../../../utils";

	export default {
		name: "DataMappingEditor",
		data() {
			return {
				visible: false,
				editData: null,
			}
		},
		computed: {
			...mapState({
				mapping: state => state.project.data.dataMapping,
			}),
		},
		methods: {
			edit() {
				this.editData = clonePureObj(this.mapping);
			},
			save() {
				this.modifyDataMapping(this.editData);
			},
			onAdd() {
				this.editData.push({
					name: '',
					path: '',
				});
			},
			toDeleteItem(link, index) {
				this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
					confirmButtonText: this.$t('Confirm'),
					cancelButtonText: this.$t('Cancel'),
					type: 'warning'
				}).then(() => {
					this.editData.splice(index, 1);
				}).catch((e) => {
				});
			},
			...mapMutations([
				'modifyDataMapping',
			]),
		}
	}
</script>

<style scoped>

</style>