<template>
    <div class="condition_group">
        <div class="condition_option">
            <el-select v-model="group.operator" style="width: 100px">
                <el-option label="AND" value="AND" />
                <el-option label="OR" value="OR" />
            </el-select>
            <el-button type="primary" size="small" @click="addCondition">添加条件</el-button>
            <el-button type="success" size="small" @click="addGroup">添加条件组</el-button>
            <el-button type="danger" size="small" @click="$emit('remove')">删除组</el-button>
        </div>

        <div v-for="(condition, index) in group.conditions" :key="index" class="ml_4">
            <ConditionItem v-if="condition.type === 'item'" :condition="condition" :equipmentOptions="equipmentOptions"
                @update:condition="val => group.conditions[index] = val" @remove="group.conditions.splice(index, 1)" />
            <ConditionGroup v-else :group="condition" @remove="group.conditions.splice(index, 1)" />
        </div>
    </div>
</template>

<script setup>
import ConditionItem from './ConditionItem.vue'
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    group: Object,//  传递条件组
    equipmentOptions: Array //  传递设备列表
})
const emit = defineEmits(['remove'])

const addCondition = () => {
    props.group.conditions.push({
        type: 'item',
        equipmentId: '',
        operator: '==',
        value: ''
    })
}

const addGroup = () => {
    props.group.conditions.push({
        type: 'group',
        operator: 'AND',
        conditions: []
    })
}
</script>
<style scoped lang="scss">
.condition_group {
    .condition_option {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .ml_4 {
        margin-left: 4%;
    }
}
</style>