<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:56:31
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-22 15:11:08
 * @FilePath: \housekeeping-admin\src\views\decorate\component\decoration-img.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-image :style="styles" v-bind="props" :src="getImageUrl(src)" fit="cover">
        <template #placeholder>
            <div class="image-slot"></div>
        </template>
        <template #error>
            <div class="image-slot">
                <icon name="el-icon-Picture" :size="30" />
            </div>
        </template>
    </el-image>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { CSSProperties } from 'vue'
import { addUnit } from '@/utils/util'
import { imageProps } from 'element-plus'
import useAppStore from '@/stores/modules/app'
const props = defineProps({
    width: {
        type: [String, Number],
        default: 'auto'
    },
    height: {
        type: [String, Number],
        default: 'auto'
    },
    radius: {
        type: [String, Number],
        default: 0
    },
    ...imageProps
})

const { getImageUrl } = useAppStore()
const styles = computed<CSSProperties>(() => {
    return {
        width: addUnit(props.width),
        height: addUnit(props.height),
        borderRadius: addUnit(props.radius)
    }
})
</script>

<style lang="scss" scoped>
.el-image {
    display: block;
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #fafafa;
        color: #909399;
    }
}
</style>
