<!--
 * @Description:
 * @Author: Aimee·Zhang
 * @Date: 2022-01-11 08:54:49
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-02-08 10:41:15
-->

<template>
    <view class="record--foods">
        <!-- 自定义导航部分 -->
        <u-navbar :safeAreaInsetTop="true" :fixed='true' bgColor="#34ce98" :autoBack="true">
            <view class="u-nav-slot" slot="left"> <u-icon name="arrow-leftward" :bold="true" size="20" color="#fff" /> </view>
            <view class="u-nav-slot u-center" slot="center" @click="dateShow = true,dateLists()">
                <u-icon name="play-left-fill" size="14" color="#fff" @click="datePreNext('before')" />
                <view class="date"> <u-icon name="calendar" color="#fff" label-color="#fff" width="150" :label="today" label-size="14" size="20" /> </view>
                <u-icon name="play-right-fill" size="14" color="#fff" @click="datePreNext('after')" />
            </view>
            <view class="u-nav-slot" slot="right"> <u-icon :name="require('@/static/icon/sign-icon.gif')" :bold="true" size="30" @click="$Router.push({name:'signIndex'})" /> </view>
        </u-navbar>

        <!-- 饮食进度条 -->
        <view class="cricle-content">
            <view class="info"> 饮食摄入 <span>{{ calorys.intake_total }}</span> </view>
            <arprogress :percent="calorys.exceeds ? 100 : calorys.ratio" inactiveColor="#f5f4f9"
                :activeColor="calorys.exceeds ? '#c50000' : '#34ce98'" width="300" class="cricle" borderWidth="20">
                <span>{{ calorys.exceeds ? '多吃了' : '还可以吃' }}</span>
                <span :class="['num', calorys.exceeds ? 'num1' : '']">{{ calorys.amount }}</span>
                <span>推荐预算{{ calorys.goal }}</span>
            </arprogress>
            <view class="info" @click="errToast"> 运动消耗 <span>{{ calorys.exercise_total }}</span> </view>
            <view class="ic-left">摄入量推荐</view>
            <u-icon class="ic-day" name="checkmark-circle" color="#34ce98" size="10" :label="`${calorys.days}天`" labelColor="#34ce98" labelSize="10" space="3" />
        </view>

        <!-- 有饮食记录 -->
        <template v-if="intakes.length > 0">
            <view class="foods-add" v-for="(it, index) in intakes" :key="index">
                <view class="foods-title">
                    <view class="title-left"> {{ it.name }} <span v-if="it.remark">{{ it.remark || '' }}</span> </view>
                    <view class="title-right"> {{ it.total }} <span class="dw">千卡</span> <u-icon name="arrow-right" color="#ddd" size="13" :bold="true" /> </view>
                </view>
                <goodsList :lists="it.intake" type="no-dian" @editGoods="editGoods" @longClickGoods="longClickGoods" />
            </view>
        </template>

        <!-- 运动列表 -->
        <template v-if="sportsTotal > 0">
            <view class="foods-title" style="padding-top:50rpx;">
                <view class="title-left">运动</view>
                <view class="title-right"> {{ sportsTotal }} <span class="dw">千卡</span> <u-icon name="arrow-right" color="#ddd" size="13" :bold="true" /> </view>
            </view>
            <sports type="edit" :lists="sports" @editSport="editSport" @longClick="longClick" />
        </template>

        <!-- 没有饮食记录 -->
        <view class="no-foods" v-if="sports.length === 0 && intakes.length === 0">
            <u-image :src="require('../../static/imgs/no-foods.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="300rpx" class="no-foods-img" />
            <view>还没有添加今日饮食记录</view>
            <view>请点击屏幕下方按钮来添加</view>
        </view>

        <!-- 加餐模块 -->
        <u-action-sheet :actions="addEatList" title="加餐模块" :closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectClick" cancelText="取消" :show="addEatShow" @close="addEatShow = false" />
            
        <!-- 底部 早餐等菜单 -->
        <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" inactiveColor="#333" @click="tabbarClick">
            <u-tabbar-item text="+早餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-1.png')" />
            <u-tabbar-item text="+午餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-2.png')" />
            <u-tabbar-item text="+晚餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-3.png')" />
            <u-tabbar-item text="+加餐" @click="tabbarClick" :icon="require('../../static/imgs/foods-4.png')" />
            <u-tabbar-item text="+运动" @click="tabbarClick" :icon="require('../../static/imgs/foods-5.png')" />
        </u-tabbar>

        <!--  添加食谱弹窗 -->
        <addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle" @close="closeHandle" @delThis="delThis" @tabGoodsInfo="tabGoodsInfo" max="999" />

        <!-- 修改运动弹窗 -->
        <addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport" @cancleSport="cancleSport" @delSport="delSport" />

        <!-- 选择日历 -->
        <dateTemplate :lists="calendarList" :today="today" :month="month" :dateShow="dateShow" type='foods' @backDate="backDate" @dateClick="dateClick" @closeDate="closeDate" @datePreNext="datePreNext" />

    </view>
</template>

<script>
    import moment from 'moment';
    import sports from '@/components/sports';
    import goodsList from '@/components/foods';
    import addPopup from '@/components/sports/addPopup';
    import arprogress from '@/components/ar-circle-progress/index.vue';
    import addFoods from '@/components/add-goods-template/add-goods-template';
    import dateTemplate from '@/components/date-template/index.vue'
    import {
        editHealthSports,
        delHealthSports
    } from '@/apis/interfaces/sport.js';
    import {
        plans,
        editHealthFoods,
        delHealthFoods,
        dateList
    } from '@/apis/interfaces/foods.js';
    export default {
        components: {
            arprogress,
            goodsList,
            addFoods,
            addPopup,
            sports,
            dateTemplate
        },
        data() {
            return {
                addShow: false, // 添加食品显示
                selectGoods: [], // 选择新增的食品
                addEatShow: false, // 加餐弹窗默认不显示
                addEatList: [{name: '上午加餐',type: 2},{name: '下午加餐',type: 4},{name: '晚上加餐',type: 6}],
                calorys: {}, // 当日食谱推荐页面的信息
                intakes: [], // 当日摄入列表
                sports: [], // 运动列表
                sportsTotal: 0,
                addSportsShow: false, // 添加运动弹窗显示
                selectSports: {}, // 选择新增的运动
                today: moment(new Date()).format('YYYY-MM-DD'),// 当前时间
                month: moment(new Date()).format('YYYY-MM'), //当前月份
                dateShow: false, // 日历展示
                calendarList: [],
                dateType: '', // before after ''
            };
        },
        onShow() {
            this.getList();
            this.dateLists(); // 日期列表
        },
        methods: {
            // 获取当前统计页面基本数据
            getList() {
                plans(this.today).then(res => {
                    this.calorys = res.calorys;
                    this.calorys.ratio = Number(this.calorys.ratio);
                    this.intakes = res.intakes;
                    this.sports = res.exercises.lists;
                    this.sportsTotal = res.exercises.total;
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },

            //#region 运动操作相关
            // 编辑运动
            editSport(item) {
                this.selectSports = {
                    name: item.sport.name,
                    calory: item.sport.calory,
                    cover: item.sport.cover,
                    duration: item.duration,
                    sport_id: item.sport.sport_id,
                    exercise_id: item.exercise_id,
                    title: '编辑运动'
                };
                this.addSportsShow = true;
            },
            // 弹窗确认按钮新增  这里接口报错了  ，
            comfirmSport(show, duration) {
                let params = {
                    unit: '1', // 时间单位：分钟 1 小时 2
                    duration: duration, // 时常
                    exercise_id: this.selectSports.exercise_id, //
                    sport_id: this.selectSports.sport_id, // 运动id
                    date: this.today // 日期
                };
                editHealthSports(params).then(res => {
                    this.addSportsShow = false;
                    this.selectSports = {};
                    this.getList();
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 弹窗取消按钮
            cancleSport(show) {
                this.addSportsShow = show;
            },
            // 删除运动
            delSport() {
                let params = {
                    exercise_id: this.selectSports.exercise_id //
                };
                delHealthSports(params).then(res => {
                    this.addSportsShow = false;
                    this.selectSports = {};
                    this.getList();
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 长按删除触发事件运动
            longClick(item) {
                this.selectSports = item;
                uni.showModal({
                    content: '确认删除么？',
                    confirmText: '确认删除',
                    confirmColor: '#34ce98',
                    cancelText: '再想想',
                    cancelColor: '#ddd',
                    success: res => {
                        if (res.confirm) {
                            this.delSport();
                        }
                    }
                });
            },
            //#endregion 运动操作相关


            //#region 食物操作相关
            // 长按删除食品
            longClickGoods(e) {
                this.selectGoods = [e];
                uni.showModal({
                    content: '确认删除么？',
                    confirmText: '确认删除',
                    confirmColor: '#34ce98',
                    cancelText: '再想想',
                    cancelColor: '#ddd',
                    success: res => {
                        if (res.confirm) {
                            this.delThis();
                        }
                    }
                });
            },
            // 错误提示
            errToast() {
                uni.showToast({
                    title: '努力开发中~',
                    icon: 'none'
                });
            },
            // 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
            tabbarClick(e) {
                this.tabarIndex = e;
                if (e === 3) {
                    this.addEatShow = true;
                } else {
                    if (e === 4) {
                        // 新增运动
                        uni.navigateTo({
                            url: `/pages/record/addExercises`
                        });
                    } else {
                        uni.navigateTo({
                            url: `/pages/record/addFoods?type=${e === 0 ? 1 : e === 1 ? 3 : 5}&date=${this.today}`
                        });
                    }
                }
            },
            // 选择了加餐跳转
            selectClick(e) {
                uni.navigateTo({
                    url: `/pages/record/addFoods?type=${e.type}&date=${this.today}`
                });
                // 选择加餐
            },
            // 编辑食品
            editGoods(e) {
                this.selectGoods = [e];
                this.addShow = true;
            },
            closeHandle() {
                //键盘关闭的回调函数
                this.addShow = false;
            },
            // 监听点击键盘触发返回值新增食品
            confirmHandle(value) {
                // 新添加食物
                let data = {
                    ser: 1,
                    weight: value,
                    food_id: this.selectGoods[0].food_id,
                    intake_id: this.selectGoods[0].intake_id
                };
                this.editHealthFoods(data);
            },
            // 添加食物
            editHealthFoods(data) {
                editHealthFoods(data).then(res => {
                    this.addShow = false;
                    this.getList();
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 删除该食物
            delThis(e) {
                delHealthFoods(this.selectGoods[0].intake_id).then(res => {
                    this.addShow = false;
                    this.getList();
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                });
            },
            // 跳转到食品详情
            tabGoodsInfo(e) {
                this.$Router.push({
                    name: 'rankingDetails',
                    params: e
                });
            },
            //#endregion 食物操作相关

            //#region 日历操作相关 
            // 日历列表
            dateLists() {
                let data = {
                    month: this.month,
                    type: this.dateType
                }
                dateList(data).then(res => {
                    this.calendarList = res.calendar
                    this.dateType = ''
                    this.month = res.month
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration: 2000,
                        mask: true
                    })
                })
            },
            // 选择日期
            dateClick(item) {
                this.today = item.today
                this.month = item.today
                this.reset()
            },
            // 返回到今日
            backDate() {
                this.today = moment(new Date()).format('YYYY-MM-DD')
                this.reset()
            },
            //  上一个月或者下一个月
            datePreNext(type) {
                this.dateType = type
                this.dateLists()
            },
            // 关闭日历
            closeDate() {
                this.month = this.today
                this.dateShow = false
            },
            // 重置日历数据
            reset() {
                this.calendarList = []
                this.dateLists()
                this.getList()
                this.closeDate()
            }
            //#endregion 日历操作相关
        }
    };
</script>

<style lang="scss" scoped>
    .record--foods {
        padding: $padding $padding $padding * 7 $padding;
        // background: green;
    }

    // 顶部日历筛选部分
    .u-center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        .date {
            background-color: rgba($color: #000000, $alpha: .1);
            color: #fff;
            min-width: 340rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 8rpx 20rpx;
            border-radius: $radius * 2;
            margin: 0 10rpx;
            font-size: $title-size - 2;
        }

        .play-right-fill {
            padding: $padding !important;
            background-color: pink;
        }
    }


    // 饮食进度条
    .cricle-content {
        box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
        font-size: $title-size-m - 6;
        padding: $padding * 1.8 $padding;
        border-radius: $radius;
        color: $text-gray-m;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        position: relative;
        margin-top: $margin * 5;

        .cricle {
            .num {
                color: $text-color;
                font-size: $title-size * 1.8;
                font-weight: bold;
                padding: $padding * 0.2;
            }

            .num1 {
                color: #f00;
            }
        }

        .info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            span {
                font-size: $title-size + 10;
                font-weight: bold;
                color: $text-color;
                padding-top: $padding * 0.5;
            }
        }

        .ic-left {
            position: absolute;
            left: 0;
            top: 0;
            background-image: linear-gradient(to right, #ffebb9, #fbd57b);
            color: #664710;
            padding: 10rpx $padding * 0.6;
            border-radius: 0 0 $radius 0;
        }

        .ic-day {
            position: absolute;
            right: $padding;
            top: $padding;
        }
    }

    // 没有饮食记录
    .no-foods {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: $title-size-m - 4;
        color: $text-gray-m;
        min-height: 40vh;

        // background: pink;
        .no-foods-img {
            opacity: 0.5;
        }

        view {
            padding: $padding * 0.2;
        }
    }

    // 饮食记录 早中晚加餐等
    .foods-add {
        border-bottom: solid 1rpx #f7f7f7;
        margin-top: $margin;
    }

    // 主标题
    .foods-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        color: $text-color;
        padding: $padding * 0.5 0;

        .title-left {
            font-size: $title-size;
            color: $text-color;
            font-weight: bold;

            span {
                font-weight: normal;
                font-size: $title-size-m;
                color: $text-gray-m;
                margin-left: $margin - 10;
            }
        }

        .title-right {
            font-size: $title-size-m;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            color: $main-color;

            .dw {
                margin: 0 $margin * 0.6 0 $margin * 0.4;
                color: $text-gray;
            }
        }
    }
</style>
