<template>
    <view class="content">
        <image class="backImg" :src="menuData.cover ? menuData.cover : '/static/find/default_img.png'" mode="widthFix"></image>
        <view class="details">
            <view class="introduce">
                {{ menuData.description }}
            </view>
            <view class="foods">
                <view class="title">
                    推荐搭配
                </view>
                <oct-menu
                    :lists="menuData.foods"
                    isType="det"
                    :btnStyle="{'margin-top': '30rpx'}"
                    @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
                />
            </view>
            <view class="foods">
                <view class="title">
                    推荐搭配
                </view>
                <view class="other">
                    <view class="other-label">
                        <view class="other-name">
                            碳水化合物
                        </view>
                        <view class="nowrap other-number">
                            {{ menuData.carbohydrate }}g
                        </view>
                    </view>
                    <view class="other-label">
                        <view class="other-name">
                            蛋白质
                        </view>
                        <view class="nowrap other-number">
                            {{ menuData.protein }}g
                        </view>
                    </view>
                    <view class="other-label">
                        <view class="other-name">
                            脂肪
                        </view>
                        <view class="nowrap other-number">
                            {{ menuData.cellulose }}g
                        </view>
                    </view>
                    <view class="other-label">
                        <view class="other-name">
                            千卡
                        </view>
                        <view class="nowrap other-number">
                            {{ menuData.calory }}
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="foods">
                <view class="title">
                    营养师建议
                </view>
                <view class="quiz">
                    {{ menuData.suggest }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { menuDet } from '@/apis/interfaces/menu'
    export default {
        data() {
            return {
                menuData: ''
            }
        },
        onLoad() {},
        mounted() {
            uni.setNavigationBarTitle({
                title: this.$Route.query.title
            })
            this.getMenu()
        },
        methods: {
            getMenu(){
            	menuDet(this.$Route.query.id).then(res => {
                    this.menuData = res
            	})
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        background-color: $window-color;
		min-height: 100vh;
    }
    .backImg {
        width: 100%;
        display: block;
    }
    .details {
        padding: $padding;
        box-sizing: border-box;
        .introduce {
            border-radius: $radius;
            background-color: white;
            padding: $padding;
            box-sizing: border-box;
            margin-bottom: $margin;
            font-size: $title-size-lg;
            line-height: 48rpx;
        }
        .foods {
            background-color: white;
            border-radius: $radius;
            padding: $padding;
            margin-bottom: $margin;
            .title {
                font-size: $title-size;
                font-weight: bold;
                margin-bottom: $margin;
            }
            .other {
                display: flex;
                .other-label {
                    text-align: center;
                    width: 25%;
                    font-size: $title-size-m;
                    .other-number {
                        color: $text-gray;
                        font-size: $title-size-sm;
                        padding-top: $padding - 20;
                    }
                    &:last-child {
                        font-weight: bold;
                    }
                }
            }
            .quiz {
                font-size: $title-size-m;
                color: $text-gray;
                line-height: 48rpx;
            }
        }
    }
</style>
