<template>
  <div class="group_wrapper">
    <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="addSubGroup">添加条件子组</el-button>

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

<script setup>
import PipeStatusConditionGroup from '@/components/DCS/PipeStatusSubGroup.vue';

// 用 defineModel 接收 v-model:group
const group = defineModel('group');

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

function addSubGroup() {
  group.value.conditions.push({
    type: 'group',
    operator: 'AND',
    conditions: []
  });
}
</script>

<style scoped>
.group_wrapper {
  border: 1px dashed #ccc;
  padding: 10px;
}

.sub_group_list {
  margin-top: 12px;
}
</style>
