<!-- Created by henian.xu on 2018/9/7. -->

<template>
    <div :class="classes">
        <GoodsItem
            v-for="(item,index) in data"
            :key="item.id"
            :style="index&&goodsItemStyles"
            :data="item"
            :no-border="hasMargin"
            :double-row="isDoubleRow"
            :shadow-prop="shadowProp"
        />
    </div>
</template>

<script>
import GoodsItem from './_goodsItem';

export default {
    name: 'Goods',
    components: { GoodsItem },
    data() {
        return {};
    },
    props: {
        type: {
            type: [Number, String],
            default: '1',
        },
        gapType: {
            type: [Number, String],
            default: '1',
        },
        gapMargin: {
            type: [Number, String],
            default: '',
        },
        ids: {
            type: Array,
            default() {
                return [];
            },
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
        apiQuery: {
            type: Object,
            default: () => ({}),
        },
        columns: {
            type: [Number, String],
            default: 1,
        },
        shadowProp: {
            type: [Number, String],
            default: null,
        },
    },
    computed: {
        isRow() {
            return +this.type === 4;
        },
        isDoubleRow() {
            const type = +this.type;
            return [1, 3, 4].includes(type);
        },
        hasMargin() {
            const { isDoubleRow, gapType } = this;
            return !isDoubleRow && `${gapType}` === '2';
        },
        itemMarginTop() {
            const { isDoubleRow, gapType } = this;
            if (isDoubleRow || `${gapType}` !== '2') return '';
            const gapMargin = `${this.gapMargin || ''}`.trim();
            if (!gapMargin) return '';
            let int = parseFloat(gapMargin);
            if (Number.isNaN(int)) return '';
            let unit = gapMargin.replace(/(\d)*/g, '').trim();
            if (!unit) {
                unit = 'px';
                int /= 2;
            }
            return int + unit;
        },
        goodsItemStyles() {
            const { itemMarginTop } = this;
            if (!itemMarginTop) return '';
            return {
                marginTop: itemMarginTop,
            };
        },
        classes() {
            const { columns, isRow } = this;
            let columnStr = '';
            if (+columns > 1 || isRow) {
                columnStr = `columns columns-${columns}`;
            }
            return ['goods-list', { row: isRow }, columnStr];
        },
    },
    watch: {
        ids: {
            async handler(val) {
                if (!val || !val.length) return;
                const { data } = await this.$api.Gd.Goods.selectByPage(
                    {
                        ...(this.apiQuery || {}),
                        ids: val.join(','),
                    },
                    { isAxiosResponseData: true },
                );
                this.data.splice(0, this.data.length);
                this.data.push(...data);
            },
            immediate: true,
        },
    },
};
</script>

<style lang="scss">
.goods-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;

    &.columns {
        @for $val from 1 through 5 {
            &-#{$val + ''} {
                > .goods-item {
                    flex: 0 0 (100% / $val);
                }

                &.row {
                    > .goods-item {
                        padding: $padding/2;
                        flex: 0 0 ((100% / ($val * 2 + 0.5)) * 2);
                        min-width: initial;
                    }
                }
            }
        }
    }

    &.row {
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        @include beautify-scrollbar();
    }
}
</style>
