<template>
    <view class="content">
        <view class="modular goods">
            <image class="img" :src="foodDate.cover" mode="aspectFill"></image>
            <view class="title">
                <view class="name">
                    {{ foodDate.name }}
                </view>
                <view class="text">
                    {{ foodDate.heat }}
                </view>
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    食物价值
                </view>
            </view>
            <view class="text">
                {{ foodDate.recom_text }}
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    热量
                </view>
                <view class="switch">
                    <view class="switch-item" :class="{active : current == 0}" @click="switchTab(0)">
                    	千卡
                    </view>
                    <view class="switch-item" :class="{active : current == 1}" @click="switchTab(1)">
                    	千焦
                    </view>
                </view>
            </view>
            <view class="energy">
                <view class="number">
                    <text>{{ calory }}</text>{{ current == 0 ? '千卡' : '千焦'}}
                </view>
                <view class="tips">
                    每100克（可食用部分）
                </view>
            </view>
        </view>
        
        <view class="modular foods">
            <view class="title">
                <view class="name">
                    营养成分
                </view>
                <view class="unit">
                    单位：每100克
                </view>
            </view>
            <view class="nutrition">
                <view class="tabs">
                    <view class="tabs-title">
                        营养元素
                    </view>
                    <view class="tabs-title">
                        含量
                    </view>
                    <view class="tabs-title">
                        NRV%
                    </view>
                </view>
                <view class="list">
                    <view class="label" v-if="nutrition.protein">
                        <view class="label-name">
                            蛋白质
                        </view>
                        <view class="label-name">
                            {{ nutrition.protein.value }}克
                        </view>
                        <view class="label-name">
                            {{ nutrition.protein.nrv }}%
                        </view>
                    </view>
                    <view class="label" v-if="nutrition.cellulose">
                        <view class="label-name">
                            脂肪
                        </view>
                        <view class="label-name">
                            {{ nutrition.cellulose.value }}克
                        </view>
                        <view class="label-name">
                            {{ nutrition.cellulose.nrv }}%
                        </view>
                    </view>
                    <view class="label" v-if="nutrition.carbohydrate">
                        <view class="label-name">
                            碳水化合物
                        </view>
                        <view class="label-name">
                            {{ nutrition.carbohydrate.nrv }}克
                        </view>
                        <view class="label-name">
                            {{ nutrition.carbohydrate.nrv }}%
                        </view>
                    </view>
                </view>
            </view>
            <view class="careful">
                注：以上为三大营养元素的功能比例，不是重量比例。其中，脂肪供能效率比较高，是碳水化合物和蛋白质的2.25倍
            </view>
        </view>
        
        <view class="modular foods" v-if="goodsArr.length > 0">
            <view class="title">
                <view class="name">
                    相关商品
                </view>
            </view>
            <view class="item" v-for="(item, index) in goodsArr" :key="index">
            	<image class="item-cover" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
            	<view class="item-title">
                    <view class="nowrap item-name">
                        {{ item.name }}
                    </view>
                    <view class="item-price">
                        ￥{{ item.price }}
                    </view>
                </view>
                <view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
                    查看商品
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { foodDet } from '@/apis/interfaces/ranking'
    export default {
        data() {
            return {
                foodDate    : '',
                goodsArr    : [],
                calory      : '',
                nutrition   : '',
                current     : 0
            }
        },
        mounted() {
            uni.setNavigationBarTitle({
                title: this.$Route.query.title
            })
            this.foodRank()
        },
        methods: {
            // 分类-食物
            foodRank(){
            	foodDet(this.$Route.query.id).then(res => {
                    this.foodDate  = res
                    this.goodsArr  = res.goods
                    this.nutrition = res.data
                    this.calory    = res.calory
            	})
            },
            
            // 热量切换
            switchTab(val) {
                this.current = val
                if(val == 0) {
                    this.calory    = this.foodDate.calory
                    return
                }else {
                    this.calory    = this.foodDate.joule
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        background-color: $window-color;
        padding: $padding;
        box-sizing: border-box;
		min-height: 100vh;
    }
    
    .modular {
        background-color: white;
        border-radius: $radius;
        margin-bottom: $margin;
        padding: $padding;
        box-sizing: border-box;
    }
    
    .goods {
        position: relative;
        .img {
            width: 100rpx;
            height: 100rpx;
            border-radius: $radius-m;
        }
        .title {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: $padding 0 0 100rpx + $padding * 2;
            box-sizing: border-box;
            .name {
                font-weight: bold;
                margin-bottom: $margin - 10;
            }
            .text {
                color: $text-gray-m;
                font-size: $title-size-m;
            }
        }
    }
    
    .foods {
        margin-bottom: $margin;
        .title {
            margin-bottom: $margin - 10;
            display: flex;
            .name {
                font-weight: bold;
                font-size: $title-size;
                flex: 1;
            }
            .switch {
                background-color: $main-color;
                display: flex;
                color: white;
                font-size: $title-size-sm;
                border-radius: $radius-m;
                overflow: hidden;
                line-height: 48rpx;
                .switch-item {
                    flex: 2;
                    padding: 0 $padding - 20;
                    transition-property: transform, color, -webkit-transform;
                    transition-duration: 0.3s;
                    transition-timing-function: ease-in-out;
                    &.active {
                        background-color: #09a16c;
                    }
                }
            }
            .unit {
                font-size: $title-size-m;
                line-height: 40rpx;
                color: $text-gray-m;
            }
        }
        .text {
            line-height: 48rpx;
            font-size: $title-size-lg;
        }
        .energy {
            text-align: center;
            font-size: $title-size-m;
            padding: $padding 0;
            color: $text-gray-m;
            .number {
                margin-bottom: $margin - 20;
                color: #000000;
                text {
                    font-size: $title-size + 8;
                    font-weight: bold;
                    padding-right: $padding - 20;
                }
            }
        }
        .nutrition {
            border: 2rpx solid $border-color;
            .tabs {
                display: flex;
                flex-wrap: wrap;
                font-size: $title-size-m;
                line-height: 80rpx;
                border-bottom: $border-color 2rpx solid;
                background-color: $window-color;
                .tabs-title {
                    width: 33.33%;
                    text-align: center;
                }
            }
            .list {
                .label {
                    display: flex;
                    flex-wrap: wrap;
                    line-height: 80rpx;
                    border-bottom: $border-color 2rpx solid;
                    font-size: $title-size-m;
                    color: $text-gray;
                    .label-name {
                        width: 33.33%;
                        text-align: center;
                    }
                    &:last-child {
                        border: none;
                    }
                }
            }
        }
        .careful {
            font-size: $title-size-m;
            color: $text-gray-m;
            padding-top: $padding - 10;
        }
        .item {
        	position: relative;
        	margin-top: $margin - 10;
        	background: #f5fdfa;
        	border-radius: $radius;
        	padding: $padding;
        	.item-cover {
        		width: 120rpx;
        		height: 90rpx;
        		border-radius: $radius-m;
        	}
        	.item-title {
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 180rpx);
                box-sizing: border-box;
                padding: $padding $padding 0  180rpx;
        		font-size: $title-size-lg;
        		margin-bottom: 10px;
        		color: $text-color;
                .item-price {
                    color: $text-price;
                    margin-top: $margin - 20;
                }
        	}
            .item-btn {
                position: absolute;
                right: $padding;
                top: $padding + 20;
                background-color: $main-color;
                color: white;
                line-height: 62rpx;
                font-size: $title-size-m;
                padding: 0 $padding - 10;
                border-radius: $radius-m;
            }
        }
    }
</style>
