<template>
    <div class="container">
        <div class="title" ref="anchor">欢迎来到 NFT 市场</div>
        <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">
                    <i class="font_family" :class="[item.icon]"></i>
                    <span>{{ item.label }}</span>
                </div>
            </el-radio-button>
        </el-radio-group>

        <div class="border" style="margin-top: 30px"></div>
        <div class="search-list">
            <el-input
                class="search"
                prefix-icon="el-icon-search"
                placeholder="请输入您想找到的作品名称…"
                v-model="search"
                clearable
                @change="onSearch"
            >
            </el-input>
            <el-select class="select" v-model="sortStr" placeholder="请选择">
                <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div class="list" v-loading="fetchingData">
            <collection-info v-for="(item, index) in list" :key="item.id" :info.sync="list[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';
export default {
    components: { CollectionInfo },
    data() {
        return {
            typeList: [
                {
                    label: '全部',
                    icon: 'icon-icon-quanbu',
                    value: ''
                },
                {
                    label: '新品',
                    icon: 'icon-icon-zuixin',
                    value: 'DEFAULT'
                },
                {
                    label: '盲盒',
                    icon: 'icon-icon-zhuanrang',
                    value: 'BLIND_BOX'
                },
                {
                    label: '拍卖',
                    icon: 'icon-icon-paimai',
                    value: 'AUCTION'
                }
            ],
            sortList: [
                {
                    label: '综合排序',
                    value: 'createdAt,desc'
                },
                {
                    label: '热门排序',
                    value: 'likes,desc'
                },
                {
                    label: '价格降序',
                    value: 'price,desc'
                },
                {
                    label: '价格升序',
                    value: 'price,asc'
                }
            ],
            search: '',
            type: '',
            url: '/collection/all',
            list: []
        };
    },
    mixins: [pageableTable],
    watch: {
        type() {
            this.$router
                .replace({
                    query: {
                        ...this.$route.query,
                        type: this.type
                    }
                })
                .catch(() => {});
            this.getData();
        }
    },
    methods: {
        beforeGetData() {
            return {
                search: this.search,
                query: {
                    type: this.type
                }
            };
        },
        setList(list) {
            this.list = list;
        }
    }
};
</script>
<style lang="less" scoped>
@import url('../styles/list.less');
</style>
