<template>
	<view class="content">
		<view v-if="!token" class="list2" @click="handleLogin()">
			<view class="nolist">
				<icon class="iconfont icon-zanwushuju"></icon>
				<text>{{$t('msgLoginTips')}}！</text>
			</view>
			<view class="btn">{{$t('titleLogin')}}</view>
		</view>
		<view v-else class="content_box">
			<!-- 每日摄入 -->
			<view class="box" v-if="userList.length">
				<!-- 日期选择 -->
				<view class="data">
					<picker mode="date" fields="day" :end="endDate" @change="changeClickDate"
						:value="data?data:endDate">
						<view>
							{{data?data:$t("verifyPicker")}}
							<image src="/static/qie.png"></image>
						</view>
					</picker>
				</view>

				<!-- 称重 -->
				<view class="blue-tooth" v-if="userList.length && isBle">
					<blue-tooth :btnType="btnType"></blue-tooth>
				</view>

				<!-- 能量摄入 -->
				<view class="everyDay box_shadow">
					<view class="title">
						<view><text class="quan"></text>{{$t("countCalorieIntake")}}</view>
						<view class="icon" @click="handleSet">
							<uni-icons type="gear" size="26"></uni-icons>
						</view>
					</view>
					<view class="jishiqi">
						<view class="left" v-if="foodInfo.list.length">
							<view class="chart-wrap">
								<view class="charts-box">
									<qiun-data-charts type="arcbar" :chartData="chartData" :canvas2d="true"
										canvasId="foodCharts01" />
								</view>
								<view class="center">
									{{$t("countIntake")}}
									<text>{{foodInfo.nutrients_four[0].today_intake}}</text>
									<view class="unit">Kcal</view>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="item" v-for="(ite,ind) in foodInfo.nutrients_four.slice(1)">
								<view class="left-icon">
									<image :src="ite.icon"></image>
									<view class="val" :style="{color:ite.color}">{{ite.proportion_fp||0}}%</view>
								</view>
								<view class="right-info">
									<view class="right-info-top">
										<text class="name">{{ite.name}}</text>
										<text class="">
											{{ite.today_intake||0}}/{{ite.suggestion||0}}g
										</text>
									</view>
									<view class="right-info-bottom">
										<view class="val" :style="{ width: ite.proportion + '%',background:ite.color}">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="mubiao">
							{{$t("expendKcal")}}：<text class="bold">{{foodInfo.exercise_kcal}}</text>kcal
						</view>
						<view class="mubiao">
							{{$t("target")}}：<text class="bold">{{foodInfo.nutrients_four[0].suggestion}}</text>kcal
						</view>
					</view>
				</view>
				<!-- 早午晚餐 -->
				<view class="foodtools">
					<view class="type" v-for="(item,index) in foodInfo.list">
						<view class="title" @click="handledetail(index)">
							<view class="text">
								<image :src="item.icon"></image>
								<view>{{item.name}}</view>
								<text>{{item.val}}{{item.unit}}</text>
							</view>
							<view class="detail">
								{{$t("titleEveryMeal")}}
								<uni-icons type="forward" size="20" color="#999"></uni-icons>
							</view>
						</view>
						<view class="list">
							<uni-swipe-action>
								<uni-swipe-action-item v-for="(ite,ind) in item.list" :key="ind"
									:right-options="actionOptions" @click="delAcitionItem(ite)">
									<view class="item" @click="showFoodDetail(ite)">
										<image :src="ite.pic_url" mode="aspectFill"></image>
										<view class="weight">
											<view>{{ite.name}}</view>
											<view class="size12 c999">{{ite.weight}}<text>|</text>{{ite.val}}kcal</view>
										</view>
									</view>
								</uni-swipe-action-item>
							</uni-swipe-action>
							<view class="add" @click="handleAddFood(item.name)">
								<text>+</text>{{$t("countAddFood")}}
							</view>
						</view>
					</view>
				</view>
				<!-- 营养分析 -->
				<view class="fenxi" @click="navTo('/Food/count/everyDay?page=count')">
					<image src="/static/fenxi.png"></image>
					{{$t("titleeveryDay")}}
				</view>
				<!-- 搜索 -->
				<!-- <view class="serachBox ">
					<view class="title">
						<view class="quan mr-5"></view>{{$t("teach")}}
					</view>
					<view class="searchInput box_shadow">
						<div class="search-wrap" @click="navTo('/Food/search/search')">
							<text>{{$t("SearchRecipes")}}</text>
							<image src="/static/28.png"></image>
						</div>
					</view>
				</view> -->
			</view>
			<!-- m没有成员时先添加成员 -->
			<view class="nolist" v-else @click="handleEditUser()">
				<image src="/static/none.png"></image>
				<text>{{$t("msgAddUser")}}</text>
			</view>
		</view>

		<!-- 营养含量分析 -->
		<view v-if="drawerVisible" class="drawerVisible">
			<view class="bgVisible" @click="handleDrawerClose"></view>
			<view class="infoVisible">
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="foodDetail">
						<view class="foodInfo">
							<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
							<view class="info">
								<view class="name">{{activeFoodDetail.name}}</view>
								<view class="kcal">{{activeFoodDetail.val}}kcal</view>
							</view>
						</view>
						<view class="foodContent">
							<view class="title">{{$t("CaloriesAndnutrients")}}</view>
							<view class="progress">
								<div class="chart-wrap" v-if="chartVisible">
									<qiun-data-charts type="ring" :opts="opts" :chartData="chartData2" :cHeight="280"
										:cWidth="280" :canvas2d="true" canvasId="foodCharts02" />
								</div>
								<view class="info" v-if="activeFoodDetail.nutrients_four">
									<view class="info-item"
										v-for="(item,index) in activeFoodDetail.nutrients_four.slice(1)" :key="index">
										<view class="color" :style="{'background-color':`${item.color}`}">
										</view>
										<view>{{item.name}}：{{item.proportion}}%</view>
									</view>
								</view>
							</view>
							<view class="tips">
								<text>{{$t("Nutrients")}}</text>
								<text>{{activeFoodDetail.weight}}{{$t("Content")}}</text>
							</view>
							<view class="foodDetailList">
								<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list"
									:key="index">
									<view class="name">{{item.name_ch}}</view>
									<view class="value">{{item.value}}{{item.unit}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="f_banner footbox" v-if="configInfo.bannerFoot.length">
			<swiper class="swiper" circular="true">
				<swiper-item v-for="(ite,index) in configInfo.bannerFoot" @click="$tools.NewsPtype(ite)">
					<image :src="ite.pic" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import blueTooth from "@/components/foodIndex/bluetooth_food.vue"
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		name: "food",
		data() {
			return {
				btnType: 1,
				token: "",
				index: 0,
				opts: {
					background: "transparent",
					title: {
						name: "",
					},
				},
				chartData: {
					series: [{
						data: 0,
						color: "#3CB383"
					}]
				},
				data: '',
				isBle: false,
				handTrue: false,
				chartData2: {},
				activeFoodDetail: {},
				drawerVisible: false,
				chartVisible: false, // 单独控制图表显示
				actionOptions: [{
					text: this.$t("btnDelete"),
					style: {
						backgroundColor: '#dd524d',
						borderRadius: '10rpx'
					}
				}]
			};
		},
		components: {
			blueTooth,
			qiunDataCharts
		},
		computed: {
			...mapState(["configInfo", "user", "familayList", "countFoodInfo", "bleValue"]),
			info() {
				return this.user
			},
			userList() {
				return this.familayList
			},
			kcalVal() {
				return this.configInfo.kcal_data
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			foodInfo() {
				let that = this
				that.$nextTick(() => {
					that.isBle = true
					that.chartData.series[0].data = that.user.aud_id ? Number(that.countFoodInfo.nutrients_four[0]
						.proportion) / 100 : 0
				})
				that.data = that.user.aud_id ? that.countFoodInfo.date : that.$tools.getDate("start")
				return that.user.aud_id ? that.countFoodInfo : that.configInfo.default_count_foot
			}
		},
		onLoad() {
			let that = this
			uni.setNavigationBarTitle({
				title: this.$t('titleDiet'),
			})
		},
		onShow() {
			let that = this
			that.token = uni.getStorageSync('token')
		},
		onPullDownRefresh() {
			let that = this
			that.$store.dispatch("getCountFoodInfo", {
				aud_id: that.user.aud_id,
				time: that.tools.getDate("start")
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			// 详情
			showFoodDetail(item) {
				console.log("item", item)
				let that = this
				let chart_data = []
				that.drawerVisible = true;
				that.opts.color = []
				that.activeFoodDetail = item
				for (let i = 1; i < item.nutrients_four.length; ++i) {
					that.opts.color.push(item.nutrients_four[i].color)
					chart_data.push({
						name: item.nutrients_four[i].name,
						value: Number(item.nutrients_four[i].proportion),
					})
				}
				that.opts.title.name = that.activeFoodDetail.val
				that.chartData2 = JSON.parse(JSON.stringify({
					series: [{
						data: chart_data
					}]
				}));
				that.$nextTick(() => {
					// 延迟显示图表，确保容器已渲染
					setTimeout(() => {
						that.chartVisible = true
					}, 100)
				})
			},
			// 餐食详情
			handledetail(index) {
				uni.navigateTo({
					url: "/Food/count/everyMeal?index=" + index
				})
			},
			// 设置
			handleSet() {
				uni.navigateTo({
					url: "/Food/count/setting"
				})
			},
			changeClickDate(e) {
				this.data = e.detail.value
				this.$store.dispatch("getCountFoodInfo", {
					aud_id: this.info.aud_id,
					time: e.detail.value
				})
			},
			// 添加食物
			handleAddFood(name) {
				this.isShow = false
				uni.navigateTo({
					url: "/Food/count/search?name=" + name + "&time=" + this.date
				})
			},
			// 功能页面跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 完善资料
			handleEditUser() {
				uni.navigateTo({
					url: "/body/my/userInfo"
				})
			},
			handleDrawerClose() {
				// 先隐藏图表，再隐藏抽屉
				this.chartVisible = false
				this.drawerVisible = false;
			},
			// 删除食材
			delAcitionItem(item) {
				let that = this
				uni.showModal({
					content: that.$t("WhetherTodelete") + item.name + '？',
					cancelText: that.$t("btnSancellation"), //取消按钮文字
					confirmText: that.$t("btnConfirm"), //确认按钮文字
					success: (res) => {
						if (res.confirm) {
							this.$model.delCEatAction({
								aud_id: that.info.aud_id,
								eat_log_id: item.id
							}).then(res => {
								// 删除最新一天食物
								if (that.foodInfo.date == that.info.food_count.date) {
									that.$store.dispatch("getUserInfoFood")
								} else {
									that.$store.dispatch("getCountFoodInfo", {
										aud_id: that.info.aud_id,
										time: that.foodInfo.date
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_box {
		width: 100%;
		margin: 15px 0;
	}

	.serachBox {
		position: initial;
		margin-bottom: 10px;
		height: auto;
		overflow: hidden;

		.searchInput {
			background: #fff;
			padding: 10px;
			width: calc(100% - 20px);
			position: initial;
			margin: 10px 0;
			border-radius: 10px;
		}
	}

	.data {
		width: 100%;
		background: #fff;
		height: 90rpx;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
		margin: 10px;
		width: calc(100% - 20px);
		border-radius: 10px;
		margin-top: 0;

		picker {
			display: flex;
			width: 100%;
			height: 90rpx;
			position: relative;
			align-items: center;
			justify-content: center;
			font-weight: bold;

			view {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				bottom: 0;
				align-items: center;
				justify-content: center;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10px;
			}
		}

	}

	.blue-tooth {
		padding: 10px;
		background: #fff;
		border-radius: 10px;
		margin: 0 10px;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
	}

	.foodtools {
		margin-top: 30rpx;

		.type {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 0 20rpx 20rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					width: 50%;
					display: flex;
					align-items: center;

					view {
						font-size: 32rpx;
						font-weight: bold;
						margin: 0 20rpx;
					}
				}

				.detail {
					color: #999;
					display: flex;
					font-size: 24rpx;
					align-items: center;
				}
			}

			.list {
				width: 100%;
				margin-top: 30rpx;

				.item {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1px solid #f7f7f7;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						border: 1px solid #f7f7f7;
					}

					.weight {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						text {
							margin: 0 20rpx;
							color: #dfdfdf;
						}
					}

				}
			}

			.add {
				width: 100%;
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}

	.bottom {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		font-size: 28rpx;

		text {
			color: $maincolor;
			margin: 0 5px;
		}
	}

	.charts-box {
		width: 270rpx;
		height: 270rpx;
	}
</style>