<template>
  <el-tooltip content="添加用户" placement="left">
    <el-button
      :disabled="props.disabled"
      class="!px-6px"
      @click="handleSelectUser('id', customApproveUsers)"
    >
      <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
    </el-button>
  </el-tooltip>
  <div
    v-for="(user, idx1) in customApproveUsers"
    :key="idx1"
    class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
  >
    <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
    <el-avatar class="!m-5px" :size="28" v-else>
      {{ user.nickname.substring(0, 1) }}
    </el-avatar>
    {{ user.nickname }}
  </div>
  <!-- 用户选择弹窗 -->
  <UserSelectFormDept ref="userSelectFormDeptRef" @confirm="handleUserSelectConfirm" />
</template>

<script setup>
import { ref } from 'vue'
defineOptions({ name: 'FcAddUserDept' })
const props = defineProps({
  // 获取表单数据
  modelValue: {
    type: [Array, String], // 根据实际类型调整，这里假设可以是数组或字符串
    default: () => []
  },
  // 支持表单禁用功能
  disabled: Boolean,
  appendLabel: String
})

const emit = defineEmits(['update:modelValue', 'change'])

const userSelectFormDeptRef = ref(null)

// 更新表单数据
// const handleChange = (val) => {
//   emit('update:modelValue', val)
//   // 触发 change 事件
//   emit('change', val)
// }

// 假设这些方法和数据是从外部传入的（原代码中未定义）
// 需要根据实际情况补充或从父组件传递
// const activity = { id: '' } // 示例值，实际应从props或外部获取

const handleSelectUser = (id, users) => {
  // 实现选择用户逻辑
  console.log('Select user for activity:', id, users)
  console.log('userSelectFormDeptRef', userSelectFormDeptRef)
  // 如果需要打开用户选择弹窗
  userSelectFormDeptRef.value?.open?.(id, users) // 假设UserSelectForm有open方法
}
const customApproveUsers = ref([]) // key：activityId，value：用户列表
const handleUserSelectConfirm = (activityId, userList) => {
  // 处理用户选择确认逻辑
  console.log('Selected users:', activityId, userList)
  customApproveUsers.value = userList || []
  emit('update:modelValue', customApproveUsers.value)
  emit('change', customApproveUsers.value)
}
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal && newVal.length) {
      // 如果有值传入
      customApproveUsers.value = Array.isArray(newVal) ? newVal : [newVal] // 根据实际类型处理
      // isDisabled.value = true // 禁用按钮
    } else {
      // isDisabled.value = false // 启用按钮
    }
  },
  { immediate: true }
)
// // 选择完成
// const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
//   customApproveUsers.value[activityId] = userList || []
//   emit('selectUserConfirm', activityId, userList)
// }
</script>
