<template>
    <view class="content">
        <view class="banner">
            <image class="img" src="/static/find/ranking_img.png" mode="widthFix"></image>
            <view class="title">
                {{ name }}
            </view>
        </view>
        <view class="box">
            <oct-menu
                :lists="menuArr"
                :btnStyle="{'margin-top': '30rpx'}"
                :isNumber="true"
                isType="rank"
                @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
            />
            <block v-if="page.total_page > 1">
                <u-loadmore :status="status" />
            </block>
        </view>
    </view>
</template>

<script>
    import { foods } from '@/apis/interfaces/ranking'
    export default {
        data() {
            return {
                name    : this.$Route.query.name,
                menuArr : [],
                status  : 'loadmore',
                page    : ''
            }
        },
        mounted() {
            this.getRank()
        },
        methods: {
            // 分类-食物
            getRank(pages){
            	foods({
                    category_id: this.$Route.query.id,
                    page: pages
                }).then(res => {
                    if(res.page.current == 1){
                        this.menuArr = []
                    }
                    this.menuArr  = this.menuArr.concat(res.data)
                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
                    this.page     = res.page
            	})
            }
        },
        // 下拉加载
        onReachBottom() {
            if(this.page.has_more){
                this.status = 'loading'
                let pages = this.page.current + 1
                // 获取列表
                this.getRank(pages)
                return
            }
            this.status = 'nomore'
        }
    };
</script>

<style lang="scss" scoped>
    .banner {
        position: relative;
        width: 100vw;
        padding-top: 25%;
        .img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .title {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9;
            padding: $padding * 3 $padding $padding $padding;
            font-size: $title-size + 8;
            font-weight: 600;
            color: transparent;
            background: linear-gradient(to right, #f5712f, #e6576b);
            background-clip: text;
        }
    }
    
    .box {
        padding: $padding;
        box-sizing: border-box;
    }
</style>
