<template>
    <div 
        :class="wrapClasses" 
        :style="{ width: size }"
        @click="handleClick"
        @mouseenter="handleMouseEnter">
        <div :class="innerClasses">
            <span 
                :class="avatarClasses" 
                :style="styles">
                <img 
                    v-if="!isDisplayName && path" 
                    :src="path" 
                    @error="handleOnError">
                <i 
                    v-else 
                    :style="{ fontSize: fontSize }">
                    <!-- @slot 自行传入内容作为头像 -->
                    <slot name="icon">
                        {{formatName}}
                    </slot>
                </i>
            </span>
        </div>
    </div>
</template>
<script>

    import { getColor } from '../../../utils/utils'
    
    const prefixCls = 'yy-avatar'
    /**
     * @displayName Avatar
     */
    export default {
        name: 'YYAvatar',
        props: {
            /**
             * 尺寸
             */
            size: {
                type: String,
                default: '64px'
            },
            /**
             * 字体大小
             */
            fontSize: {
                type: String,
                default: '14px'
            },
            /**
             * 头像图片地址
             */
            path: {
                type: String
            },
            /**
             * 名称
             */
            name: {
                type: String,
                required: true
            }, 
            memberId: {
                type: [String, Number],
            },
            defaultPath: {
                type: String
            },
            displayIcon: { 
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                loadError: false
            }
        },
        computed: {
            wrapClasses() {
                return `${prefixCls}-wrapper`
            },
            avatarClasses() {
                return [
                    `${prefixCls}`, 
                    `${prefixCls}-${!this.isDisplayName && this.path ? 'path' : 'name'}`
                ]
            },
            innerClasses() {
                return `${prefixCls}-inner`
            },
            styles() {
                return { 
                    backgroundColor: !this.isDisplayName && this.path ? 'transparent': getColor(this.name) 
                }
            },
            isDisplayName() { // 当path中含有default字段的时候不使用默认图片
                let isDisplayName = false
                if(this.displayIcon || this.loadError 
                    || (this.path && this.path.indexOf('default_avatar') > 0)) { 
                    isDisplayName = true
                }
                return isDisplayName
            },
            formatName: function() {
                return /[\u4e00-\u9fa5]/.test(this.name) ? this.name.substr(-2) : this.name.substr(0, 2)
            }
        },
        methods: {
            handleOnError() {
                this.loadError = true
            }, 
            handleClick() {
                /**
                 * 点击头像时触发
                 * 
                 * @arg 一个带有name和memberId属性的对象
                 */
                this.$emit('click', {
                    name: this.name,
                    memberId: this.memberId
                })
            },

            handleMouseEnter() {
                /**
                 * 鼠标移入头像时触发
                 * 
                 * @arg 一个带有name和memberId属性的对象
                 */
                this.$emit('mouseenter', {
                    name: this.name,
                    memberId: this.memberId
                })
            }
        }
    }
</script>
