<template>
	<div>
		<div class="com-search-item" v-for="row in comConditions">
			<div class="title text-white text-white-shadow"><div>{{row.caption}}</div></div>
			<div class="content">
				<div>
					<div class="sub-item" v-for="(obj, key) in row.contents" :style="comWidthResize(obj.style)">
						<q-datetime v-if="obj.type == 'date'"  v-model="obj.value" :before="[{ icon: 'event_note'}]" type="date" :clearable="obj.clearable" :clear-value="obj.clear_value" :placeholder="obj.placeholder" @change="comFnValueChange(obj.value, key)"></q-datetime>
						<q-datetime v-if="obj.type == 'time'"  v-model="obj.value" :before="[{ icon: 'event_note'}]" type="time" :clearable="obj.clearable" :clear-value="obj.clear_value" :placeholder="obj.placeholder" @change="comFnValueChange(obj.value, key)"></q-datetime>
						<q-datetime v-if="obj.type == 'datetime'"  v-model="obj.value" :before="[{ icon: 'event_note'}]" type="datetime" :clearable="obj.clearable" :clear-value="obj.clear_value" :placeholder="obj.placeholder" @change="comFnValueChange(obj.value, key)"></q-datetime>
						<q-select v-else-if="obj.type == 'select'" v-model="obj.value" :options="obj.options" @input="comFnValueChange(obj.value, key)"></q-select>
						<q-select v-else-if="obj.type == 'multiSelect'" multiple v-model="obj.value" :display-value="comFnMultiSelectDisplayValues(obj.value)" :options="obj.options" @change="val => lazy = val"></q-select>
						<q-input v-else-if="obj.type == 'input'" v-model="obj.value" :placeholder="obj.placeholder" @input="comFnValueChange(obj.value, key)"></q-input>
						<q-input v-else-if="obj.type == 'autocomplete'" v-model="obj.value" :placeholder="obj.placeholder">
							<q-autocomplete								
								:min-characters="obj.size"
								max-results="10"
								@search="comFnAutocomplete"
								@selected="item => { obj.value = item.value; comFnValueChange(item.value, key); }"
							></q-autocomplete>
						</q-input>
					</div>
				</div>
			</div>
		</div>
		<slot name="conditions"></slot>
		<div v-if="withoutSearch == false" class="com-query-item">
			<div class="outer-border shadow-3">
				<div class="text-white text-white-shadow" @click="comFnSearchClick">{{searchText}}</div>
			</div>
		</div>
		<slot name="buttons"></slot>
	</div>
</template>

<script>
module.exports = {
	props: {
		"conditions": {
			default: [],
			required: true
		},
		"withoutSearch": {
			type: Boolean,
			default: false
		},
		"searchText": {
			default: "Search"
		},
		"multiSelectEmptyText": {
			default: "Please Choose"
		},
		"clientWidth": {
			default: 1980
		}
	},
	data: () => {
		return {
			comConditions: [],
		}
	},
	mounted () {
		this.comConditions = this.conditions;
	},
	computed: {
		useClientWidth () {
			if (this.clientWidth < 1280) {
				return 1280;
			}
			if (this.clientWidth < 1680) {
				return 1680;
			}
			return 1980;
		}
	},
	watch: {
		conditions () {
			this.comConditions = this.conditions;
		}
	},
	methods: {
		comWidthResize (original) {
			var style = {};
			if (original && Object.keys(original).length > 0) {
				var self = this;
				style = JSON.parse(JSON.stringify(original));
				["width", "minWith", "maxWith", "min-width", "max-width"].forEach(function(attr){
					if (typeof style[attr] != "undefined") { 
						var num = style[attr].match(/\d+/);
						if (num && style[attr].replace(num[0], "") == "px") {
							switch (self.useClientWidth) {
								case 1680:
									style[attr] = (num - 15) + "px";
									break;
								case 1280:
									style[attr] = (num - 30) + "px";
									break;
							}
						}
						
					}
				});
			}
			return style;
		},
		comFnValueChange (value, target) {
			this.$emit("do_change_subitem", {
				key: target,
				val: value
			});
		},
		comFnAutocomplete (trem, back) {
			this.$emit("do_autocomplete", {
				text: trem,
				done: back
			});
		},
		comFnSearchClick () {
			this.$emit("do_condition_query", this.comConditions);
		},
		comFnMultiSelectDisplayValues (arr) {
			if (!arr.length) {
				return this.multiSelectEmptyText;
			}
			return arr.length + ' Item' + (arr.length.length > 1 ? 's' : '') + ' Selected';
		}
	}
}
</script>