<!-- Created by henian.xu on 2020/4/15. -->

<template>
    <div class="cms-list">
        <CmsItem
            v-for="item in data"
            :key="item.id"
            :data="item"
            :type="type"
        ></CmsItem>
    </div>
</template>

<script>
import CmsItem from './_CmsItem';

export default {
    name: 'CmsList',
    components: { CmsItem },
    data() {
        return {};
    },
    props: {
        type: {
            type: [Number, String],
            default: '1',
        },
        orderBy: {
            type: String,
            default: 'onSaleTime,asc',
        },
        catId: {
            type: [Number, String],
            default: '',
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    computed: {
        changeListener() {
            const { orderBy, catId } = this;
            return `${orderBy}:${catId}`;
        },
    },
    watch: {
        changeListener: {
            async handler(val) {
                const orderByArr = val.split(',');
                if (!orderByArr || !orderByArr.length) return;
                const [orderByKey, orderByType] = orderByArr;
                const { data } = await this.$api.Pt.CmsArticle.data(
                    {
                        orderByKey,
                        orderByType,
                        cmsCatalogId: this.catId,
                        pageSize: 6,
                    },
                    { isAxiosResponseData: true },
                );
                this.data.splice(0, this.data.length);
                this.data.push(...data);
            },
            immediate: true,
        },
    },
};
</script>

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