<template>
	<div>
		<div v-if="editing" class="input-group">

			<select class="form-control" v-model="sel">
				<option v-for='i in items' :value='i.key'>{{ i.value }}</option>
			</select>

			<button @click="cancel_edit" class="btn btn-danger">
				<i class="fa fa-close"></i>
			</button>
			<button @click="submit_edit" class="btn btn-success">
				<i class="fa fa-check"></i>
			</button>
		</div>

		<div v-else>
			<button @click="enable_edit" class="btn btn-secondary">
				<i class="fa fa-plus"></i>
			</button>
		</div>

	</div>
</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';


export default {
	props: [
		"list",
		"target",
		"method",
	],

	setup() {
		return {
			editing: ref(false),
			sel: ref(""),
			items: ref([]),
		}
	},

	methods: {

		enable_edit() {
			$.ajax({
				url: this.list,
				method: "GET"
			}).done(this.start_edit);
		},

		start_edit(d) {
			this.items = d;
			this.editing = true;
			var that = this;
		},

		cancel_edit() {
			this.text = this.saved;
			this.editing = false;
		},

		submit_edit() {

			var data = {};
			data["item_id"] = this.sel;

			$.ajax({
				url: this.target,
				method: this.method,
				data: data
			}).done(this.fin);
			this.editing = false;
		},

		fin() {
			location.reload();
		},
	},

	mounted() {
		this.text = this.value;
	}
}
</script>
