<template>
  <node title="发起人" :is-root="true" :mode="mode" :content="content" show-avatar :user-info="config.props.assignedUser"
        @selected="emit('selected')" @insertNode="type => emit('insertNode', type)"
        placeholder="所有人" :header-bgc="headerBgc" :header-icon="UserFilled"/>
</template>

<script setup>
import Node from './Node.vue'
import {UserFilled} from '@element-plus/icons-vue'
import {computed, defineExpose, defineProps} from "vue";
const emit = defineEmits(['insertNode','selected'])

const props = defineProps({
  config:{
    type: Object,
    default: () => {
      return {}
    }
  },
  mode: {
    type: String,
    default: 'design'
  }
})


const content = computed(() => {
  if (props.config.props.assignedUser.length > 0){
    let texts = []
    props.config.props.assignedUser.forEach(org => texts.push(org.name))
    return String(texts).replaceAll(',', '、')
  } else {
    return '所有人'
  }
})

const headerBgc = computed(() => {
  if (props.mode === 'design' || props.mode === 'view') {
    return '#2E7CF0'
  } else {
    return props.config.props.headerBgc
  }
})


const validate = () => {
  return []
}

defineExpose({
  validate
})


</script>
