<template>
	<view class="content">
		<view class="content_box">
			<view class="set">
				<view class="date">{{foodInfo.date}}</view>
			</view>
			<view class="box">
				<view class="kcal2">
					<view class="top">
						<view class="left ">
							<view class="center">
								可以吃
								<text>{{foodInfo.remaining_kcal}}</text>
								<view class="unit">Kcal</view>
							</view>
						</view>
						<view class="right">
							<view class="item border-bottom">
								<text class="name">已摄入</text>
								<text class="bold">
									{{foodInfo.today_intake.kcal}}千卡
								</text>
							</view>
							<view class="item">
								<text class="name">碳水</text>
								<text class="bold">
									{{foodInfo.today_intake.carbohydrate}}/{{foodInfo.suggestion.carbohydrate}}
								</text>
							</view>
							<view class="item">
								<text class="name">脂肪</text>
								<text class="bold">
									{{foodInfo.today_intake.fat}}/{{foodInfo.suggestion.fat}}
								</text>
							</view>
							<view class="item">
								<text class="name">蛋白</text>
								<text class="bold">
									{{foodInfo.today_intake.protein}}/{{foodInfo.suggestion.protein}}
								</text>
							</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="tabbar-box">
					<view class="list" v-if="foodInfo.list.length">
						<view class="listbox" v-for="(ite,ind) in foodInfo.list" :key="ind">
							<view class="left">
								<view class="title">{{ite.name}}</view>
								<view class="kcalval">
									<text>{{ite.val}}</text>{{ite.unit}}
								</view>
							</view>
							<view class="right">
								<view class="item" @click="showFoodDetail(it)" v-for="(it,id) in ite.list">
									<image :src="it.pic_url" mode="aspectFill"></image>
									<text>{{it.name}}</text>
									<text>{{it.weight}}</text>
									<text>{{it.val}}千卡</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</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}}千卡</view>
							</view>
						</view>
						<view class="foodContent">
							<view class="title">热量和营养</view>
							<view class="progress">
								<div class="chart-wrap">
									<qiun-data-charts type="ring" :opts="opts" :canvas2d="true" v-if="chartVisible"
										canvasId="recordetailCharts" :chartData="chartData2" :cHeight="250"
										:cWidth="250" />
									<view class="uchart-kcal">{{activeFoodDetail.val}}</view>
								</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>营养素</text>
								<text>{{activeFoodDetail.weight}}含量</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>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let next = 0
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
	export default {
		data() {
			return {
				token: "",
				index: 0,
				drawerVisible: false,
				chartVisible: false, // 单独控制图表显示
				opts: {
					dataLabel: false,
					color: ["#5180D8", "#ED7886", "#FFB169"],
					background: "transparent",
					canvas: {
						background: "transparent"
					},
					legend: {
						show: false // 这个设置将隐藏图例
					},
					title: {
						name: "",
						fontSize: 20,
						offsetY: -3,
						color: "#333333"
					},
					subtitle: {
						name: "千卡",
						fontSize: 14,
						offsetY: 12,
						color: "#888888"
					},
					extra: {
						ring: {
							ringWidth: 10,
							labelWidth: 0,
							border: false,
							// customRadius: 50
						}
					}
				},
				isShow: false,
				chartData2: {},
				activeFoodDetail: {},
			}
		},
		components: {
			qiunDataCharts
		},
		computed: {
			...mapState(["user", "countFoodInfo"]),
			userinfo() {
				return this.user.aud_id
			},
			foodInfo() {
				return this.countFoodInfo
			}
		},
		onLoad(options) {
			let that = this
			that.$store.dispatch("getCountFoodInfo", {
				aud_id: that.user.aud_id,
				time: options.time
			})
		},
		methods: {
			// 详情
			showFoodDetail(item) {
				console.log("item", item)
				let chart_data = []
				this.activeFoodDetail = item
				this.$refs.showRight.open();
				this.opts.color = []
				for (let i = 1; i < item.nutrients_four.length; ++i) {
					this.opts.color.push(item.nutrients_four[i].color)
					chart_data.push({
						name: item.nutrients_four[i].name,
						value: Number(item.nutrients_four[i].proportion),
					})
				}
				this.chartData2 = JSON.parse(JSON.stringify({
					series: [{
						data: chart_data
					}]
				}));
				that.$nextTick(() => {
					// 延迟显示图表，确保容器已渲染
					setTimeout(() => {
						that.chartVisible = true
					}, 100)
				})
			},
			handleDrawerClose() {
				// 先隐藏图表，再隐藏抽屉
				this.chartVisible = false
				this.drawerVisible = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 20rpx;
		background-color: #fff;
	}

	.content_box {
		width: 100%;
	}

	.box {
		width: 100%;
	}

	.set {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 16px;
		font-weight: bold;

		.icon {
			background: #d1f2ed;
			border-radius: 50%;
			font-size: 56rpx;
			color: #66cccc;
			text-align: center;
			padding: 5px;
		}
	}

	.kcal2 {
		width: calc(100% - 40rpx);
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
		margin-top: 30rpx;
		background: #f3fffd;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		.left {
			width: 300rpx;
			height: 300rpx;
			position: relative;
			border-radius: 50%;
			background: #d1f2ed;
			border: 5px solid #66cccc;
			display: flex;
			justify-content: center;
			align-items: center;

			.center {
				position: absolute;
				text-align: center;
				width: 260rpx;
				height: 260rpx;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #fff;
				border-radius: 50%;

				text {
					display: inline-block;
					font-size: 22px;
					font-weight: bold;
					margin: 20rpx 0;
				}

			}
		}

		.right {
			position: absolute;
			left: 50%;
			bottom: 0;
			top: 0px;
			right: 0;
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx;
			border-radius: 0 20rpx 20rpx 0;
			justify-content: center;
			flex-direction: column;
			background: #d1f2ed;

			.item {
				display: flex;
				justify-content: space-between;
				height: 35px;
				line-height: 35px;
			}

			.border-bottom {
				border-bottom: 1px solid #dfdfdf;
			}
		}
	}

	.tools {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
		display: flex;
		margin-bottom: 30rpx;
		justify-content: space-between;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		.type {
			width: 20%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

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

			.text {
				width: 100%;
				text-align: center;
				display: flex;
				justify-content: center;
				font-weight: bold;

				icon {
					font-size: 14px;
				}
			}
		}
	}

	.list {
		width: 100%;
		padding-bottom: 100rpx;

		.listbox {
			width: calc(100% - 40rpx);
			padding: 20rpx;
			border-radius: 20rpx;
			margin: 30rpx 0px;
			box-shadow: 0px 1px 5px 2px #dfe2e1fc;
		}

		.left {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.title {
				font-size: 16px;
				font-weight: bold;
			}

			text {
				font-weight: bold;
				margin-right: 5px;
				margin-left: 30rpx;
			}

		}

		.right {
			background: #f3fffd;
			padding: 20rpx;
			border-radius: 20rpx;


			.item {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #f7f7f7;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 12rpx;
					margin-right: 10rpx;
				}

				:nth-child(2) {
					width: 40%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				:nth-child(3) {
					width: 20%;
					text-align: right;
				}

				:nth-child(4) {
					width: 26%;
					margin-right: 6rpx;
					text-align: right;
				}
			}
		}
	}

	.nolist {
		font-size: 24rpx;
		color: #999;
		padding: 60rpx 20rpx;
		text-align: center;
		width: auto;

		image {
			width: 100rpx;
			height: 100rpx;
			color: #999;
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
		}
	}


	.list2 {
		margin-top: 45%;

		.btn {
			color: #fff;
			height: 64rpx;
			line-height: 64rpx;
		}
	}

	.addfood {
		background-color: #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 20rpx 0 20rpx;
		border-radius: 20rpx 20rpx 0 0;

		.iconfont {
			position: absolute;
			right: 7px;
			top: -20rpx;
			background: #f7f7f7;
			border-radius: 50%;
			font-size: 60rpx;
		}

		.list {
			padding-bottom: 0px;

			.item {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: none;
			}

			.name {
				width: 100%;
				text-align: center;
			}

			:nth-child(2).item {
				border-bottom: 1px solid #dfdfdf;
				border-top: 1px solid #dfdfdf;
			}
		}
	}

	.foodDetail {
		background-color: #F7F7F7;
		padding: 20rpx;
		box-sizing: border-box;

		.foodInfo {
			display: flex;
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-sizing: 0 0 20rpx #f1f1f1;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 15rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 30rpx;

				.name {
					font-size: 28rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}

				.kcal {
					width: 100% !important;
					font-size: 24rpx;
					color: #666;
					padding: 0 !important;
					margin: 0 !important;
				}
			}
		}

		.foodContent {
			width: 100%;
			padding: 30rpx;
			margin-top: 16rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-sizing: 0 0 20rpx #f1f1f1;

			.title {
				font-size: 28rpx;
				font-weight: 600;
			}

			.progress {
				display: flex;
				align-items: center;

				.chart-wrap {
					position: relative;
					width: 250rpx;
					height: 250rpx;
					margin-top: -30rpx;

					.uchart-kcal {
						position: absolute;
						left: 60rpx;
						top: 120rpx;
						width: 130rpx;
						font-size: 40rpx;
						text-align: center;
						z-index: 9;
					}
				}

				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 24rpx;

					.info-item {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.color {
							width: 6rpx;
							height: 20rpx;
							margin-right: 10rpx;
							border-radius: 3rpx;
						}
					}
				}
			}

			.tips {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f1f1f1;
				padding: 16rpx 0;
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.foodDetailList {
				margin-top: 10rpx;

				.foodDetailItem {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					box-sizing: border-box;

					.name {
						font-size: 24rpx;
						color: #777;
					}

					.val {
						font-size: 24rpx;
						font-weight: 700;
						color: #333;
					}
				}
			}
		}
	}
</style>