<template>
    <view
        class="b-image"
        :style="{
            'width': width,
            'height': height,
            'border-radius': isRound ? '100%' : radius,
            'display': display,
        }"
    >
        <!-- 由于h5 image加lazy-load会出现部分图片无法加载的情况，故双端分开处理，mars修复后放开 -->
        <template-mars target="swan">
            <view
                v-show="url"
                class="image-def"
                :style="{
                    'background-image': 'url(' + url + ')',
                    'background-size': 'cover',
                }"
            />
            <image
                :src="imgSrc"
                :mode="mode"
                lazy-load
                webp
                class="image-self"
                :style="{
                    'width': width,
                    'height': height,
                    'border-radius': isRound ? '100%' : radius,
                    'border': hasBorder ? '1px solid rgba(0, 0, 0, .05)' : '0 none',
                }"
                @load="onImageLoad"
            />
        </template-mars>
        <template-mars target="h5">
            <image
                :src="imgSrc"
                :mode="mode"
                class="image-self"
                :style="{
                    'width': width,
                    'height': height,
                    'border-radius': isRound ? '100%' : radius,
                    'border': hasBorder ? '1px solid rgba(0, 0, 0, .05)' : '0 none'
                }"
                @load="onImageLoad"
            />
        </template-mars>
        <view
            v-if="hackWhiteStroke && !hasBorder"
            class="image-hack-white-stroke"
            :style="{'border-radius': isRound ? '100%' : radius, 'background': hackBg}"
        />
    </view>
</template>

<script>
/* eslint-disable vue/no-reserved-keys */
import {compressImgByBucket, imgCompress} from '@utils/core';

/**
 * @file 图片带灰色遮罩
 * @author wangying51@baidu.com
 */

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 占位图
         */
        defSrc: {
            type: String,
            default: ''
        },
        /**
         * 图片链接
         */
        src: {
            type: String,
            default: ''
        },
        /**
         * 宽度
         */
        width: {
            type: String,
            default: '.48rem'
        },
        /**
         * 高度
         */
        height: {
            type: String,
            default: '.48rem'
        },
        /**
         * 圆角是否为100%
         */
        isRound: {
            type: Boolean,
            default: true
        },
        /**
         * 圆角
         */
        radius: {
            type: String,
            default: '0'
        },
        /**
         * 兜底背景色
         */
        hackWhiteStroke: {
            type: Boolean,
            default: true
        },
        /**
         * 是否有背景
         */
        hackBg: {
            type: String,
            default: ''
        },
        /**
         * 是否有边框
         */
        hasBorder: {
            type: Boolean,
            default: false
        },
        /**
         * 同image mode
         */
        mode: {
            type: String,
            default: 'aspectFill'
        },
        /**
         * 开始图片压缩
         */
        compress: {
            type: Boolean,
            default: true
        },
        /**
         * 新版压缩方式，后续商城接入后删除
         */
        hasCompress: {
            type: Boolean,
            default: false
        },
        /**
         * 压缩参数
         */
        extra: {
            type: Object,
            default: function () {
                return {};
            }
        },
        /**
         * 样式
         */
        display: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 默认图
            url: '',
            // 图片地址
            imgSrc: ''
        };
    },
    watch: {
        src(n, o) {
            if (n === o || !n) {
                return;
            }
            // 处理图片参数
            this.handleImgCompress(n);
        }
    },
    created() {
        this.url = this.defSrc;
        if (this.src) {
            this.handleImgCompress(this.src);
        }
    },
    // 组件filter 存在性能问题, 会频繁调用
    // filters: {
    //     compressFilter: (imgSrc, compress, hasCompress, extra) => {
    //         if (!imgSrc) {
    //             return '';
    //         }
    //         if (!compress || !hasCompress) {
    //             return imgSrc;
    //         }
    //         return hasCompress ? imgCompress(imgSrc, extra) : compressImgByBucket(imgSrc);
    //     }
    // },
    methods: {
        onImageLoad(info) {
            this.url = '';
            this.$emit('load', info);
        },
        handleImgCompress(src) {
            if (!src) {
                this.imgSrc = '';
                return;
            }
            if (!this.compress || !this.hasCompress) {
                this.imgSrc = src;
                return;
            }
            this.imgSrc = this.hasCompress ? imgCompress(src, this.extra) : compressImgByBucket(src);
        }
    }
};
</script>
<style lang="less" scoped>
.b-image {
    position: relative;
    overflow: hidden;

    .image-def {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }

    .image-self {
        box-sizing: border-box;
        // 图片压住占位，防止图片加载较快时抖动
        position: relative;
        background: transparent;
        display: block;
    }

    .image-hack-white-stroke {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.08) 100%);
    }
}
</style>


