<template>
	<v-dialog v-model="visible__" max-width="500px" persistent>
		<v-card>
			<v-card-title>
				<v-row>
					<v-col cols="auto">
						<v-btn icon @click="closeDialog()">
							<v-icon>mdi-close</v-icon>
						</v-btn>
					</v-col>
					<v-col>Select user</v-col>
				</v-row>
			</v-card-title>
			<v-divider></v-divider>
			<v-card-text class="pt-2 pb-2">
				<v-row dense>
					<v-col cols="12">
						<v-autocomplete
							v-model="value__"
							placeholder="User"
							prepend-inner-icon="mdi-magnify"
							:items="search_results"
							item-value="id" item-text="full_name"
							:loading="search_loading"
							return-object
							:search-input.sync="search_input"
						></v-autocomplete>
					</v-col>
				</v-row>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn 
					color="primary" 
					@click="done()"
				>
					Save
				</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	mixins: [ 
		errorHandlerMixin
	],
	props:{
		value:{
			type: Object,
			default: ()=>{
				return {}
			}
		},
		visible:{
			type: Boolean,
			default: false,
		},
		searchPayload:{
			type: Object,
			default: ()=>{
				return {}
			}
		}
	},
	data(){
		return {
			value_ : null,
			visible__ : null,
			search_results : [],
			search_loading : false,
			search_input : null,
			timer : null,
		}
	},
	watch:{
		'value':{
			handler(){
				this.value__ = this.value
			},
			immediate: true,
		},
		'visible':{
			handler(){
				this.visible__ = this.visible
			},
			immediate: true,
		},
		'search_input':{
			handler(newVal){
				if(newVal){
					this.searchWithTimer()
				}
			},
			immediate : true,
		},
	},
	methods:{
		done(){
			this.$emit('input',this.value__)
			this.closeDialog()
		},
		closeDialog(){
			this.$emit('update:visible',false)
		},
		searchWithTimer(){
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
			this.timer = setTimeout(() => {
				this.searchData()
			}, 1 * 1000);
		},
		searchData(){
			let payload = {
				search : this.search_input,
				searchBy : "full_name",
				... this.searchPayload
			}
			this.search_loading = true
			this.$api.getUserList(payload).then((res)=>{
				let { data } = res.data.result
				this.search_results = data
				// this.totalData_ = total
			}).catch((err)=>{
				this.errorHandler_(err)
			}).finally(()=>{
				this.search_loading = false
			})
		},
	}
}
</script>