<template>
  <div ref="ryuseravatar" class="ry-user-avatar">
    <rt-avatar
      style="display: block;margin: 0 auto;"
      :background-color="backgroundColor"
      :size="size"
    >{{getUserName(userName)}}</rt-avatar>
    <p v-if="showFooter" class="ry-avatar-footer-msg">{{userName}}</p>
    <div :style="left" class="ry-user-del" v-if="canDel" @click="delAction(userKey)">
      <rt-icon name="rt-xrm-delete" size="14"></rt-icon>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RtUserAvatar',
  props: {
    userName: {
      type: String,
      required: true
    },
    userKey: {
      type: String | Number,
      required: true
    },
    canDel: {
      type: Boolean,
      default: true
    },
    delAction: {
      type: Function
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    backgroundColor: {
      type: String,
      default: '#B4BDCF'
    },
    size: {
      type: String | Number,
      default: '38'
    }
  },
  data() {
    return {
      left: { left: this.size - 8 + 'px' }
    };
  },
  mounted() {
    setTimeout(() => {
      this.getLeftPosition();
    }, 300);
  },
  methods: {
    getUserName(userName) {
      if (!rt.isNullOrWhiteSpace(userName)) {
        return userName.charAt(0);
      } else {
        return '';
      }
    },
    getLeftPosition() {
      const size = parseInt(this.size);
      this.left = { left: (this.$refs.ryuseravatar.offsetWidth - size) / 2 + size - 10 + 'px' };//计算删除图标偏移位置（因为字长度不一样）
    }
  }
};
</script>
<style lang="less" scoped>
.ry-user-avatar {
  display: block;
  position: relative;
  margin: 15px 0 0 15px;
  .ry-avatar-footer-msg {
    color: #222222;
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
  }
  .ry-user-del {
    position: absolute;
    top: -5px;
  }
}
</style>

