<template>
    <div class="nus_goodsitemlevel"
        @click="_onClick"
        @tap="_onTap">
        <div class="nu_goodsitemlevel-wrap">
            <div class="nu_goodsItemLevel-left">
                <nu-goodsitempic
                    :triTag="''"
                    :aspect="aspect"
                    :imgUrl="imgUrl"
                    :bannerImg="bannerImg"
                    :cornerMark="cornerMark"
                    :isLazy="isLazy"
                    :lazyOptions="myLazyOptions"
                    @imgLoading="_onImgLoading">
                    <slot name='hook_img'></slot>
                </nu-goodsitempic>
            </div>
            <div class="nu_goodsItemLevel-right">
                <slot name="hook_content">
                    <nu-goodsiteminfo
                        class="nu_goods-info"
                        :nameText="nameText"
                        :subNameText="subNameText"
                        :nameRow="nameRow"
                        :isPrice="isPrice"
                        :price="price"
                        :oldPrice="oldPrice"
                        :decimal="decimal">
                        <slot></slot>
                        <template slot="hook_rightFt">
                            <slot name='hook_rightFt'></slot>
                        </template>
                    </nu-goodsiteminfo>
                </slot>
                <nu-tritag
                    v-if="triTag"
                    :nameText="triTag">
                </nu-tritag>
            </div>
            <nu-goodsitemmaskbg
                class="nu_mask-bg-level"
                v-if="status + '' === '2'"
                :tipMessage="tipMessage">
            </nu-goodsitemmaskbg>
        </div>
    </div>
</template>

<script>
import GoodsItemTmp from '../_comm/GoodsItemTmp';
import NuGoodsitempic from '../goodsitempic';
import NuGoodsiteminfo from '../goodsiteminfo';
import NuTritag from '../../../../widget/tritag';
import NuGoodsitemmaskbg from '../goodsitemmaskbg/Goodsitemmaskbg';

export default {
    extends: GoodsItemTmp,
    name: 'NuGoodsitembaselevel',
    components: {
        NuGoodsitempic,
        NuGoodsiteminfo,
        NuTritag,
        NuGoodsitemmaskbg
    },
    computed: {
        myLazyOptions() {
            return Object.assign({width: '110px'}, this.lazyOptions || {});
        }
    }
};
</script>

<style lang='scss'>
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';

.nus_goodsitemlevel {
    position: relative;
    display: inline-block;
    width: 100%;
    .nu_goodsitemlevel-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .nu_goodsItemLevel-left {
        position: relative;
        flex: 0 0 110px;
        width: 110px;
        height: 100%;
        margin-right: 10px;
    }
    .nu_goodsItemLevel-right {
        height: 100%;
        flex: 1;
        padding: 10px 12px 10px 0;
    }
    .nu_mask-bg-level{
        .nu_maskbg-tip {
            left: 15%;
            top: 50%;
        }
    }
}
</style>
