<template>
  <div>
    <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 class="selected-approvals">
      <div v-for="item in selectedApprovals" :key="item.id" class="approval-card">
        <div>
          <p>流程分类：{{ item.categoryName }}</p>
          <p>
            <span class="approval-user">{{ item.nickname }}</span>
            <span class="approval-time"> 提交于：{{ formatTime(item.startTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          </p>
        </div>
        <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="item.status" />
        <el-button
          :disabled="props.disabled"
          link
          type="danger"
          size="small"
          @click="removeApproval(item.id)"
          >删除</el-button
        >
      </div>
    </div>
  </div>

  <!-- <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> -->
  <!-- 用户选择弹窗 -->
  <AddAProve v-model="selectedApprovals" ref="AddAProveRef" @confirm="handleUserSelectConfirm" />
</template>

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

const AddAProveRef = 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('AddAProveRef', AddAProveRef)
  // 如果需要打开用户选择弹窗
  AddAProveRef.value?.open?.() // 假设UserSelectForm有open方法
}
const customApproveUsers = ref([]) // key：activityId，value：用户列表
const handleUserSelectConfirm = (selectedApprovals) => {
  // 处理用户选择确认逻辑
  console.log('selectedApprovals', selectedApprovals)
  // console.log('Selected users:', activityId, userList)
  // customApproveUsers.value = userList || []
  emit('update:modelValue', selectedApprovals)
  emit('change', selectedApprovals)
}
const removeApproval = (id) => {
  selectedApprovals.value = selectedApprovals.value.filter((item) => item.id !== id)
}

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal && newVal.length) {
      // 如果有值传入
      selectedApprovals.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>
<style scoped>
.selected-approvals {
  margin-top: 10px;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 项目之间的间距 */
  row-gap: 3px;
}

.approval-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
  width: calc(50% - 8px);
  min-width: 400px;
}
</style>
