<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 class="mx-condition-item pl15 pr15 mr10 rd12 mb8" @click="selectAll()">全选</text>
			<text class="mx-condition-item pl15 pr15 mr10 rd12 mb8" @click="selectOpposite()">反选</text>
			<text v-if="condition.error" class="mx-condition-error">{{condition.error}}</text>
		</view>
		<view class="mx-condition-group-list">
			<mx-data-checkbox multiple :modelValue="condition.value || []" :localdata="condition.list"
				:map="{text:'label',value:'code'}" @update:modelValue="valueChangedAction">
			</mx-data-checkbox>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mx-condition-button-group",
		props: {
			condition: {
				type: Object,
				default: _ => ({})
			}
		},
		methods: {
			valueChangedAction(value) {
				if (this.condition.value?.toString() != value?.toString()) {
					console.log('multiple valueChangedAction', value)
					this.$emit('conditionChanged', this.condition.key, value)
				}
			},
			selectAll() {
				const all = this.condition.list.map(i => i.code)
				this.$emit('conditionChanged', this.condition.key, all)
			},
			selectOpposite() {
				const val = this.condition.value
				const safeArrayVal = Array.isArray(val) ? val : isNaN(val) ? [] : [val]
				const opp = this.condition.list.filter(i => !safeArrayVal.includes(i.code)).map(i => i.code)
				this.$emit('conditionChanged', this.condition.key, opp)
			}
		}
	}
</script>

<style scoped>
</style>
