<template>
  <ContentWrap>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <div v-for="taskAssignRule in props?.taskAssignRules" :key="taskAssignRule.taskDefinitionKey">
        <el-divider content-position="left">审批节点：{{ taskAssignRule?.taskDefinitionName }}</el-divider>
        <el-form-item :label="taskAssignRule.taskDefinitionName+'候选人'"
                      :prop="taskAssignRule.taskDefinitionKey"
                      label-width="122">
          <UserSelect
            v-model="formData[taskAssignRule.taskDefinitionKey]"
            :column="userSelectColumn"
            :prop="taskAssignRule.taskDefinitionKey"
            type="edit"
            :func="(value)=>{console.log(JSON.stringify(value))}"
          >
          </UserSelect>
        </el-form-item>
      </div>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
// 从 UserSelect 组件导入 Column 类型
import type {Column} from '@/components/LowDesign/src/shareControl/UserSelect.vue'

// 定义组件选项
defineOptions({
  name: "BpmTaskSelectAssigneeForm"
})

interface TaskAssignRule {
  id: number
  modelId: string
  processDefinitionId: string
  taskDefinitionKey: string
  taskDefinitionName: string
  type: number
  options: number[]
}

const props = defineProps<{
  taskAssignRules: TaskAssignRule[]
  modelValue: {}
}>()

const formRef = ref()
const formData = ref(props.modelValue)
const formRules = ref({})
const userSelectColumn: Column = {
  label: '候选人',
  findType: 'all',
  multiple: false,
  columnKey: ['sex', 'post', 'deptName']
}

const emit = defineEmits(['updateModelValue'])

watch(
  () => props.modelValue,
  (val: {}) => {
    formData.value = val
  },
  {
    deep: true,
    immediate: true,
  }
)

watch(
  () => formData.value,
  (val: {}) => {
    emit('updateModelValue', val)
  },
  {
    deep: true,
    immediate: true,
  }
)

const validateAssignee = (successCallBack: () => void, failCallback: () => void) => {
  formRef.value.validate((valid: boolean) => {
    if (valid) successCallBack()
    else failCallback()
  })
}

defineExpose({validateAssignee})

// 初始化 formData
onMounted(() => {
  if (props.taskAssignRules) {
    props.taskAssignRules.forEach(rule => {
      formData.value[rule.taskDefinitionKey] = ''
      formRules.value[rule.taskDefinitionKey] = [
        {
          required: true,
          message: '请选择候选人',
          trigger: 'blur'
        }
      ]
    })
  }
})

</script>


