<template>
  <div>
    <a-form layout="vertical" size="small" @submit.prevent>
      <a-form-item label="跳过表达式">
        <a-input 
          v-model:value="bpmnFormData.skipExpression" 
          @change="() => updateElementTask('skipExpression')"
        />
      </a-form-item>
      <a-form-item label="是否为补偿">
        <a-input 
          v-model:value="bpmnFormData.isForCompensation" 
          @change="() => updateElementTask('isForCompensation')"
        />
      </a-form-item>
      <a-form-item label="服务任务可触发">
        <a-input 
          v-model:value="bpmnFormData.triggerable" 
          @change="() => updateElementTask('triggerable')"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import { StrUtil } from "../common/StrUtil"

interface BpmnFormData {
  skipExpression?: string
  isForCompensation?: string
  triggerable?: string
  [key: string]: any
}

const props = defineProps<{
  id: string
}>()

// 响应式数据
const bpmnFormData = reactive<BpmnFormData>({})

// 假设这是从其他地方引入的 store
const modelerStore = {
  element: {} as any,
  modeling: {
    updateProperties: (element: any, properties: any) => {}
  }
}

// 监听 id 变化
watch(() => props.id, (newVal) => {
  if (StrUtil.isNotBlank(newVal)) {
    resetTaskForm()
  }
}, { immediate: true })

// 重置任务表单
const resetTaskForm = () => {
  if (modelerStore.element && modelerStore.element.businessObject) {
    Object.assign(bpmnFormData, JSON.parse(JSON.stringify(modelerStore.element.businessObject)))
  }
}

// 更新元素任务属性
const updateElementTask = (key: string) => {
  const taskAttr: Record<string, any> = {}
  taskAttr[key] = bpmnFormData[key] !== undefined ? bpmnFormData[key] : null
  modelerStore.modeling.updateProperties(modelerStore.element, taskAttr)
}
</script>