<template>
    <div class="condition_item">
        <el-select v-model="local.equipmentId" placeholder="请选择设备" style="width: 140px" @change="emitUpdate" clearable>
            <el-option v-for="item in equipmentOptions" :key="item.equipmentId" :label="item.equipmentName"
                :value="item.equipmentId" />
        </el-select>
        <el-select v-model="local.operator" placeholder="运算符" style="width: 100px" @change="emitUpdate">
            <el-option label="==" value="eq" />
            <el-option label="!=" value="!=" />
            <el-option label=">" value="gt" />
            <el-option label=">=" value="ge" />
            <el-option label="<" value="lt" />
            <el-option label="<=" value="le" />
        </el-select>
        <el-input v-model="local.value" placeholder="值" style="width: 100px" @input="emitUpdate" />
        <el-button type="danger" icon="Delete" circle size="small" @click="$emit('remove')" />
    </div>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
    condition: Object,
    equipmentOptions: Array, //  接收设备下拉数据
})
const emit = defineEmits(['update:condition', 'remove'])

const local = reactive({ ...props.condition })

watch(
    () => props.condition,
    (newVal) => Object.assign(local, newVal),
    { deep: true }
)

function emitUpdate() {
    emit('update:condition', { ...local, type: 'item' })
}
</script>
