<template functional>
  <!--functional组件不能直接使用components属性， https://github.com/vuejs/vue/issues/7492 -->
  <span>
    <component
      :is="$options.components.sdUserinfoCardVue"
      v-for="user in props.users"
      :key="user.code"
      :account="user.code"
      ><span :class="$style.item"
        ><span>{{ user.name }}</span></span
      ></component
    >
  </span>
</template>

<script>
import sdUserinfoCardVue from './sd-user-item/sd-userinfo-card.vue'
import components from './_import-components/sd-user-item-import'
/**
 * 鼠标悬浮到用户名时，支持显示更多详细信息
 * @displayName SdUserItem 人员标签
 * @since 8.0.12
 */
export default {
  name: 'SdUserItem',
  components: { ...components, sdUserinfoCardVue },
  props: {
    /**
     * 显示的用户
     */
    users: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.item {
  > span {
    padding-bottom: 2px;
    cursor: help;
    border-bottom: 1px #bbb dashed;
  }

  &:not(:last-child)::after {
    content: ' , ';
  }
}
</style>

<docs>

```vue
<sd-user-item :users="[{code:'hdadmin',name:'hdadmin'}]"/>
```
</docs>
