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

<template>
	<view class="record--foods">
		<!-- 饮食进度条 -->
		<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 ? '#f00' : '#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-action-sheet>
		<!-- 底部 早餐等菜单 -->
		<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" />
	</view>
</template>

<script>
import arprogress from '@/components/ar-circle-progress/index.vue';
import goodsList from '@/components/foods';
import { plans, editHealthFoods, delHealthFoods } from '@/apis/interfaces/foods.js';
import moment from 'moment';
import addFoods from '@/components/add-goods-template/add-goods-template';
import addPopup from '@/components/sports/addPopup';
import sports from '@/components/sports';
import { editHealthSports, delHealthSports } from '@/apis/interfaces/sport.js';
export default {
	components: {
		arprogress,
		goodsList,
		addFoods,
		addPopup,
		sports
	},
	data() {
		return {
			lists: [],
			addShow: false, // 添加食品显示
			selectGoods: [], // 选择新增的食品
			addEatShow: false, // 加餐弹窗默认不显示
			addEatList: [
				{
					name: '上午加餐',
					type: 2
				},
				{
					name: '下午加餐',
					type: 4
				},
				{
					name: '晚上加餐',
					type: 6
				}
			],
			today: moment(new Date()).format('YYYY-MM-DD'),
			calorys: {}, // 当日食谱推荐页面的信息
			intakes: [], // 当日摄入列表
			sports: [], // 运动列表
			sportsTotal: 0,
			addSportsShow: false, // 添加运动弹窗显示
			selectSports: {} // 选择新增的运动
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		// 编辑运动
		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: '编辑运动'
			};
			// console.log(this.selectSports);
			console.log('编辑运动', item);
			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 // 日期
			};
			console.log(params);
			editHealthSports(params).then(res => {
				this.addSportsShow = false;
				this.selectSports = {};
				this.getList();
			}).catch(err=>{
				 uni.showToast({
				 	title:err.message,
					icon:'none'
				 })
			});
		},

		// 弹窗取消按钮
		cancleSport(show) {
			this.addSportsShow = show;
		},
		// 删除运动
		delSport() {
			let params = {
				exercise_id: this.selectSports.exercise_id //
			};
			console.log(params);
			delHealthSports(params).then(res => {
				this.addSportsShow = false;
				this.selectSports = {};
				this.getList();
			});
		},
		// 长按删除触发事件运动
		longClick(item) {
			this.selectSports = item;
			uni.showModal({
				content: '确认删除么？',
				confirmText: '确认删除',
				confirmColor: '#34ce98',
				cancelText: '再想想',
				cancelColor: '#ddd',
				success: res => {
					if (res.confirm) {
						this.delSport();
					}
				}
			});
		},
		// 长按删除食品
		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'
			});
		},
		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;
			});
		},
		// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
		tabbarClick(e) {
			console.log(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}`
					});
				}
			}
		},
		// 选择了加餐跳转
		selectClick(e) {
			uni.navigateTo({
				url: `/pages/record/addFoods?type=${e.type}`
			});
			// 选择加餐
		},
		// 编辑食品
		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 => {
				console.log(res);
				this.addShow = false;
				this.getList();
			});
		},
		// 删除该食物
		delThis(e) {
			delHealthFoods(this.selectGoods[0].intake_id).then(res => {
				this.addShow = false;
				this.getList();
			});
		},
		// 跳转到食品详情
		tabGoodsInfo(e) {
			this.$Router.push({
				name: 'rankingDetails',
				params: e
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.record--foods {
	padding: $padding $padding $padding * 7 $padding;
	// background: green;
}
// 饮食进度条
.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;
	.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 - 6;
			color: $text-gray-m;
			margin-left: $margin - 10;
		}
	}
	.title-right {
		font-size: $title-size-m - 6;
		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>
