<template>
	<view class="mx-condition-button-group pl20">
		<view class="mx-condition-group-title mb8">
			<text class="mx-condition-title mr10">{{condition.title}}</text>
			<text v-if="condition.error" class="mx-condition-error">{{condition.error}}</text>
		</view>
		<view class="mx-condition-group-list pr40">
			<mx-daterange-picker :modelValue="range" @change="$emit('conditionChanged', condition.key, $event)" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "mx-condition-date-range",
		props: {
			condition: {
				type: Object,
				default: _ => ({})
			}
		},
		mounted() {
			this.setDefaultRange()
		},
		watch: {
			'condition': function(newVal, oldVal) {
				this.setDefaultRange()
			}
		},
		data() {
			return {
				range: [],
				showPicker: false
			}
		},
		methods: {
			setDefaultRange() {
				//console.log('date range setDefaultRange called')
				if (!this.condition?.list?.length) return
				let defaultRange = this.condition.list[this.condition.list.length - 1].code
				this.range = defaultRange
				setTimeout(_ => this.showPicker = true, 200)
			},
			itemAction(key, value) {
				if (value != this.condition.value) {
					this.$emit('conditionChanged', key, value)
				}
			}
		}
	}
</script>

<style scoped>
</style>
