<template>
  <div v-if="workflowHandleWrap.needSelectPerson">
    <!-- 多分支选择（包含WF_RESULT的条件分支或并行分支的情况） -->
    <template v-if="workflowHandleWrap.needMultipleBranchSelection && workflowHandleWrap.branchNodes.length > 0">
      <template v-for="node in workflowHandleWrap.branchNodes">
        <a-form-item
          v-if="node.needSelectPerson"
          :key="node.stepId"
          :label="`${node.stepName}处理人`"
          required
        >
          <a-select
            :value="getBranchPersonValue(node.stepId)"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            @change="setBranchPersonValue(node.stepId, $event, node.chargePersonOptions)"
            :placeholder="`请选择${node.stepName}的处理人`"
            :options="node.chargePersonOptions"
            :filter-option="filterOption"
            style="width: 195px"
            show-search
          >
            <a-select-option v-for="option in node.chargePersonOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </template>
    </template>

    <!-- 单分支选择（前台可计算的情况） -->
    <a-form-item v-else :label="getBranchSelectionLabel()" required>
      <a-select
        v-model="workflowHandleWrap.checkedChargePerson"
        placeholder="请选择或搜索"
        :getPopupContainer="(triggerNode) => triggerNode.parentNode"
        :options="workflowHandleWrap.chargePersonOptions"
        @change="setBranchPersonValue(workflowHandleWrap.calculatedTargetNode, $event, workflowHandleWrap.chargePersonOptions)"
        :filter-option="filterOption"
        style="width: 195px"
        show-search
      />
      <!--      <div v-if="workflowHandleWrap.calculatedTargetNode" style="margin-top: 8px; color: #52c41a; font-size: 12px;">-->
      <!--        <a-icon type="check-circle"/>-->
      <!--        根据当前表单数据，将进入：{{ workflowHandleWrap.getStepNameByStepId(workflowHandleWrap.calculatedTargetNode) }}-->
      <!--      </div>-->
    </a-form-item>
  </div>
</template>

<script>
export default {
  name: 'WorkflowPersonSelector',
  inject: ['workflowHandleWrap'],
  data () {
    return {}
  },
  mounted () {
  },
  methods: {
    // 选择框过滤
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },

    // 获取分支处理人值
    getBranchPersonValue (stepId) {
      if (!this.workflowHandleWrap.branchChargePersons) {
        // 确保 branchChargePersons 对象存在
        this.$set(this.workflowHandleWrap, 'branchChargePersons', {})
      }
      const value = this.workflowHandleWrap.branchChargePersons[stepId]?.handlerId
      console.log('获取分支处理人值:', stepId, value)
      return value
    },

    // 设置分支处理人值
    setBranchPersonValue (stepId, value, options) {
      if (!stepId) return
      if (!this.workflowHandleWrap.branchChargePersons) {
        this.$set(this.workflowHandleWrap, 'branchChargePersons', {})
      }
      // 使用 $set 确保响应式更新
      this.$set(this.workflowHandleWrap.branchChargePersons, stepId, Object.assign({ ...this.workflowHandleWrap.branchChargePersons[stepId] }, {
        handler: options.find(item => item.value === value).label,
        handlerId: value
      }))
      // 强制更新组件
      this.$forceUpdate()
    },

    // 获取分支选择标签文本
    getBranchSelectionLabel () {
      if (this.workflowHandleWrap.needMultipleBranchSelection) {
        return '分支节点处理人选择'
      } else if (this.workflowHandleWrap.calculatedTargetNode) {
        return `请选择${this.workflowHandleWrap.getStepNameByStepId(this.workflowHandleWrap.calculatedTargetNode)}处理人`
      } else {
        return '下一环节处理人'
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 组件样式已集成到表单中，无需额外样式
</style>
