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

        <div class="condition_items">
            <PipeStatusConditionItem v-for="(condition, index) in group.conditions" :key="index" :condition="condition"
                :codeOptions="codeOptions" @remove="group.conditions.splice(index, 1)" />
        </div>
    </div>
</template>

<script setup>
import PipeStatusConditionItem from './PipeStatusConditionItem.vue';

const props = defineProps({
    group: Object,
    codeOptions: Array
});

defineEmits(['remove']);

function addItem() {
    props.group.conditions.push({
        type: 'item',
        code: ''
    });
}
</script>

<style scoped>
.condition_group {
    border-left: 2px solid #ccc;
    padding-left: 10px;
    margin-top: 10px;
}

.condition_header {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}
</style>
