<template>
	<el-color-picker
		:disabled="!editable"
		class="picker"
		:value="editValue"
		@input="onInput"
		show-alpha
		:predefine="predefineColors">
	</el-color-picker>
</template>

<script>
	import LinkableInputWrapper from "./LinkableInputWrapper";
	import CmdInputWrapper from "./CmdInputWrapper";

	export default {
		name: "ColorInput",
		components: {LinkableInputWrapper, CmdInputWrapper},
		props: ['value', 'container', 'property', 'propertyName', 'editable'],
		data() {
			return {
				predefineColors: [
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577'
				]
			}
		},
		computed: {
			editValue() {
				return this.value === undefined ? this.property.default : this.value;
			},
		},
		methods: {
			onInput(v) {
				if (v !== this.value) {
					this.$emit('input', v, this.container, this.propertyName, this.value);
				}
			}
		},
	}
</script>

<style scoped>
	.color-input-container {
		height: 29px;
		overflow: hidden;
	}

	.picker {
		flex: 1;
		float: right;
	}
</style>
