<template>
<div class="nus_goodslist"
    v-if="list && list.length > 0">
    <nu-colview
        :col="col"
        :gap="gap"
        :list="list"
        :filterItem="filterItem"
        @clickItme="_onClickItem">
            <template
                slot-scope="{itemData, data, index}">
                <slot :itemData="itemData" :data="data" :index="index">
                    <nu-goodsitem
                        v-bind="itemData"
                        :type="type"
                        :col="col"
                        :tagFilter="tagFilter"
                        :isLazy="isLazy"
                        :lazyOptions="lazyOptions"
                        :class="_myClassName(itemData, data, index)"
                        @click="_click($event,data, index)"
                        @tap="_tap($event,data, index)"
                        @imgLoading="_onImgLoading"
                        @clickBtn="_clickBtn($event,data, index)"
                        @clickTag="_clickTag($event,data, index)">
                        <template slot="hook_content">
                            <slot name="hook_content"
                                :itemData="itemData"
                                :data="data">
                            </slot>
                        </template>
                        <template>
                            <slot name="hook_info"
                                :itemData="itemData"
                                :data="data">
                            </slot>
                        </template>
                        <template slot="hook_rightFt">
                            <slot name='hook_rightFt'
                                :itemData="itemData"
                                :data="data">
                            </slot>
                        </template>
                        <template slot="hook_img">
                            <slot name='hook_img'
                                :itemData="itemData"
                                :data="data">
                            </slot>
                        </template>
                    </nu-goodsitem>
                </slot>
            </template>
    </nu-colview>
</div>
</template>

<script>
import { callFn } from 'nimble-lib';
import GoodsTmp from '../_comm/GoodsTmp';
import NuColview from '../../../layout/colview';
import NuGoodsitem from '../goodsitem';
export default {
    name: 'NuGoodslist',
    extends: GoodsTmp,
    components: {
        NuColview,
        NuGoodsitem
    },
    props: {
        /**
         * class名称
         */
        className: {
            type: [String, Boolean, Function]
        },
        col: { // 列数
            type: [Number, String]
        },
        /**
         * 间隙
         */
        gap: {
            type: [Number, String],
            default: '5'
        },
        list: {
            type: Array
        },
        // 支持的类型（base:基础;baseLevel:基础(水平);'tag':有tag;'tagLevel':有tag(水平);'nobtn':无按钮;'nobtnLevel':无按钮(水平);'full':完整;'fullLevel':完整(水平)）
        type: {
            type: String
        },
        filterItem: { // 过滤item项数据
            type: Function
        },
        tagFilter: { // 格式化tag列表
            type: Function
        },
        /**
         * 是否需要lazy
         */
        isLazy: {
            type: Boolean,
            default: true
        },
        /**
         * lazy选项
         */
        lazyOptions: {
            default: null
        }
    },
    methods: {
        /**
         * class名称过滤
         * @param {Object} itemData goodsitem的参数
         * @param {Object} data 商品项的数据
         * @param {Number} index 索引
         * @returns {String|Object|Array}
         */
        _myClassName(itemData, data, index) {
            let res = callFn(this.className, [{
                itemData,
                data,
                index
            }]);
            if (!(res instanceof Object) && typeof res !== 'string') {
                res = '';
            }
            return res;
        },
        _click(evt, data, index) {
            this._onClick(evt);
            this._onClickItem({
                Event: evt,
                data: data,
                index: index
            });
        },
        _tap(evt, data, index) {
            this._onTap(evt);
            this._onClickItem({
                Event: evt,
                data: data,
                index: index
            });
        },
        _onClickItem(item) {
            this.$emit('clickItem', item);
        },
        /**
         * 点击按钮事件
         * @param {Object} evt 事件数据
         * @param {Object} data 商品数据
         * @param {Number} index 索引
         */
        _clickBtn(evt, data, index) {
            evt = evt || {};
            evt.data = data;
            evt.btnData = evt.itemData;
            evt.index = index;
            delete evt.itemData;
            this._onClickBtn(evt);
        },
        /**
         * 点击标签事件
         * @param {Object} evt 事件数据
         * @param {Object} data 商品数据
         * @param {Number} index 索引
         */
        _clickTag(evt, data, index) {
            evt = evt || {};
            evt.data = data;
            evt.tagData = evt.itemData;
            evt.index = index;
            delete evt.itemData;
            this._onClickTag(evt);
        }
    }
};
</script>

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

.nus_goodslist{

}
</style>
