<template>
  <div>
    <a-form
      layout="vertical"
      size="small"
      @submit.prevent
    >
      <a-form-item>
        <template #label>
          <span>
            流转类型
            <a-tooltip placement="top">
              <template #title>
                <div style="max-width: 300px">
                  普通流转路径：流程执行过程中，一个元素被访问后，会沿着其所有出口顺序流继续执行。
                  <br />默认流转路径：只有当没有其他顺序流可以选择时，才会选择默认顺序流作为活动的出口顺序流。流程会忽略默认顺序流上的条件。
                  <br />条件流转路径：是计算其每个出口顺序流上的条件。当条件计算为true时，选择该出口顺序流。如果该方法选择了多条顺序流，则会生成多个执行，流程会以并行方式继续。
                </div>
              </template>
              <question-circle-outlined />
            </a-tooltip>
          </span>
        </template>
        <a-select
          v-model:value="bpmnFormData.type"
          @change="updateFlowType"
        >
          <a-select-option value="normal">普通流转路径</a-select-option>
          <a-select-option value="default">默认流转路径</a-select-option>
          <a-select-option value="condition">条件流转路径</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item 
        label="条件格式" 
        v-if="bpmnFormData.type === 'condition'" 
        key="condition"
      >
        <a-select v-model:value="bpmnFormData.conditionType">
          <a-select-option value="expression">表达式</a-select-option>
          <a-select-option value="script">脚本</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item 
        label="表达式" 
        v-if="bpmnFormData.conditionType && bpmnFormData.conditionType === 'expression'" 
        key="express"
      >
        <a-input 
          v-model:value="bpmnFormData.body" 
          allow-clear 
          @change="updateFlowCondition" 
        />
      </a-form-item>
      
      <template v-if="bpmnFormData.conditionType && bpmnFormData.conditionType === 'script'">
        <a-form-item label="脚本语言" key="language">
          <a-input 
            v-model:value="bpmnFormData.language" 
            allow-clear 
            @change="updateFlowCondition" 
          />
        </a-form-item>
        
        <a-form-item label="脚本类型" key="scriptType">
          <a-select v-model:value="bpmnFormData.scriptType">
            <a-select-option value="inlineScript">内联脚本</a-select-option>
            <a-select-option value="externalScript">外部脚本</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item 
          label="脚本" 
          v-if="bpmnFormData.scriptType === 'inlineScript'" 
          key="body"
        >
          <a-textarea 
            v-model:value="bpmnFormData.body" 
            allow-clear 
            @change="updateFlowCondition" 
          />
        </a-form-item>
        
        <a-form-item 
          label="资源地址" 
          v-if="bpmnFormData.scriptType === 'externalScript'" 
          key="resource"
        >
          <a-input 
            v-model:value="bpmnFormData.resource" 
            allow-clear 
            @change="updateFlowCondition" 
          />
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { StrUtil } from "../common/StrUtil"

interface BpmnFormData {
  type?: string
  conditionType?: string
  scriptType?: string
  body?: string
  language?: string
  resource?: string
  [key: string]: any
}

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

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

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

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

// 重置流程条件
const resetFlowCondition = () => {
  Object.assign(bpmnFormData, {
    body: null,
    type: '',
    conditionType: '',
    scriptType: '',
    language: '',
    resource: ''
  })
  
  bpmnElementSource.value = modelerStore.element.source
  bpmnElementSourceRef.value = modelerStore.element.businessObject.sourceRef
  
  if (bpmnElementSourceRef.value && 
      bpmnElementSourceRef.value.default && 
      bpmnElementSourceRef.value.default.id === modelerStore.element.id) {
    // 默认
    bpmnFormData.type = "default"
  } else if (!modelerStore.element.businessObject.conditionExpression) {
    // 普通
    bpmnFormData.type = "normal"
  } else {
    // 带条件
    const conditionExpression = modelerStore.element.businessObject.conditionExpression
    Object.assign(bpmnFormData, {...conditionExpression, type: "condition"})
    
    // resource 可直接标识 是否是外部资源脚本
    if (bpmnFormData.resource) {
      bpmnFormData.conditionType = "script"
      bpmnFormData.scriptType = "externalScript"
      return
    }
    
    if (conditionExpression.language) {
      bpmnFormData.conditionType = "script"
      bpmnFormData.scriptType = "inlineScript"
      return
    }
    
    bpmnFormData.conditionType = "expression"
  }
}

// 更新流程类型
const updateFlowType = (flowType: string) => {
  // 正常条件类
  if (flowType === "condition") {
    const flowConditionRef = modelerStore.moddle.create("bpmn:FormalExpression")
    modelerStore.modeling.updateProperties(modelerStore.element, {
      conditionExpression: flowConditionRef
    })
    return
  }
  
  // 默认路径
  if (flowType === "default") {
    modelerStore.modeling.updateProperties(modelerStore.element, {
      conditionExpression: null
    })
    modelerStore.modeling.updateProperties(bpmnElementSource.value, {
      default: modelerStore.element
    })
    // 清空条件格式
    bpmnFormData.conditionType = ''
    return
  }
  
  // 清空条件格式
  bpmnFormData.conditionType = ''
  
  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
  if (bpmnElementSourceRef.value.default && 
      bpmnElementSourceRef.value.default.id === modelerStore.element.id) {
    modelerStore.modeling.updateProperties(bpmnElementSource.value, {
      default: null
    })
  }
  
  modelerStore.modeling.updateProperties(modelerStore.element, {
    conditionExpression: null
  })
}

// 更新流程条件
const updateFlowCondition = () => {
  const { conditionType, scriptType, body, resource, language } = bpmnFormData
  let condition
  
  if (conditionType === "expression") {
    condition = modelerStore.moddle.create("bpmn:FormalExpression", { body })
  } else {
    if (scriptType === "inlineScript") {
      condition = modelerStore.moddle.create("bpmn:FormalExpression", { body, language })
      bpmnFormData.resource = ""
    } else {
      bpmnFormData.body = ""
      condition = modelerStore.moddle.create("bpmn:FormalExpression", { resource, language })
    }
  }
  
  modelerStore.modeling.updateProperties(modelerStore.element, { 
    conditionExpression: condition 
  })
}
</script>