<template>
  <div class="ry-choose-user">
    <div v-for="(user,index) in usersList" :key="index">
      <rt-user-avatar
        :user-name="user.OwnerId.Name"
        :user-key="index"
        :size="size"
        :background-color="backgroundColor"
        :show-footer="showFooter"
        :del-action="deleteUserChoosed"
        :can-del="canDel"
      ></rt-user-avatar>
    </div>
    <div v-if="canAdd" class="rt-user-choosed-add" @click="handleAddClick">
      <rt-icon name="rt-xrm-choosed-add" :size="size"></rt-icon>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RtChooseUser',
  props: {
    chooseusersList: {
      type: Array,
      default: () => []
    },
    canDel: {
      type: Boolean,
      default: true
    },
    canAdd: {
      type: Boolean,
      default: true
    },
    isFiltered: {
      type: Boolean,
      default: false
    },
    moduleName: {
      type: String,
      required: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    backgroundColor: {
      type: String,
      default: '#B4BDCF'
    },
    size: {
      type: String | Number,
      default: '38'
    }
  },
  data() {
    return {
      usersList: []
    };
  },
  watch: {
    usersList: function(newvalue, oldvalue) {
      this.$bus.$emit('rt-choose-users', newvalue);
    },
    chooseusersList: function(newvalue, oldvalue) {
      this.usersList = newvalue;
    }
  },
  mounted() {
    const vm = this;
    this.$bus.$on(
      `choose-userWithFrequent${this.moduleName}`,
      function(data) {
        if (rt.isNull(data)) return;
        const photoList = this.photoList;
        vm.usersList.push({
          OwnerId: {
            Name: data.name,
            Id: data.id
          }
        });
        vm.usersList = _.uniqWith(vm.usersList, _.isEqual);
      }.bind(this)
    );
  },
  methods: {
    handleAddClick() {
      this.$router.push({
        name: 'userWithFrequent-list',
        params: {
          isfiltered: this.isFiltered,
          modulename: this.moduleName
        }
      });
    },
    deleteUserChoosed(index) {
      this.usersList.splice(index, 1);
    }
  }
};
</script>
<style lang="less" scoped>
.ry-choose-user {
  display: flex;
  flex-wrap: wrap;
  padding: 0 15px 15px 0;

  .rt-user-choosed-add {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin: 15px 0 0 15px;
  }
}
</style>

