<template>
    <div class="c-img" @click="handleClick">
        <img :mode="mode" :lazy-load="true" :src="url" alt="">
    </div>
</template>

<script>
    export default {
        name: 'MyImage',

        props: {
            // 图片裁剪、缩放的模式（aspectFit：显示长边，aspectFill：显示短边，widthFix：高度自动）
            mode: {
                type: String,
                default: 'aspectFill',
            },

            // 图片地址
            src: {
                type: String,
                default: '',
            },
        },

        // 数据
        data() {
            return {
                url: '',
            }
        },

        // 初始化
        created() {
            this.urlHandle()
        },

        // 函数
        methods: {
            handleClick() {
                const self = this

                self.$emit('click')
            },

            // url处理
            urlHandle() {
                const self = this
                let src = self.src
                let imageResourceUrl = self.config.imageResourceUrl

                // #ifdef APP
                if (src) {
                    src = src.replace(/^\//, '')
                }

                imageResourceUrl = imageResourceUrl.replace(/^\//, '')
                // #endif

                if (!src || src === 'true') {
                    self.url = imageResourceUrl + '/resource/common/default.gif'
                } else if (src.indexOf('resource') > -1) {
                    self.url = imageResourceUrl + src
                } else if (src.indexOf('http') > -1 || src.indexOf('static') > -1) {
                    self.url = src
                } else {
                    self.url = self.config.imageUrl + src
                }
            },
        },

        // 数据计算
        computed: {},

        // 数据监听
        watch: {
            src() {
                this.urlHandle()
            },
        },
    }
</script>

<style lang="scss" scoped>
    .c-img img {
        object-fit: cover;
    }
</style>