<!-- 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: 'Cms',
    components: { CmsItem },
    data() {
        return {};
    },
    props: {
        type: {
            type: [Number, String],
            default: '1',
        },
        ids: {
            type: Array,
            default() {
                return [];
            },
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    watch: {
        ids: {
            async handler(val) {
                const ids = val.join(',');
                if (!val || !val.length || !ids) return;
                const { data } = await this.$api.Pt.CmsArticle.data({ ids }, { 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>
