<template>
    <view class="content">
        <view class="While foods">
            <image class="foods-img" :src="foodData.cover" mode="aspectFill"></image>
            <view class="foods-cont">
                <view class="foods-name">
                    {{ foodData.name }}
                </view>
                <view class="foods-text">
                    {{ foodData.explain }}
                </view>
            </view>
        </view>
        <view class="While levels">
            <view class="levels-name">
                嘌呤含量
            </view>
            <view class="levels-tips">
                <view class="levels-number">
                    {{ foodData.number }}
                </view>
                <view class="levels-text">
                    <view class="levels-unit">毫克</view>
                    <view class="levels-usable">每100克（可食部分）</view>
                </view>
            </view>
            <view class="line">
               <view class="line-label" :class="{active : orderId == item.order}" v-for="(item, index) in count.options" :key="index">
                   {{ item.name }}
               </view> 
            </view>
            <view class="tips">
                <block v-if="orderId == 1">( 该食物可放心食用 )</block>
                <block v-else-if="orderId == 2">( 该食物可少量食用 )</block>
                <block v-else>( 该食物谨慎食用 )</block>
            </view>
        </view>
        <view class="While vote">
            <view class="vote-title">
                <text>一共有{{ count.vote_users }}位痛友参与投票</text>
                每个人体质不同，食物对身体的影响也会有差异！
            </view>
            <view class="vote-number">
                <view class="vote-label" v-for="(item, index) in count.options" :key="index">
                    <view class="vote-number-ticket">{{ item.count }}</view>
                    <view class="vote-number-name">
                        {{ item.name }}
                    </view>
                </view>
            </view>
            <view class="vote-assess">
                你吃了吗怎么样？
            </view>
            <view class="vote-btn">
                <view class="vote-btn-label" :class="{active : item.is_my_vote}" v-for="(item, index) in count.options" :key="index" @click="voteClick(item.id)">
                    <image v-if="item.order == 1" class="vote-label-icon" src="/static/icons/lookIcon_00.png" mode=""></image>
                    <image v-else-if="item.order == 2" class="vote-label-icon" src="/static/icons/lookIcon_01.png" mode=""></image>
                    <image v-else class="vote-label-icon" src="/static/icons/lookIcon_02.png" mode=""></image>
                    <view class="vote-label-name">
                        {{ item.name }}
                    </view>
                </view>
            </view>
        </view>
        <view class="While other">
            <view class="other-title">
                其他营养含量
            </view>
            <view class="other-list" v-if="foodData.pabulum">
                <view class="other-label">
                    <view class="other-name">
                        脂肪
                    </view>
                    <view class="other-number">
                        {{ foodData.pabulum.fat ? foodData.pabulum.fat : 0 }}g
                    </view>
                </view>
                <view class="other-label">
                    <view class="other-name">
                        碳水
                    </view>
                    <view class="other-number">
                        {{ foodData.pabulum.carbohydrate ? foodData.pabulum.carbohydrate : 0 }}g
                    </view>
                </view>
                <view class="other-label">
                    <view class="other-name">
                        蛋白质
                    </view>
                    <view class="other-number">
                        {{ foodData.pabulum.protein ? foodData.pabulum.protein : 0 }}g
                    </view>
                </view>
                <view class="other-label">
                    <view class="other-name">
                        纤维素
                    </view>
                    <view class="other-number">
                        {{ foodData.pabulum.cellulose ? foodData.pabulum.cellulose : 0 }}g
                    </view>
                </view>
                <view class="other-label">
                    <view class="other-name">
                        热量
                    </view>
                    <view class="other-number">
                        {{ foodData.pabulum.calories ? foodData.pabulum.calories : 0 }}kcal
                    </view>
                </view>
            </view>
        </view>
        <view class="While other">
            <view class="other-title">
                食物评价
            </view>
            <view class="evaluate">
                {{ foodData.description }}
            </view>
        </view>
        <view class="While other">
            <view class="other-title">
                痛风患者怎么吃
            </view>
            <view class="evaluate">
                {{ foodData.remark }}
            </view>
        </view>
    </view>
</template>

<script>
    import { foodDet, foodVote } from '@/apis/interfaces/gout'
	export default {
		data() {
			return {
				foodData: '',   //食物数据
                count   : '',
                orderId : '',   //评价id
                canVote : '',   //是否投票
			}
		},
		onShow() {
		    // 获取食物详情
		    this.foodInfo();
		},
		methods: {
            // 食物详情
            foodInfo() {
            	foodDet(this.$Route.query.id).then(res => {
                    this.foodData = res
                    this.count = res.count
                    this.orderId = res.count.grade
                    this.canVote = res.can.vote
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 投票
            voteClick(id) {
                if(this.$store.getters.getToken) {
                    if(!this.canVote) {
                        uni.showToast({
                        	title: '您已经投过票了',
                        	icon: "none"
                        })
                        return
                    }
                    // 进行投票
                    foodVote(this.$Route.query.id, id).then(res => {
                        uni.showToast({
                        	title: res,
                        	icon: "none"
                        })
                        
                        // 获取食物详情
                        this.foodInfo();
                    }).catch(err => {
                    	uni.showToast({
                    		title: err.message,
                    		icon: "none"
                    	})
                    })
                    
                    return
                }
                this.$Router.push({ name: 'Login' });
            }
		}
	}
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        padding:30rpx;
        box-sizing: border-box;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    // 食物
    .foods {
        position: relative;
        .foods-img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
        }
        .foods-cont {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            padding: 30rpx 30rpx 30rpx 150rpx;
            box-sizing: border-box;
            .foods-name {
                font-weight: 600;
                margin-bottom: 20rpx;
            }
            .foods-text {
                font-size: 26rpx;
                color: #919191;
            }
        }
    }
    
    // 含量
    .levels {
        .levels-name {
            font-size: 28rpx;
            color: #919191;
            text-align: center;
        }
        .levels-tips {
            background: linear-gradient(to left, #6d79ec, #8591ff);
            color: #FFFFFF;
            padding: 20rpx 20rpx 20rpx 40rpx;
            box-sizing: border-box;
            border-radius: 10rpx;
            margin: 30rpx 100rpx;
            display: flex;
            .levels-number {
                font-size: 60rpx;
                margin-right: 30rpx;
            }
            .levels-text {
                font-size: 26rpx;
                padding-top: 8rpx;
                .levels-usable {
                    font-size: 24rpx;
                    opacity: .9;
                }
            }
        }
        .line {
            display: flex;
            padding: 0 30rpx;
            box-sizing: border-box;
            .line-label {
                flex: 3;
                margin: 0 5rpx;
                text-align: center;
                position: relative;
                padding-bottom: 20rpx;
                font-size: 24rpx;
                color: #919191;
                &::after,
                &::before{
                    position: absolute;
                    content: '';
                }
                &::after {
                    left: 0;
                    bottom: 0;
                    border-radius: 10rpx;
                    width: 100%;
                    height: 6rpx;
                }
                &::before {
                    left: calc(50% - 8rpx);
                    bottom: -6rpx;
                    z-index: 9;
                    width: 8rpx;
                    height: 8rpx;
                    border-radius: 50%;
                    background: #fff9ee;
                    border-style: solid;
                    border-width: 6rpx;
                    display: none;
                }
                &.active::before {
                    display: block;
                }
                &:nth-child(1)::after {
                    background: #5dcd7b;
                }
                &:nth-child(2)::after {
                    background: #e9ce49;
                }
                &:nth-child(3)::after {
                    background: #f58054;
                }
                &:nth-child(1)::before {
                    border-color: #5dcd7b;
                }
                &:nth-child(2)::before {
                    border-color: #e9ce49;
                }
                &:nth-child(3)::before {
                    border-color: #f58054;
                }
            }
        }
        .tips {
            text-align: center;
            padding-top: 20rpx;
            font-size: 26rpx;
            color: #919191;
        }
    }
    
    // 投票
    .vote {
        .vote-title {
            font-size: 26rpx;
            color: #919191;
            text {
                color: #000000;
                display: block;
                font-size: 32rpx;
                margin-bottom: 10rpx;
            }
        }
        .vote-number {
            display: flex;
            margin: 40rpx 0;
            .vote-label {
                flex: 3;
                text-align: center;
                .vote-number-ticket {
                    color: #6d79ec;
                    font-weight: 600;
                }
                .vote-number-name {
                    font-size: 28rpx;
                    margin-top: 10rpx;
                }
            }
        }
        
        .vote-assess {
            margin-bottom: 30rpx;
            font-weight: 600;
        }
        
        .vote-btn {
            display: flex;
            .vote-btn-label {
                flex: 3;
                margin: 0 10rpx;
                background-color: #f3f4f6;
                color: #262729;
                border-radius: 30rpx;
                height: 64rpx;
                line-height: 64rpx;
                font-size: 28rpx;
                display: flex;
                .vote-label-icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin: 10rpx 15rpx 0 20rpx;
                }
                &.active {
                    background-color: #a2aaff;
                    color: #FFFFFF;
                }
            }
        }
    }
    
    // 其他含量
    .other {
        .other-title {
            margin-bottom: 30rpx;
            font-weight: 600;
        }
        .other-list {
            display: flex;
            .other-label {
                flex: 5;
                text-align: center;
                width: 20%;
                font-size: 26rpx;
                .other-number {
                    font-size: 24rpx;
                    color: #919191;
                    padding-top: 10rpx;
                }
            }
        }
    }
    
    // 食物评价
    .evaluate {
        line-height: 42rpx;
        color: #585858;
        font-size: 26rpx;
    }
</style>
