xdz-pc/src/views/iot/rule/scene/form/sections/TriggerSection.vue

<template>
  <el-card class="border border-[var(--el-border-color-light)] rounded-8px mb-10px" shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-8px">
          <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
          <el-tag size="small" type="info">{{ triggers.length }} 个触发器</el-tag>
        </div>
        <el-button type="primary" size="small" @click="addTrigger">
          <Icon icon="ep:plus" />
          添加触发器
        </el-button>
      </div>
    </template>

    <div class="p-16px space-y-24px">
      <!-- 触发器列表 -->
      <div v-if="triggers.length > 0" class="space-y-24px">
        <div
          v-for="(triggerItem, index) in triggers"
          :key="`trigger-${index}`"
          class="border-2 border-green-200 rounded-8px bg-green-50 shadow-sm hover:shadow-md transition-shadow"
        >
          <!-- 触发器头部 - 绿色主题 -->
          <div
            class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-200 rounded-t-6px"
          >
            <div class="flex items-center gap-12px">
              <div class="flex items-center gap-8px text-16px font-600 text-green-700">
                <div
                  class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
                >
                  {{ index + 1 }}
                </div>
                <span>触发器 {{ index + 1 }}</span>
              </div>
              <el-tag size="small" :type="getTriggerTagType(triggerItem.type)" class="font-500">
                {{ getTriggerTypeLabel(triggerItem.type) }}
              </el-tag>
            </div>
            <div class="flex items-center gap-8px">
              <el-button
                v-if="triggers.length > 1"
                type="danger"
                size="small"
                text
                @click="removeTrigger(index)"
                class="hover:bg-red-50"
              >
                <Icon icon="ep:delete" />
                删除
              </el-button>
            </div>
          </div>

          <!-- 触发器内容区域 -->
          <div class="p-16px space-y-16px">
            <!-- 设备触发配置 -->
            <DeviceTriggerConfig
              v-if="isDeviceTrigger(triggerItem.type)"
              :model-value="triggerItem"
              :index="index"
              @update:model-value="(value) => updateTriggerDeviceConfig(index, value)"
              @trigger-type-change="(type) => updateTriggerType(index, type)"
            />

            <!-- 定时触发配置 -->
            <div
              v-else-if="triggerItem.type === IotRuleSceneTriggerTypeEnum.TIMER"
              class="flex flex-col gap-16px"
            >
              <div
                class="flex items-center gap-8px p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
              >
                <Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
                <span class="text-14px font-500 text-[var(--el-text-color-primary)]"
                  >定时触发配置</span
                >
              </div>

              <!-- CRON 表达式配置 -->
              <div
                class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
              >
                <el-form-item label="CRON表达式" required>
                  <Crontab
                    :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
                    @update:model-value="(value) => updateTriggerCronConfig(index, value)"
                  />
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="py-40px text-center">
        <el-empty description="暂无触发器">
          <template #description>
            <div class="space-y-8px">
              <p class="text-[var(--el-text-color-secondary)]">暂无触发器配置</p>
              <p class="text-12px text-[var(--el-text-color-placeholder)]">
                请使用上方的"添加触发器"按钮来设置触发规则
              </p>
            </div>
          </template>
        </el-empty>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import DeviceTriggerConfig from '../configs/DeviceTriggerConfig.vue'
import { Crontab } from '@/components/Crontab'
import type { Trigger } from '@/api/iot/rule/scene'
import {
  getTriggerTypeLabel,
  IotRuleSceneTriggerTypeEnum,
  isDeviceTrigger
} from '@/views/iot/utils/constants'

/** 触发器配置组件 */
defineOptions({ name: 'TriggerSection' })

const props = defineProps<{
  triggers: Trigger[]
}>()

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

const triggers = useVModel(props, 'triggers', emit)

/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
const getTriggerTagType = (type: number): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
  if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
    return 'warning'
  }
  return isDeviceTrigger(type) ? 'success' : 'info'
}

/** 添加触发器 */
const addTrigger = () => {
  const newTrigger: Trigger = {
    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
    productId: undefined,
    deviceId: undefined,
    identifier: undefined,
    operator: undefined,
    value: undefined,
    cronExpression: undefined,
    conditionGroups: [] // 空的条件组数组
  }
  triggers.value.push(newTrigger)
}

/**
 * 删除触发器
 * @param index 触发器索引
 */
const removeTrigger = (index: number) => {
  if (triggers.value.length > 1) {
    triggers.value.splice(index, 1)
  }
}

/**
 * 更新触发器类型
 * @param index 触发器索引
 * @param type 触发器类型
 */
const updateTriggerType = (index: number, type: number) => {
  triggers.value[index].type = type
  onTriggerTypeChange(index, type)
}

/**
 * 更新触发器设备配置
 * @param index 触发器索引
 * @param newTrigger 新的触发器对象
 */
const updateTriggerDeviceConfig = (index: number, newTrigger: Trigger) => {
  triggers.value[index] = newTrigger
}

/**
 * 更新触发器 CRON 配置
 * @param index 触发器索引
 * @param cronExpression CRON 表达式
 */
const updateTriggerCronConfig = (index: number, cronExpression?: string) => {
  triggers.value[index].cronExpression = cronExpression
}

/**
 * 处理触发器类型变化事件
 * @param index 触发器索引
 * @param _ 触发器类型（未使用）
 */
const onTriggerTypeChange = (index: number, _: number) => {
  const triggerItem = triggers.value[index]
  triggerItem.productId = undefined
  triggerItem.deviceId = undefined
  triggerItem.identifier = undefined
  triggerItem.operator = undefined
  triggerItem.value = undefined
  triggerItem.cronExpression = undefined
  triggerItem.conditionGroups = []
}

/** 初始化：确保至少有一个触发器 */
onMounted(() => {
  if (triggers.value.length === 0) {
    addTrigger()
  }
})
</script>