<template>
    <el-avatar class="head-avater" @click="showImg = true" :size="size" :src="src" @error="errorHandler" :fit="fit" :shape="shape">
        <div v-if="name" :style="{ width: size + 'px', height: size + 'px', fontSize: size / 2 + 'px' }" class="text-head d-flex a-c j-c f-14">
            {{ name.slice(0, 1) }}
        </div>
        <img v-else :src="defSrc || avaterDef" />
    </el-avatar>
    <ImgViewer v-if="isView && src" v-model:show="showImg" :imgs="[src]"></ImgViewer>
</template>

<script setup lang="ts" name="HAvatar">
import { propTypes } from '@/utils/propTypes';
import avaterDef from '@/assets/images/avater.jpg'
const errorHandler = () => true
defineProps({
    src: propTypes.string.def(''),
    name: propTypes.string.def(''),
    size: propTypes.number.def(40),
    defSrc: propTypes.string.def(''),
    fit: propTypes.any.def('cover'),
    shape: propTypes.any.def('circle'), // square
    isView: propTypes.bool.def(false)
});
const showImg = ref(false)
</script>

<style scoped lang="scss">
.text-head {
    background-color: var(--el-color-primary);
}
</style>
<style lang="scss">
.head-avater {
    &.el-avatar {
        background-color: transparent;
    }
}
</style>
