<template>
  <div class="delay-task-editor">
    <el-form-item
      label="延时时间(秒)"
      :prop="propPath"
      :rules="isEditing ? {
        required: true,
        message: '请输入延时时间',
        trigger: 'blur'
      } : null"
      class="delay-time-form-item"
    >
      <el-input-number
        :model-value="delayDuration"
        @update:model-value="updateDelayDuration"
        placeholder="请输入延时时间"
        style="width: 100%;"
      ></el-input-number>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "DelayTaskEditor",
  props: {
    // The parameters object for the task
    parameters: {
      type: Object,
      required: true,
    },
    // The full prop path for validation, e.g., 'parameters.delay_duration'
    propPath: {
      type: String,
      default: "parameters.delay_duration", // Updated default prop path
    },
    // New prop to control editability
    isEditing: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:parameters"],
  computed: {
    delayDuration() { // Renamed from delaySeconds
      return this.parameters?.delay_duration;
    },
  },
  methods: {
    updateDelayDuration(value) { // Renamed from updateDelaySeconds
      this.$emit("update:parameters", {
        ...this.parameters,
        delay_duration: value,
      });
    },
  },
};
</script>

<style scoped>
.delay-task-editor {
  width: 100%;
}
.delay-time-form-item :deep(.el-form-item__label) {
  white-space: nowrap;
}
</style>