<template>
    <view class="content">
        <view class="menu" v-for="(item, index) in menuData" :key="index">
            <view class="title">
                <view class="name">
                    {{ item.name }}
                </view>
                <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
                    查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
                </view>
            </view>
            <view class="box">
                <oct-menu
                    v-if="item.recipes.length > 0"
                    :lists="item.recipes"
                    :btnStyle="{'padding': '30rpx'}"
                    @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name }})" 
                />
                <u-empty
                    v-else
                    mode="list"
                    text="暂无食谱"
                />
            </view>
        </view>
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/menu'
    export default {
        data() {
            return {
                menuData: ''
            };
        },
        mounted() {
        	this.getMenu()
        },
        methods: {
            getMenu(){
            	index().then(res => {
                    this.menuData = res
            	})
            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background-color: $window-color;
    }
    .menu {
        .title {
            padding: $padding $padding 0;
            box-sizing: border-box;
            display: flex;
            margin-bottom: $margin - 10;
            line-height: 50rpx;
            .name {
                font-weight: bold;
                font-size: $title-size + 4;
                flex: 1;
            }
            .more {
                display: flex;
                color: $text-gray;
                image {
                    width: 28rpx;
                    height: 28rpx;
                    margin-top: $margin - 18;
                }
            }
        }
        .box {
            padding: 0 $padding;
            box-sizing: border-box;
        }
    }
</style>
