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

<script>
    import { queue, categories } from '@/apis/interfaces/menu'
    export default {
        data() {
            return {
                tabArr      : [],
                menuData    : [],
                tabsIndex   : this.$Route.query.index
            };
        },
        mounted() {
        	this.getTab()
            this.getMenu(this.$Route.query.id)
        },
        methods: {
            getTab(){
            	categories().then(res => {
                    this.tabArr = res
            	})
            },
            
            getMenu(id){
            	queue({
                    category_id: id
                }).then(res => {
                    this.menuData = res.data
            	})
            },
            tabsClick(item) {
                this.getMenu(item.category_id)
                this.tabsIndex = item.index
            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background-color: $window-color;
    }
    
    .tabs {
        background-color: white;
        margin-bottom: $margin;
        padding-bottom: $padding - 10;
    }
    
    .box {
        padding: 0 $padding;
        box-sizing: border-box;
    }
    // 34CE98
</style>
