<template>
  <el-button size="mini" icon="Plus" type="primary" @click="selectUser" round>选择抄送人</el-button>
  <div class="option">
    <el-checkbox label="允许发起人添加抄送人" v-model="shouldAdd"></el-checkbox>
  </div>
  <!--    <org-items v-model="select"/>-->
      <avatar-ellipsis :row="3" :user-info="assignedUser"/>
    <user-picker title="请选择抄送人" multiple ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
</template>

<script setup>
import {computed, defineProps} from 'vue'
import UserPicker from "../common/UserPicker.vue";
import AvatarEllipsis from "../common/AvatarEllipsis.vue";
const userPicker=ref()
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const shouldAdd = computed({
  get() {
    return props.config.shouldAdd || false
  },
  set(val) {
    props.config.shouldAdd = val
  }
})
const assignedUser = computed({
  get() {
    return props.config.assignedUser || []
  },
  set(val) {
    props.config.assignedUser = val
  }
})
const selectUser = () => {
  userPicker.value.showUserPicker()
}
const selectedUser = (select) => {
  let userInfoList = []
  for (let val of select) {
    let userInfo = {
      id: val.id,
      name: val.name,
      avatar: val.avatar,
    }
    userInfoList.push(userInfo)
  }
  assignedUser.value = userInfoList
}

</script>

<style lang="scss" scoped>
.option {
  color: #606266;
  margin-top: 20px;
  font-size: small;
}

.desc {
  font-size: small;
  color: #8c8c8c;
}

.org-item {
  margin: 5px;
}
</style>
