<template>
    <view class="content">
        <view class="left">
            <view class="label" :class="{active : categoryId == item.category_id}" v-for="(item, index) in rankArr" :key="index" @click="leftClick(item.category_id)">
                {{ item.name }}
            </view>
        </view>
        <view class="right">
            <view class="goods">
                <view class="list" @click="$Router.push({name: 'rankingList', params: {id: item.category_id, name: item.name}})" v-for="(item, index) in listArr" :key="index">
                    <image class="logo" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
                    <view class="name">
                        {{ item.name }}
                    </view>
                    <image class="arrow" src="/static/find/menu_more.png" mode="aspectFill"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { categories } from '@/apis/interfaces/ranking'
    export default {
        data() {
            return {
                rankArr     : [],
                listArr     : [],
                categoryId  : ''
            }
        },
        mounted() {
            categories().then(res => {
                this.rankArr    = res
                this.categoryId = res[0].category_id
                this.listArr    = res[0].children
            })
        },
        methods: {
            // 分类-食物
            getRank(cateogoryId){
            	categories({
                    category_id: cateogoryId
                }).then(res => {
                    this.listArr = res
            	})
            },
            
            // 选择分类
            leftClick(id) {
                this.getRank(id)
                this.categoryId = id
            }
        }
    };
</script>

<style lang="scss" scoped>
    .left {
        position: fixed;
        width: 200rpx;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 9;
        overflow-y: scroll;
        background-color: white;
        .label {
            line-height: 120rpx;
            text-align: center;
            font-size: $title-size-lg;
            color: $text-gray-m;
            border-bottom: $window-color 2rpx solid;
            &.active {
                background-color: $window-color;
                color: $main-color;
                font-weight: bold;
            }
        }
    }
    .right {
        position: fixed;
        background-color: $window-color;
        height: 100vh;
        overflow-y: scroll;
        width: 100%;
        left: 0;
        top: 0;
        padding: $padding $padding $padding 230rpx;
        box-sizing: border-box;
        .goods {
            .list {
                padding: $padding;
                border-radius: $radius-m;
                display: flex;
                background-color: white;
                margin-bottom: $margin;
                position: relative;
                .logo {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: $radius-lg;
                    margin-right: $margin;
                }
                .name {
                    font-size: $title-size-lg;
                    line-height: 80rpx;
                }
                .arrow {
                    width: 28rpx;
                    height: 28rpx;
                    position: absolute;
                    right: $padding;
                    top: 58rpx;
                    opacity: .6;
                }
            }
        }
    }
</style>
