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

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

export default {
    extends: GoodsItemTmp,
    name: 'NuGoodsitembase',
    components: {
        NuGoodsitempic,
        NuGoodsiteminfo,
        NuGoodsitemmaskbg
    },
    computed: {
        myLazyOptions() {
            return Object.assign({width: this.imgWidth}, this.lazyOptions || {});
        },
        /**
         * 计算图片宽度
         * @returns {String}
         */
        imgWidth() {
            return ((100 / (this.col || 1)).toFixed(2)) + '%';
        }
    }
};
</script>


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

.nus_goodsitembase {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    .nu_goods-info {
        margin-top: 10px;
        padding: 0 8px;
        position: relative;
    }
}
</style>
