<template>
    <view class="content">
        <view class="tab-sticky">
            <u-tabs
                :list="listArr"
                @click="changeTopic"
                lineColor="#34CE98"
                :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
            />
        </view>
		<view class="box">
			<view class="topic" v-if="topicArr.length > 0">
				<oct-topic
					:lists="topicArr"
					@onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id, title: $event.name }})" 
				/>
				<block v-if="page.total_page > 1">
					<u-loadmore :status="status" />
				</block>
			</view>
			<view class="noTopic" v-else>
				<u-empty
					mode="list"
					text="暂无话题"
				/>
			</view>
		</view>
    </view>
</template>

<script>
    import { lists, categories } from '@/apis/interfaces/topic'
    export default {
        data() {
            return {
                listArr     : [],
                topicArr    : [],
                categoryId  : '',
                status      : 'loadmore',
                page        : ''
            }
        },
        mounted() {
            // 获取分类
            this.getCategories()
            
            // 获取列表
            this.getTopic()
        },
        methods: {
            // 分类
            getCategories(){
            	categories().then(res => {
                    this.listArr = res
            	})
            },
            
            // 列表
            getTopic(categoryId, pages){
            	lists({
                    category_id: categoryId,
                    page: pages
                }).then(res => {
                    if(res.page.current == 1){
                        this.topicArr = []
                    }
                    this.topicArr = this.topicArr.concat(res.data)
                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
                    this.page     = res.page
            	})
            },
            
            // 切换分类
            changeTopic(item) {
                // 获取列表
                this.getTopic(item.category_id, 1)
            }
        },
        
        // 下拉加载
        onReachBottom() {
            if(this.page.has_more){
                this.status = 'loading'
                let pages = this.page.current + 1
                // 获取列表
                this.getTopic('', pages)
                return
            }
            this.status = 'nomore'
        }
    };
</script>

<style lang="scss" scoped>
	.tab-sticky{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: white;
		z-index: 99;
	}
	
	.box {
	    padding-top: 40px;
	}
	
    .new-item {
    	position: relative;
    	margin-top: $margin - 10;
    	background: #f5fdfa;
    	border-radius: $radius;
    	padding: $padding ($padding * 2 + 200rpx) $padding $padding;
    	.new-cover {
    		position: absolute;
    		right: $padding;
    		top: $padding;
    		width: 200rpx;
    		height: 150rpx;
    		border-radius: $radius;
    	}
    	.new-title {
    		font-size: $title-size;
    		line-height: 45rpx;
    		min-height: 100rpx;
    		margin-bottom: 10px;
    		font-weight: bold;
    		color: $text-color;
    	}
    	.new-tool {
    		color: $text-gray;
    		font-size: $title-size-sm;
    		line-height: 40rpx;
    		text {
    			margin-right: $margin/2;
    		}
    	}
    }
    
    .topic {
        padding: 0 $padding;
        box-sizing: border-box;
    }
    
    .noTopic {
        background-color: white;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>
