<template>
	<b-col md="12">
        <form @submit.prevent="$emit('clicked')" @keydown="form.errors.clear($event.target.name)">
        	<text-input
                :input_name="'name'"
                :form="form"
                :label="'Name'"
            >
        	</text-input>
        	<select-option-auto-complete-input
	        	:input_name="'status'"
	        	:form="form"
			    :exist_data="exist_role_status"
	        	:placeholder="''"
	        	:label="'Status'"
	        	:data_set="role_status"
	        	:array="true"
	        ></select-option-auto-complete-input>
	        <v-btn
	        	depressed
	        	small
				type="submit"
				color="primary"
				class="m-0"
			>
				Submit
			</v-btn>
			<v-btn
	        	depressed
	        	small
				type="button"
				color="warning"
				class="m-0"
				@click="$emit('reset')"
			>
				Reset
			</v-btn>
        </form>
	</b-col>
</template>

<script>
    import TextInput from '../../components/inputs/TextInput';
    import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';

	export default {
		props: {
			form: Object
		},
		components: {
			TextInput,
			SelectOptionAutoCompleteInput
		},
		data() {
            let vm = this;
            return {
            	exist_role_status: [],
            	role_status: General.autoCompleteKeyConvert(Constants.role_status)
            }
        },
        methods: {
			initForm() {
            	let vm = this;
        		if (vm.form.status[0]) {
        			let status_list = [];
        			vm.exist_role_status = General.initFormArray(vm.role_status, vm.form.status);
        		}
        	}
        },
        created() {
        	let vm = this;
        	vm.initForm();
        }
	}
</script>