<template>
    <div>
        <div v-for="(item, index) in conditionList" :key="index"
            style="margin-bottom: 16px; border: 1px solid #ccc; padding: 12px; border-radius: 4px;">
            <el-form-item label="种类标识" style="margin-bottom: 10px">
                <el-input v-model="item.class" placeholder="例如 steam / water" />
            </el-form-item>
            <PipeStatusConditionGroup :group="item" :codeOptions="codeOptions" />
            <el-button type="danger" plain @click="remove(index)" style="margin-top: 10px">删除这一组</el-button>
        </div>
        <el-button type="primary" @click="add">新增种类切换条件组</el-button>
    </div>
</template>

<script setup>
import { reactive, watch } from "vue"
import PipeStatusConditionGroup from '@/components/DCS/PipeStatusConditionGroup.vue'

const props = defineProps({
    modelValue: String,
    codeOptions: Array
})
const emits = defineEmits(['update:modelValue'])

const conditionList = reactive([])

watch(
    () => props.modelValue,
    (val) => {
        try {
            const parsed = JSON.parse(val || '[]')
            conditionList.splice(0, conditionList.length, ...parsed)
        } catch {
            conditionList.splice(0, conditionList.length)
        }
    },
    { immediate: true }
)

watch(
    conditionList,
    () => {
        emits('update:modelValue', JSON.stringify(conditionList))
    },
    { deep: true }
)

function add() {
    conditionList.push({
        class: '',
        operator: 'AND',
        conditions: []
    })
}
function remove(index) {
    conditionList.splice(index, 1)
}
</script>
