<template>
<div class="nus_colview">
    <div
        class="nu_colview-wrap"
        :class="[myGap]"
        :col="col"
        :is="comName">
        <template v-if="list && list.length">
            <li
                class="nu_list-item"
                v-for="(item, index) in list"
                :key="index"
                :style="itemStyle"
                @click="_click($event,item, index)"
                @tap="_tap($event,item, index)">
                <slot
                    :itemData="_filterItem(item, index, col)"
                    :index="index"
                    :data="item"
                    :col="col">
                </slot>
            </li>
        </template>
        <slot v-else></slot>
    </div>
</div>
</template>

<script>
import { callFn } from 'nimble-lib';
import LayoutTmp from '../_comm/LayoutTmp';
import NuCol1 from './col1/Col1';
import NuCol2 from './col2/Col2';
import NuCol3 from './col3/Col3';
import NuCol4 from './col4/Col4';
import NuCols from './cols/Cols';
export default {
    name: 'NuColview',
    extends: LayoutTmp,
    props: {
        col: { // 列数
            type: [Number, String],
            default: 1
        },
        /**
         * 数据列表
         */
        list: {
            type: Array
        },
        /**
         * 过滤item项数据
         */
        filterItem: {
            type: Function
        },
        /**
         * 间隙
         */
        gap: {
            type: [Number, String]
        }
    },
    components: {
        NuCol1,
        NuCol2,
        NuCol3,
        NuCol4,
        NuCols
    },
    computed: {
        /**
         * 获取每个item的样式
         * @returns {Object|Undefined} 返回item项样式
         */
        itemStyle () {
            const _that = this;
            let _res;
            if (!_that.col || _that.col > 4) {
                const _col = (_that.col * 1) || 1;
                _res = {
                    width: `${100 / _col}%`
                };
            }
            return _res;
        },
        /**
         * 间隙
         * @returns {String}
         */
        myGap() {
            let _that = this;
            let gap = _that.gap || '';
            switch (gap + '') {
                case '':
                case '0':
                case '5':
                case '10':
                case '15':
                case '20':
                    break;
                default:
                    console.warn('gap只支持20、15、10、5、0、空');
                    return '';
            }
            return gap && 'nu_gap' + gap;
        },
        /**
         * 组件名
         * @returns {String}
         */
        comName() {
            let _that = this;
            let col = 'cols';
            switch (_that.col + '') {
                case '1':
                    col = 'nu-col1';
                    break;
                case '2':
                    col = 'nu-col2';
                    break;
                case '3':
                    col = 'nu-col3';
                    break;
                case '4':
                    col = 'nu-col4';
                    break;
                default:
                    col = 'nu-cols';
                    break;
            }
            return col;
        }
    },
    methods: {
        _click(evt, item, index) {
            this._onClick(evt);
            this._onClickItem({
                Event: evt,
                data: item,
                index: index
            });
        },
        _tap(evt, item, index) {
            this._onTap(evt);
            this._onClickItem({
                Event: evt,
                data: item,
                index: index
            });
        },
        _onClickItem(item) {
            this.$emit('clickItem', item);
        },
        /**
         * 过滤item项数据
         * @param {Object} item item项数据
         * @param {Number} index 索引
         * @param {Number} col 列数
         * @return {Object}
         */
        _filterItem(item, index, col) {
            return callFn(this.filterItem || item, [item, index, col]);
        }
    }
};
</script>

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

.nus_colview{
    text-align: left;
    .nu_colview-wrap{
        overflow: hidden;
    }
    .nu_gap5 {
        .nu_col-list {
            margin-top: -$nucol-gap;
            margin-left: -$nucol-gap;
        }
        .nu_list-item{
            padding: $nucol-gap 0 0 $nucol-gap;
        }
    }
    .nu_gap10 {
        .nu_col-list {
            margin-top: -$nucol-gap * 2;
            margin-left: -$nucol-gap * 2;
        }
        .nu_list-item{
            padding: $nucol-gap * 2 0 0 $nucol-gap * 2;
        }
    }
    .nu_gap15 {
        .nu_col-list {
            margin-top: -$nucol-gap * 3;
            margin-left: -$nucol-gap * 3;
        }
        .nu_list-item{
            padding: $nucol-gap * 3 0 0 $nucol-gap * 3;
        }
    }
    .nu_gap20 {
        .nu_col-list {
            margin-top: -$nucol-gap * 4;
            margin-left: -$nucol-gap * 4;
        }
        .nu_list-item{
            padding: $nucol-gap * 4 0 0 $nucol-gap * 4;
        }
    }
    // .nu_col-list {
        // display: flex;
        // flex-wrap: wrap;
    // }
    .nu_list-item{
        display: inline-block;
        vertical-align: top;
    }
}
</style>
