<template>
    <div class="discover">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <div class="top-btn">
                    <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
                        我拥有的
                    </div>
                    <div class="btn" :class="{ active: active === 'creator' }" @click="changeActive('creator')">
                        我卖出的
                    </div>
                    <div class="btn" :class="{ active: active === 'coupon' }" @click="changeActive('coupon')">
                        兑换券
                    </div>
                </div>
                <div
                    class="search"
                    v-if="isLogin && active !== 'coupon'"
                    @click="$router.push('/assetSearch?status=' + status)"
                >
                    <img src="../assets/svgs/search.svg" alt="" />
                </div>
            </div>

            <van-tabs v-model:active="type" line-width="16" line-height="2" :ellipsis="false" @click="changeTab">
                <van-tab
                    :title="item.label"
                    :name="
                        item.type === 'select' ? (type === item.value[0] ? item.value[1] : item.value[0]) : item.value
                    "
                    :title-class="item.type === 'select' && type === item.value[0] ? '' : 'asc'"
                    :key="index"
                    v-for="(item, index) in typeOptions"
                >
                    <template v-if="item.type === 'select'" #title>
                        <div class="tab">
                            <span>{{ item.label }}</span>
                            <van-icon size="8" name="arrow-up" />
                            <van-icon size="8" name="arrow-down" />
                        </div>
                    </template>
                </van-tab>
            </van-tabs>

            <!-- <van-button
        color="#272828"
        round
        size="mini"
        icon="arrow-down"
        icon-position="right"
        class="select"
        @click="showSelect = true"
      >
        全部
      </van-button> -->
        </van-sticky>

        <van-list class="box-list" v-model:loading="loading" :finished="finished" finished-text="" @load="getList">
            <template v-for="(item, index) in showList" :key="index">
                <coupon-info :info="item" v-if="active == 'coupon'"></coupon-info>
                <asset-info :info="item" v-else></asset-info>
            </template>

            <van-empty
                v-if="empty || (showList.length === 0 && !loading)"
                description="你还有没有藏品哦～"
                :image="require('../assets/kong_png_maichude.png')"
            />
        </van-list>
        <van-action-sheet
            ref="action"
            v-model:show="showSelect"
            description="选择筛选方式"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
        />

        <div class="tabbar-placeholder"></div>
    </div>
</template>

<script>
import AssetInfo from '../components/asset/assetInfo.vue';
import CouponInfo from '../components/CouponInfo.vue';
import asset from '../mixins/asset';
import coupon from '../mixins/coupon';
export default {
    name: 'discover',
    mixins: [asset, coupon],
    inject: ['bar'],
    components: {
        AssetInfo,
        CouponInfo
    },
    data() {
        return {
            active: 'explore',
            stiky: null,
            type: '',
            empty: false,
            list: [],
            label: '全部',
            showSelect: false,
            actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
            action: null,
            loading: false,
            finished: false,
            page: 0,
            name1: '',
            name: ''
        };
    },
    computed: {
        typeOptions() {
            if (this.active === 'explore') {
                return [
                    {
                        label: '全部',
                        value: ''
                    },
                    {
                        label: '售卖',
                        value: 'ON_SALE'
                    },
                    {
                        label: '仅展示',
                        value: 'NORMAL'
                    }
                ];
            } else if (this.active === 'creator') {
                return [
                    {
                        label: '全部',
                        value: 'createdAt,desc'
                    },
                    {
                        label: '价格',
                        value: ['sellPrice,desc', 'sellPrice,asc'],
                        type: 'select'
                    }
                ];
            } else {
                return [
                    {
                        label: '未使用',
                        value: 'CAN_USE'
                    },
                    {
                        label: '不可用',
                        value: 'CANNOT_USE'
                    }
                ];
            }
        },
        showList() {
            if (this.active === 'coupon') {
                return [...this.list].filter(item => {
                    if (this.type === 'CAN_USE') {
                        return this.checkTime(item);
                    } else {
                        return !this.checkTime(item);
                    }
                });
            } else {
                return this.list;
            }
        },
        sort() {
            if (this.active === 'creator') {
                return this.type;
            } else {
                return 'createdAt,desc';
            }
        },
        status() {
            if (this.active === 'explore') {
                return 'NORMAL,TRADING,GIFTING';
            } else if (this.active === 'creator') {
                return 'TRANSFERRED';
            } else {
                return '';
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.stiky = this.$refs.top.$el.childNodes[0];
        });
        this.checkLogin();
    },
    methods: {
        getList() {
            if (!this.isLogin) {
                this.empty = true;
                this.loading = false;
                return;
            }
            if (this.page === 0) {
                this.list = [];
            }
            this.finished = false;
            this.empty = false;
            let form = {
                page: this.page,
                size: 20,
                sort: this.sort,
                query: {
                    userId: this.$store.state.userInfo.id,
                    ...this.beforeQuery()
                }
            };
            this.$http
                .post(this.active === 'coupon' ? '/userCoupon/all' : '/asset/all', form, { body: 'json' })
                .then(res => {
                    this.list = [...this.list, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!this.finished) {
                        this.page = this.page + 1;
                    }
                });
        },
        beforeQuery() {
            let form = {};
            if (this.active == 'explore') {
                form = {
                    status: this.status
                };
                if (this.type === 'NORMAL') {
                    form = {
                        ...form,
                        publicShow: true,
                        consignment: false
                    };
                }
                if (this.type === 'ON_SALE') {
                    form = {
                        ...form,
                        consignment: true
                    };
                }
            } else if (this.active === 'creator') {
                form = {
                    status: this.status
                };
            } else {
                form = {
                    used: false
                };
            }

            return form;
        },
        changeActive(active) {
            this.active = active;
            this.loading = true;
            this.$nextTick(() => {
                this.type = this.typeOptions[0].type;
            });
            this.page = 0;
            this.getList();
        },
        changeTab() {
            if (this.active !== 'coupon') {
                this.loading = true;
                this.page = 0;
                this.getList();
            }
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 10px 16px;
    background-color: @bg;
    .top-btn {
        flex-grow: 1;
        .btn {
            font-size: 16px;
            line-height: 26px;
            display: inline-block;
            vertical-align: text-bottom;

            &.active {
                color: @prim;
                font-size: 20px;
                font-weight: bold;
                line-height: 30px;
            }
        }

        .btn + .btn {
            margin-left: 30px;
        }
    }
}
.select {
    position: absolute;
    right: 16px;
    bottom: 9px;
    color: @text3 !important;
    min-width: 96px;
}
// /deep/.van-sticky {
//     position: relative;
// }

.discover {
    background-color: @bg3;
    min-height: 100vh;
    box-sizing: border-box;
}

/deep/ .mySwiper {
    width: calc(100vw - 32px);
    height: calc(41vw - 13px);

    .swiper-pagination {
        bottom: 12px;
    }

    .swiper-pagination-bullet {
        width: 6px;
        height: 2px;
        border-radius: 1px;
        background: #d7d7d7;
    }

    .swiper-pagination-bullet-active {
        background: @prim;
    }
}

.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.grid-img {
    display: block;
}
.van-grid {
    margin-top: 12px;
}
/deep/ .van-grid-item__content {
    padding: 14px 20px 16px;
}
/deep/ .van-grid-item__text {
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    margin-top: 4px;
}

.title {
    padding: 16px 20px 8px;
    color: @prim;
    font-size: 18px;
    font-weight: bold;
}

.box-list {
    // display: flex;
    // flex-wrap: wrap;
    padding: 8px 8px 100px;
}

.tab {
    position: relative;
    padding-right: 14px;
    .van-icon {
        position: absolute;
        right: 0;

        &.van-icon-arrow-down {
            top: 8px;
        }

        &.van-icon-arrow-up {
            bottom: 8px;
        }
    }
}

/deep/.van-tab {
    color: #fff;
    flex-grow: 0;
    padding: 0 0 0 0;
    margin-right: 30px;
    position: relative;

    &.van-tab--active {
        color: @prim;
    }
}
/deep/.van-tabs__nav {
    padding-left: 16px;
}

/deep/ .van-tabs__line {
    bottom: 20px;
}

/deep/.van-action-sheet__description::after {
    border-bottom: 1px solid #f2f2f2;
}

/deep/.van-tab--active {
    .tab {
        .van-icon-arrow-up {
            color: #646566;
        }
    }
    &.asc {
        .tab {
            .van-icon-arrow-up {
                color: @prim;
            }
            .van-icon-arrow-down {
                color: #646566;
            }
        }
    }
}
</style>
