<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="list"
        v-model="isLoading"
        @refresh="onRefresh"
    >
        <div class="list-top">艺术展览</div>
        <van-sticky :offset-top="barHeight">
            <van-tabs class="darkTabs" @change="changeType" v-model:active="type" shrink>
                <van-tab title="艺术机构" name="COMPANY,COMPANY_BOX"></van-tab>
                <van-tab title="藏家展厅" name="USER"></van-tab>
            </van-tabs>
        </van-sticky>

        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in showList" :key="index">
                <show-info v-model:info="list[item.index]" list></show-info>
            </template>

            <van-empty :image="require('@assets/kong_black.png')" v-if="empty" description="没有任何展厅哦~" />
        </van-list>
    </van-pull-refresh>
</template>

<script>
import list from '../../mixins/list';
import ShowInfo from '../../components/asset/showInfo.vue';
export default {
    name: 'hallList',
    inject: ['barHeight', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [list],
    components: { ShowInfo },
    data() {
        return {
            list: [],
            empty: false,
            url: '/showroom/all',
            type: 'COMPANY,COMPANY_BOX',
            scrollTop: 0
        };
    },
    computed: {
        showList() {
            let list = [...this.list];
            return list
                .map((item, index) => {
                    return {
                        ...item,
                        index: index
                    };
                })
                .filter(item => {
                    return item.collections && item.collections.length > 0;
                });
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    del: false,
                    status: 'SUCCESS',
                    publish: true,
                    type: this.type
                },
                sort: 'heats,desc'
            };
        },
        onRefresh() {
            this.getData(true).then(() => {
                this.isLoading = false;
            });
        },
        changeType() {
            this.$nextTick(() => {
                this.getData(true);
            });
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == 'hall') {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['hallList']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['hallList'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.van-list {
    padding: 16px;
}
.list {
    background: #272b2e;
}
.showInfo {
    background-color: #373b3e;
    border-radius: 12px;
}
.showInfo + .showInfo {
    margin-top: 16px;
}

.list-top {
    background: #222426;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 24px;
    padding: 13px 16px;
    border-bottom: 2px solid #272b2e;
}
/deep/.van-tab {
    flex-grow: 1 !important;
    margin-right: 0;
    text-align: center;
}
</style>
