<template>
    <div>
        <div class="avatar" :style="avatarStyle" @click="handleClick">
            <img v-if="isimg" :src="avatarurl" class="avatar__icon" />
            <span v-else class="avatar__icon" v-text="getAvatarName"></span>
        </div>
        <img v-if="ishanging" :src="hangingurl" :style="hangingStyle" :class="['hanging__icon', hangingpos]" />
    </div>

</template>

<script>
export default {
    name: 'mu-avatar',
    props: {
        size: {
            type: [String, Number],
            default: 16
        },
        avatarurl: {
            type: String,
            default: "",
        },
        maxLength:{
          type:Number,
          default:-1,
        },
        isimg: {
            type: Boolean,
            default: false,
        },
        avatarcolor: {
            type: String,
            default: "#03a9f4",
        },
        avatarname: {
            type: String,
            default: "",
        },
        hangingurl: {
            type: String,
            default: "",
        },
        ishanging: {
            type: Boolean,
            default: false,
        },
        hangingpos: {
            type: String,
            default: "bottom-right",
        }
    },
    data: function() {
        return {
            avaName: "",
        }
    },
    computed: {
        getAvatarName() {
            var avatarname = this.avatarname;
            if (this.maxLength > -1) {
               return this.formatAvatarName(avatarname, this.maxLength);
            }
            if(this.size == 112 || this.size == 80) {
                return this.formatAvatarName(avatarname, 6);
            }else if(this.size == 50) {
                 return this.formatAvatarName(avatarname, 4);
            }else if(this.size == 32) {
                 return this.formatAvatarName(avatarname, 2);
            }else if(this.size == 40){
                return this.formatAvatarName(avatarname, 4);
            }
        },
        avatarStyle () {
            let avatarSize = this.size + "px";
            let avaColor = (this.avatarcolor)?(this.avatarcolor):"#03a9f4";
            let avatarStyle = {
                "width": avatarSize,
                "height": avatarSize,
                "line-height": avatarSize,
                "border-radius": avatarSize,
                "background-color": this.avatarcolor,
            };
            return avatarStyle;
        },
        hangingStyle() {
            const avatarSize = this.size + "px";
            let hangingWidth;
            if (avatarSize == 40) {
                hangingWidth = 24;
            } else if (avatarSize == 80) {
                hangingWidth = 32;
            }else if (avatarSize == 100) {
                hangingWidth = 44;
            }

            let hangingStyle = {
                "width": hangingWidth + "px",
                "height": hangingWidth + "px",
            };
            return hangingStyle;
        },
    },
    mounted: function(){
    },
    methods: {
        handleClick (e) {
            this.$emit('click', e);
        },
        formatAvatarName(str, n) {
            var reg = /.*[\u4e00-\u9fa5]+.*$/;
            var len = 0;
            var tmpStr = "";
            if(str.replace(/[\u4e00-\u9fa5]/g, "**").length <= n) {
                return str;
            }
            if(reg.test(str)){
                for(var i = str.length-1; i >= 0; i--) {
                    if (/[\u4e00-\u9fa5]/.test(str[i])) {
                        len += 2;
                    }else {
                        len += 1;
                    }
                    if(len > n) {
                        break;
                    }else {
                        tmpStr = str[i] + tmpStr;
                    }
                }
                return tmpStr;
            }else {
                for(var i = 0; i < str.length-1; i++) {
                    if (/[\u4e00-\u9fa5]/.test(str[i])) {
                        len += 2;
                    }else {
                        len += 1;
                    }
                    if(len > n) {
                        break;
                    }else {
                        tmpStr += str[i];
                    }
                 }
                 return tmpStr;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.avatar {
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
.avatar__icon {
  width: 100%;
  height: 100%;
  color: #fff;
}
.hanging__icon{
    border-radius: 0;
    width: 24px;
    height: 24px;
    position: absolute;
}
.bottomright{
    bottom: 0px;
    right: -12px;
}
.bottomleft{
    bottom: 0px;
    left: -12px;
}
.topright{
    top: -12px;
    right: -12px;
}
.topleft{
    top: -12px;
    left: -12px;
}
.bottom{
    width: 100%;
    height: 100%;
    bottom: -12px;
    left: 0px;
}
</style>
