<template>
	<div class="select">
		<select v-model.number="percentDone" @change="updateData" :disabled="disabled">
			<option value="0">0%</option>
			<option value="0.1">10%</option>
			<option value="0.2">20%</option>
			<option value="0.3">30%</option>
			<option value="0.4">40%</option>
			<option value="0.5">50%</option>
			<option value="0.6">60%</option>
			<option value="0.7">70%</option>
			<option value="0.8">80%</option>
			<option value="0.9">90%</option>
			<option value="1">100%</option>
		</select>
	</div>
</template>

<script>
	export default {
		name: 'percentDoneSelect',
		data() {
			return {
				percentDone: 0,
			}
		},
		props: {
			value: {
				default: 0,
				type: Number,
			},
			disabled: {
				default: false,
			},
		},
		watch: {
			// Set the priority to the :value every time it changes from the outside
			value(newVal) {
				this.percentDone = newVal
			},
		},
		mounted() {
			this.percentDone = this.value
		},
		methods: {
			updateData() {
				this.$emit('input', this.percentDone)
				this.$emit('change')
			}
		},
	}
</script>
