<template>
    <div class="title">
        {{title}}
    </div>
    <div v-show="checkedList.length" class="product-list product-list-checked">
        <pruduct v-for="product in list" v-if="product.checked" v-bind:product="product" v-bind:refund-data="refundData"></pruduct>
    </div>
    <div v-show="checkedList.length !== list.length" class="product-list">
        <pruduct v-for="product in list" v-if="!product.checked" v-bind:product="product" v-bind:refund-data="refundData"></pruduct>
    </div>
</template>

<script>
    const pruduct = require('./product.vue');

    module.exports = {
        props: ['title', 'list', 'refundData'],
        computed: {
            checkedList() {
                return this.list.filter(product => {
                    return product.checked;
                });
            }
        },
        components: {
            pruduct
        }
    };
</script>

<style>
    .title {
        padding: 30px 30px 0;
        color: #b0b0b0;
        font-size: 28px;
        line-height: 60px;
    }

    .product-list {
        margin-top: -4px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
</style>