<template>
    <div class="conatiner">
        <div class="pageTitle">
            店铺收藏
        </div>

        <div class="list">

            <template v-if="list.length>0">
                <goods-little v-for="(todo,todoIndex) in list" :info='todo.storeInfo' style="padding-left:30px;display:inline-block"></goods-little>
            </template>
            <div v-else class="nothing">
                <img src="../assetsPre/nothingImg.png" alt="">
                <p>还有收藏任何店铺哦~</p>
            </div>
        </div>

        <el-pagination background v-if="totalNumber>8" @current-change="currentPageChange" :current-page="currentPage" :page-size="8" layout="total, prev, pager, next" :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import goodsLittle from '../components/GoodsLittle'
export default {
    name: 'userCollection',
    data() {
        return {
            list: [],
            currentPage: 1,
            pageSize: 8,
            totalNumber: 0
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        this.getData()
    },
    methods: {
        currentPageChange(page) {
            this.currentPage = page;
            this.getData();
        },
        getData() {

            var data = {
                currentPage: this.currentPage,
                pageNumber: this.pageSize,
                userId: this.userInfo.id
            }
            this.$http.get({
                url: '/storeCollection/page',
                data: data
            }).then(res => {
                if (res.success) {
                    this.totalNumber = res.data.page.totalNumber;
                    this.list = res.data.pp;
                }
            })
        },

    },
    components: {
        goodsLittle
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    min-height: 612px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    padding: 0 25px 0 39px;

    .pageTitle {
        font-size: 14px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 19px;
        padding: 21px 0 10px;
        border-bottom: 1px solid rgba(234, 234, 234, 1);
    }

    .list {
        min-height: 480px;
        margin-top: 30px;

        .goods {
            &:not(:last-child) {
                border-right: 1px solid #ebebeb;
            }

            &:nth-child(4n) {
                border: 0;
            }
        }

        .nothing {
            margin-top: 136px;
            img {
                width: 167px;
                height: 167px;
                display: block;
                margin: auto;
            }

            p {
                font-size: 14px;
                text-align: center;
                color: rgba(51, 51, 51, 1);
                line-height: 19px;
                margin-top: 24px;
            }
        }
    }
}
</style>
