<template>
    <view class="content">
        <view class="tab-sticky">
            <u-tabs
                :current="tabsIndex"
                :list="tabArr"
                @change="tabsClick"
                lineColor="#34CE98"
                :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
            />
        </view>
        <view class="box">
            <oct-menu
                :lists="menuData"
                :btnStyle="{'padding': '30rpx'}"
                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name, title: $event.index }})" 
            />
            <block v-if="page.total_page > 1">
                <u-loadmore :status="status" />
            </block>
        </view>
    </view>
</template>

<script>
    import { queue, categories } from '@/apis/interfaces/menu'
    export default {
        data() {
            return {
                tabArr      : [],
                menuData    : [],
                tabsIndex   : this.$Route.query.index,
                tabsId      : this.$Route.query.id,
                status      : 'loadmore',
                page        : ''
            };
        },
        mounted() {
            // 获取分类
        	this.getTab()
            
            // 获取列表
            this.getMenu()
        },
        methods: {
            // 分类
            getTab(){
            	categories().then(res => {
                    this.tabArr = res
            	})
            },
            
            // 列表
            getMenu(pages){
            	queue({
                    category_id: this.tabsId,
                    page: pages
                }).then(res => {
                    if(res.page.current == 1){
                        this.menuData = []
                    }
                    this.menuData = this.menuData.concat(res.data)
                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
                    this.page     = res.page
            	})
            },
            
            // 切换分类
            tabsClick(item) {
                this.tabsId    = item.category_id
                this.tabsIndex = item.index
                this.getMenu(1)
            }
        },
        
        // 下拉加载
        onReachBottom() {
            if(this.page.has_more){
                this.status = 'loading'
                let pages = this.page.current + 1
                // 获取列表
                this.getMenu(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;
	}
    .content {
        background-color: $window-color;
		min-height: 100vh;
    }
    
    .tabs {
        background-color: white;
        margin-bottom: $margin;
        padding-bottom: $padding - 10;
    }
    
    .box {
        padding: 40px $padding 0;
        box-sizing: border-box;
        margin-top: $margin;
    }
</style>
