<template>
	<div class="com-search-line">
		<div class="com-row" v-for="i in Math.ceil(comDisplayLines.length / rowNums)">
			<div class="com-cell" v-for="(item, j) in comDisplayLines.slice((i - 1) * rowNums, Math.min(i * rowNums, comDisplayLines.length))">
				<div v-if="item.color" class="line shadow-2 bg-white" :data-name="item.name" :style="'--com-line-bgcolor:'+item.bgcolor+'; --com-line-color:'+item.color+';'">
					<div v-for="(obj, key) in item.selects">
						<q-select 
							clearable
							:clear-value="''" 
							v-model="obj.value"
							:options="obj.options"
							:placeholder="obj.empty_text"
							@input="comOptionChange(obj.value, key, (i-1)*rowNums+j)"
						></q-select>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	props: {
		"displayLines": {
			type: Array,
			required: true
		},
		"rowAmount": {
			type: Number,
			default: 4
		}
	},
	data: () => {
		return {
			comDisplayLines: []
		}
	},
	mounted () {
		this.comDisplayLines = this.displayLines;
	},
	watch: {
		displayLines () {
			console.log(this.displayLines);
			this.comDisplayLines = this.displayLines;
		}
	},
	computed: {
		rowNums () {
			return this.rowAmount;
		}
	},
	methods: {
		comOptionChange (v, k, i) {
			this.$emit("com_changed", {
				value: v,
				key: k,
				line: i
			});
		}
	}
}
</script>