<template>
    <view
        v-if="listData && listData.length > 0"
        class="list-layout"
        :class="extendClass"
    >
        <!-- 横向滚动 -->
        <scroll-view
            v-if="scrollX"
            :scroll-x="scrollX"
            class="list-layout"
        >
            <view class="list-layout__inner-scroll" :class="{'c-gap-inner-left-large': isShowScrollGap}">
                <view
                    v-for="(item, index) in listData"
                    :key="index"
                    class="list-layout__inner__item-scroll"
                    :class="{
                        'c-gap-inner-right-middle': isShowScrollGap && index !== listData.length - 1,
                        'c-gap-inner-right-large': isShowScrollGap && index === listData.length - 1,
                    }"
                >
                    <slot :item="item" :index="index"></slot>
                </view>
            </view>
        </scroll-view>
        <!-- 非滚动 -->
        <view
            v-else
            class="list-layout__inner c-flex-row"
            :style="{justifyContent: useFlex ? 'space-between' : 'normal'}"
        >
            <view
                v-for="(item, index) in listData"
                :key="index"
                class="list-layout__inner__item"
                :class="{
                    ['c-span' + (item.col || __itemSpanClass)]: !useFlex
                }"
                :style="{marginBottom: marginBottom / 100 + 'rem'}"
            >
                <slot :item="item" :index="index"></slot>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 列表布局组件
 * @author jiaxiangju
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {},
    data() {
        return {};
    },
    props: {
        /**
         * 是否横向滚动
         */
        scrollX: {
            type: Boolean,
            default: false
        },
        /**
         * 当禁用scroll时，是否启用flex布局
         */
        useFlex: {
            type: Boolean,
            default: false
        },
        /**
         * 布局列数，scrollX为false时生效，支持1,2,3,4,6列
         */
        layoutNum: {
            type: Number,
            default: 1
        },
        /**
         * scrollX为false时生效；超过一行时上下间距，默认 .08rem，传入单位为px；最后一行元素不会有间距
         */
        marginBottom: {
            type: Number,
            default: 8
        },
        /**
         * scrollX为true时生效；是否显示左右间距，默认不显示，true时显示列表左右.15rem，元素之间.08rem
         */
        isShowScrollGap: {
            type: Boolean,
            default: false
        },
        /**
         * 扩展类名
         */
        extendClass: {
            type: String,
            default: ''
        },
        /**
         * 列表数据
         */
        listData: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    computed: {
        __itemSpanClass() {
            const spanMap = {
                1: '12',
                2: '6',
                3: '4',
                4: '3',
                6: '2'
            };
            return spanMap[this.layoutNum];
        }
    }
};
</script>
<style lang="less" scoped>
.list-layout {
    max-width: 100vw;

    &__inner-scroll {
        display: flex;
    }

    &__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: normal;

        &__item {
            overflow: hidden;
            flex: initial;

            &.c-span12:last-child,
            &.c-span6:nth-child(2n + 1):nth-last-child(-n + 2),
            &.c-span6:nth-child(2n + 1):nth-last-child(-n + 2) ~ &&.c-span6,
            &.c-span4:nth-child(3n + 1):nth-last-child(-n + 3),
            &.c-span4:nth-child(3n + 1):nth-last-child(-n + 3) ~ &.c-span4,
            &.c-span3:nth-child(4n + 1):nth-last-child(-n + 4),
            &.c-span3:nth-child(4n + 1):nth-last-child(-n + 4) ~ &.c-span3,
            &.c-span2:nth-child(6n + 1):nth-last-child(-n + 6),
            &.c-span2:nth-child(6n + 1):nth-last-child(-n + 6) ~ &.c-span2 {
                margin-bottom: 0 !important;
            }

            &-scroll {
                flex-shrink: 0;
            }
        }
    }
}
</style>
