<template>
    <nu-imgc
        class="nus_goodsitempic"
        :imgUrl="imgUrl"
        :isLazy="isLazy"
        :lazyOptions="lazyOptions"
        :aspect="aspect"
        @imgLoading="_onImgLoading">
        <slot></slot>
        <nu-imgc
            class="nu_goods-banner"
            v-if="bannerImg"
            :imgUrl="bannerImg"
            :aspect="aspect"
            :isLazy="isLazy"
            :lazyOptions="myLazyOptions">
        </nu-imgc>
        <corner-mark
            v-if="cornerMark"
            :nameText="cornerMark">
        </corner-mark>
        <nu-tritag
            v-if="triTag"
            :nameText="triTag">
        </nu-tritag>
    </nu-imgc>
</template>

<script>
import { extend } from 'nimble-lib';
import GoodsItemTmp from '../_comm/GoodsItemTmp';
import NuImgc from '../../../../widget/img/imgc';
import CornerMark from '../cornerMark/CornerMark';
import NuTritag from '../../../../widget/tritag';

export default {
    extends: GoodsItemTmp,
    name: 'NuGoodsitempic',
    components: {
        NuImgc,
        CornerMark,
        NuTritag
    },
    computed: {
        myLazyOptions() {
            return extend({}, this.lazyOptions, {onlyCut: true});
        }
    }
};
</script>

<style lang="scss">
.nus_goodspic{
    width: 100%;
    .nu_goods-banner {
        &.nus_imgc{
            pointer-events: none;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }
}
</style>
