<template>
    <div class="avatar" :style="{width : width, height : width,}">
        <i v-if="sex==='0'" class="iconfont icon-user-women-full" :style="{fontSize: width,backgroundColor:bgc }"></i>
        <i v-else class="iconfont icon-user-man-full" :style="{fontSize: width,backgroundColor:bgc1}" ></i>
        <img v-if="showImage" :src="avatar" alt="头像" @error="imageLoadError = true" @load="imageLoadError = false">
    </div>
</template>

<script>
    import {getUploadFilePath} from '@/config'

    export default {
        name: "avatar",
        props: {
            path: String,
            width: {
                type: String,
                default: '55px'
            },
            sex: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                bgc:'#fe6d8b',
                bgc1:'#409EFF',
                imageLoadError: false
            }
        },
        watch: {
            avatar(v) {
                this.imageLoadError = false
            }
        },
        computed: {
            getSex() {
                return this.sex
            },
            avatar() {
                return getUploadFilePath(this.path);
            },
            showImage() {
                return this.avatar && !this.imageLoadError
            }
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>

    .avatar {
        position: relative;
        /*margin-right: $main-outside-padding;*/
        border-radius: 50%;
        /*background-color: #409EFF;*/
        overflow: hidden;

        img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        i {
            display: inline-block;
            color: white;
            margin-top: -2px;
        }
    }
</style>
