<!-- 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: 'GoodsList',
    components: { GoodsItem },
    data() {
        return {};
    },
    props: {
        type: {
            type: [Number, String],
            default: '1',
        },
        gapType: {
            type: [Number, String],
            default: '1',
        },
        gapMargin: {
            type: [Number, String],
            default: '',
        },
        orderBy: {
            type: String,
            default: 'onSaleTime,asc',
        },
        shopTagId: {
            type: String,
            default: '',
        },
        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];
        },
        queryChange() {
            const { orderBy, shopTagId } = this;
            return `${orderBy}:${shopTagId}`;
        },
    },
    watch: {
        queryChange: {
            async handler(val) {
                if (!val) return;
                const { orderBy, shopTagId } = this;
                const orderByArr = orderBy.split(',');
                if (!orderByArr || !orderByArr.length) return;
                const { data } = await this.$api.Gd.Goods.selectByPage(
                    {
                        orderByKey: orderByArr[0],
                        orderByType: orderByArr[1],
                        shopTagId,
                        ...(this.apiQuery || {}),
                        goodsStatus: 3,
                        pageSize: 6,
                    },
                    {
                        isAxiosResponseData: true,
                    },
                );
                this.data.splice(0, this.data.length);
                this.data.push(...data);
            },
            immediate: true,
        },
    },
};
</script>

<style lang="scss">
</style>
