<template>
    <div class="container center-content">
        <div class="title">我的藏品</div>
        <el-radio-group class="menu" v-model="select" 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" v-if="select !== '2'">
            <el-input
                class="search"
                prefix-icon="el-icon-search"
                placeholder="请输入您想找到的作品名称…"
                v-model="search"
                clearable
                @change="onSearch"
            >
            </el-input>
            <el-select class="select" style="margin-top: 30px" 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">
            <template v-if="select === '0' || select === '1'">
                <asset-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></asset-info>
            </template>
            <template v-if="select === '2'">
                <coupon-info></coupon-info>
            </template>

            <el-empty v-if="empty && select !== '2'" 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 AssetInfo from '../components/AssetInfo.vue';
import CouponInfo from '../components/CouponInfo.vue';
import pageableTable from '../mixins/pageableTable';
export default {
    components: { AssetInfo, CouponInfo },
    mixins: [pageableTable],
    data() {
        return {
            typeList: [
                {
                    label: '我拥有的',
                    icon: 'icon-icon-quanbu',
                    value: '0'
                },
                {
                    label: '我卖出的',
                    icon: 'icon-icon-zuixin',
                    value: '1'
                },
                {
                    label: '藏品兑换券',
                    icon: 'icon-icon-zhuanrang',
                    value: '2'
                }
            ],
            sortList: [
                {
                    label: '综合排序',
                    value: 'createdAt,desc'
                },
                {
                    label: '热门排序',
                    value: 'likes,desc'
                },
                {
                    label: '价格降序',
                    value: 'price,desc'
                },
                {
                    label: '价格升序',
                    value: 'price,asc'
                }
            ],
            select: '0',
            url: '/asset/all',
            search: '',
            list: []
        };
    },
    mounted() {
        this.init();
    },
    watch: {
        select() {
            switch (this.select) {
                case '0':
                    this.url = '/asset/all';
                    break;
                case '1':
                    this.url = '/asset/all';
                    break;
                case '2':
                    this.url = '/userCoupon/all';
                    break;
            }
            this.getData();
        }
    },
    methods: {
        init() {
            this.checkLogin()
                .then(res => {
                    this.page = 1;
                    this.sortStr = 'createdAt,desc';
                    this.search = '';
                    this.getData();
                })
                .catch(() => {
                    this.fetchingData = false;
                    this.empty = true;
                });
        },
        beforeGetData() {
            if (this.select === '1') {
                return {
                    search: this.search,
                    query: {
                        userId: this.$store.state.userInfo.id,
                        // status: 'TRANSFERRED',
                        consignment: true
                    }
                };
            } else if (this.select === '0') {
                return {
                    search: this.search,
                    query: {
                        userId: this.$store.state.userInfo.id
                    }
                };
            } else if (this.select === '2') {
                return {
                    query: {
                        userId: this.$store.state.userInfo.id
                        // status: 'creator'
                    }
                };
            }
        },
        setList(list) {
            this.list = list;
        }
    }
};
</script>
<style lang="less" scoped>
@import url('../styles/list.less');
</style>
