<template>
	<div class="settings">
		<div class="edit-settings" v-for="item in settings" :key="item.name">
			<div class="name">{{ item.name }}</div>
			<a-input class="value"
			         :default-value="item.value"
			         v-model="item.value"
			         @pressEnter="setProjectSetting(item)"
			         @blur="setProjectSetting(item, false)"></a-input>
		</div>
	</div>
</template>

<script>
export default {
	name: "ProjectSetting",
	data: function () {
		return {
			settings: []
		}
	},
	mounted() {
		console.log('project setting mounted');
		this.getProjectSetting();
	},
	activated() {
		this.getProjectSetting();
	},
	methods: {
	    getProjectSetting() {
	    	this.axios({
	    	    url: window.api + '/api/GetProjectSetting',
	    	    method: 'post',
	    	}).then(data => {
	    	    data = data.data;
	    	    this.settings = data;
	    	});
	    },
		setProjectSetting(item, blur=true) {
	    	if (blur) {
			    this.$el.querySelectorAll('input').forEach(item => item.blur());
			    return false
		    }
			this.axios({
				url: window.api + '/api/GetProjectSetting',
				method: 'post',
				data: {
					type: 'edit',
					key: item.key,
					value: item.value
				}
			})
		}
	},
}
</script>

<style scoped lang="scss">
.settings {
	height: 100%;
	width: 100%;
	.edit-settings {
		display: grid;
		grid-template-columns: 100px 1fr;
		height: 50px;
		align-items: center;
		padding: 0 20px;
		.name {
			justify-self: flex-start;
		}
		.value {
			padding-right: 10px;
			text-align: right;
			justify-self: flex-end;
		}
	}
}
</style>
