<template>
  <div>
    <el-button size="mini" icon="el-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"/>
  </div>
</template>

<script>
import UserPicker from "@/components/common/UserPicker";

export default {
  name: "CcNodeConfig.vue",
  components: {UserPicker},
  props:{
    config:{
      type: Object,
      default: ()=>{
        return {}
      }
    }
  },
  computed:{
    shouldAdd:{
      get(){
        return this.config.shouldAdd || false
      },
      set(val){
        console.log("asdjhajdhasjdhasdhasjdad")
        this.config.shouldAdd = val
      }
    },
    assignedUser: {
      get(){
        return this.config.assignedUser || []
      },
      set(val){
        this.config.assignedUser = val
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    selectUser() {
      this.$refs.userPicker.showUserPicker()
    },
    selectedUser(select) {
      let userInfoList = []
      for (let val of select) {
        let userInfo = {
          id: val.id,
          name: val.name,
          avatar: val.avatar,
        }
        userInfoList.push(userInfo)
      }
      this.assignedUser = userInfoList
    },
  }
}
</script>

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

.desc{
  font-size: small;
  color: #8c8c8c;
}
.org-item{
  margin: 5px;
}
</style>
