<template>
    <div class="container">
        <div class="top">
            <el-radio-group class="menu" v-model="type" size="normal">
                <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
                    <div class="radio-item">
                        <span>{{ item.label }}</span>
                    </div>
                </el-radio-button>
            </el-radio-group>
            <!-- <div class="search-list">
                <el-input
                    class="search"
                    prefix-icon="el-icon-search"
                    placeholder="请输入您想找到的作品名称…"
                    v-model="search"
                    clearable
                    @change="onSearch"
                >
                </el-input>
            </div> -->
        </div>
        <div class="border" style="margin: 30px 0"></div>

        <div class="list" v-loading="fetchingData">
            <collection-info
                @init="init"
                v-for="(item, index) in showList"
                :key="item.id"
                :info.sync="showList[index]"
            ></collection-info>

            <el-empty v-if="Empty" description="还没有该类型的藏品哦～"></el-empty>
        </div>

        <!-- <div class="pagination-wrapper">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalElements"
            >
            </el-pagination>
        </div> -->
    </div>
</template>
<script>
import CollectionInfo from '../../components/CollectionInfo.vue';
import pageableTable from '../../mixins/pageableTable';
import { mapState } from 'vuex';
export default {
    components: { CollectionInfo },
    data() {
        return {
            typeList: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '藏品类',
                    value: 'DEFAULT'
                },
                {
                    label: '盲盒类',
                    value: 'BLIND_BOX'
                }
            ],
            list: [],
            search: '',
            type: '',
            empty: false
            // url: '/collection/all'
        };
    },
    mixins: [pageableTable],
    ...mapState(['userInfo']),
    computed: {
        showList() {
            return [...this.list]
                .map((item, index) => {
                    return {
                        ...item,
                        index
                        // search: this.search
                    };
                })
                .filter(item => {
                    return !this.type || this.type === item.type;
                });
        },
        Empty() {
            return this.showList.length ? false : true;
        }
    },
    watch: {},
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.$http.get('/collection/myLikes').then(res => {
                this.fetchingData = false;
                this.list = res;
                this.$forceUpdate();
            });
        }
        // beforeGetData() {
        //     return {
        //         search: this.search,
        //         query: {
        //             userId: this.userInfo.id
        //         }
        //     };
        // },
        // setList(list) {
        //     this.list = list;
        // }
    }
};
</script>
<style lang="less" scoped>
.search {
    background: #1a1a1a;
    width: 280px;
    height: 42px;
    border-radius: 8px;

    /deep/.el-input__inner {
        border: 1px solid #898989;
        background-color: transparent;
        color: #fff;
        border-radius: 8px;
        &:focus {
            border-color: #fff;
        }
    }
}
.top {
    .flex();
    justify-content: space-between;
}
.border {
    height: 1px;
    background: #494a4d;
    border-radius: 1px;
}
.container {
    padding: 30px 16px;
    .title {
        height: 42px;
        font-size: 32px;
        color: #ffffff;
        line-height: 42px;
        padding: 60px 0;
        font-family: ZhenyanGB;
    }

    .content {
        width: 276px;
        .line(@radius:8px);
        display: inline-block;
        margin: 16px;
        .imgBox {
            height: 160px;
            width: 100%;
            border-radius: 8px 8px 0px 0px;
        }
        .img {
            padding: 5px;
            width: 88px;
            height: 88px;
            background: #ffffff;
            border-radius: 65px;
            position: absolute;
            top: 100px;
            right: 90px;
        }
        .text {
            display: flex;
            align-items: center;
            justify-content: center;
            .name {
                height: 24px;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
                margin-top: 50px;
                padding-right: 6px;
                &.name1 {
                    font-size: 14px;
                    font-weight: 400;
                    color: #949699;
                    line-height: 24px;
                    margin-top: 0;
                }
            }
            .img1 {
                width: 18px;
                height: 18px;
                margin-top: 50px;
                &.img2 {
                    margin-top: 0;
                }
            }
        }
        .introduce {
            margin: 10px 16px 16px;
            height: 60px;
            font-size: 14px;
            font-weight: 400;
            color: #939599;
            line-height: 20px;
            .ellipsis-line(3);
        }
        .fans {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px 20px;
            .followers {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .text3 {
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .text4 {
                font-size: 14px;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
            }
            .follow {
                width: 70px;
                height: 26px;
                color: @prim;
                font-size: 14px;
                border-radius: 16px;
                border: 1px solid;
                text-align: center;
                line-height: 26px;
            }
        }
    }
}

/deep/.menu {
    .el-radio-button__inner {
        border-color: #949699;
        background-color: transparent;
        color: #949699;
        width: 140px;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background: linear-gradient(46deg, @prim 0%, @warn 100%);
        color: #000;
        font-weight: bold;
        border-color: #fff;
    }
    .el-radio-button {
        &:last-child {
            .el-radio-button__inner {
                border-radius: 0 8px 8px 0;
            }
        }
        &:first-child {
            .el-radio-button__inner {
                border-radius: 8px 0 0 8px;
            }
        }
    }
}

.list {
    margin: -16px -16px;
    min-height: 400px;
    .content {
        margin: 23px;
    }
    .collect {
        margin: 23px;
    }
}

.radio-item {
    .flex();
    justify-content: center;
    font-size: 16px;

    .font_family {
        font-size: 20px;
        margin-right: 6px;
    }
}

.pagination-wrapper {
    .pagination();
}
/deep/ .el-empty {
    margin: 0 auto;
}
.search-list {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .select {
        /deep/.el-input__inner {
            background-color: transparent;
            color: #fff;
        }
    }
}
</style>
