xlcp-frontend/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue

<template>
  <div class="p-16px">
    <!-- 空状态 -->
    <div v-if="!subGroup || subGroup.length === 0" class="text-center py-24px">
      <div class="flex flex-col items-center gap-12px">
        <Icon icon="ep:plus" class="text-32px text-[var(--el-text-color-placeholder)]" />
        <div class="text-[var(--el-text-color-secondary)]">
          <p class="text-14px font-500 mb-4px">暂无条件</p>
          <p class="text-12px">点击下方按钮添加第一个条件</p>
        </div>
        <el-button type="primary" @click="addCondition">
          <Icon icon="ep:plus" />
          添加条件
        </el-button>
      </div>
    </div>

    <!-- 条件列表 -->
    <div v-else class="space-y-16px">
      <div
        v-for="(condition, conditionIndex) in subGroup"
        :key="`condition-${conditionIndex}`"
        class="relative"
      >
        <!-- 条件配置 -->
        <div
          class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)] shadow-sm"
        >
          <div
            class="flex items-center justify-between p-12px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)] rounded-t-4px"
          >
            <div class="flex items-center gap-8px">
              <div
                class="w-20px h-20px bg-blue-500 text-white rounded-full flex items-center justify-center text-10px font-bold"
              >
                {{ conditionIndex + 1 }}
              </div>
              <span class="text-12px font-500 text-[var(--el-text-color-primary)]"
                >条件 {{ conditionIndex + 1 }}</span
              >
            </div>
            <el-button
              type="danger"
              size="small"
              text
              @click="removeCondition(conditionIndex)"
              v-if="subGroup!.length > 1"
              class="hover:bg-red-50"
            >
              <Icon icon="ep:delete" />
            </el-button>
          </div>

          <div class="p-12px">
            <ConditionConfig
              :model-value="condition"
              @update:model-value="(value) => updateCondition(conditionIndex, value)"
              :trigger-type="triggerType"
            />
          </div>
        </div>
      </div>

      <!-- 添加条件按钮 -->
      <div
        v-if="subGroup && subGroup.length > 0 && subGroup.length < maxConditions"
        class="text-center py-16px"
      >
        <el-button type="primary" plain @click="addCondition">
          <Icon icon="ep:plus" />
          继续添加条件
        </el-button>
        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]">
          最多可添加 {{ maxConditions }} 个条件
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick } from 'vue'
import { useVModel } from '@vueuse/core'
import ConditionConfig from './ConditionConfig.vue'
import type { TriggerCondition } from '@/api/iot/rule/scene'
import {
  IotRuleSceneTriggerConditionTypeEnum,
  IotRuleSceneTriggerConditionParameterOperatorEnum
} from '@/views/iot/utils/constants'

/** 子条件组配置组件 */
defineOptions({ name: 'SubConditionGroupConfig' })

const props = defineProps<{
  modelValue: TriggerCondition[]
  triggerType: number
  maxConditions?: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: TriggerCondition[]): void
}>()

const subGroup = useVModel(props, 'modelValue', emit)

const maxConditions = computed(() => props.maxConditions || 3) // 最大条件数量

/**
 * 添加条件
 */
const addCondition = async () => {
  // 确保 subGroup.value 是一个数组
  if (!subGroup.value) {
    subGroup.value = []
  }

  // 检查是否达到最大条件数量限制
  if (subGroup.value?.length >= maxConditions.value) {
    return
  }

  const newCondition: TriggerCondition = {
    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
    productId: undefined,
    deviceId: undefined,
    identifier: '',
    operator: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value, // 使用枚举默认值
    param: ''
  }

  // 使用 nextTick 确保响应式更新完成后再添加新条件
  await nextTick()
  if (subGroup.value) {
    subGroup.value.push(newCondition)
  }
}

/**
 * 移除条件
 * @param index 条件索引
 */
const removeCondition = (index: number) => {
  if (subGroup.value) {
    subGroup.value.splice(index, 1)
  }
}

/**
 * 更新条件
 * @param index 条件索引
 * @param condition 条件对象
 */
const updateCondition = (index: number, condition: TriggerCondition) => {
  if (subGroup.value) {
    subGroup.value[index] = condition
  }
}
</script>