<template>
	<view class="content">
		<!-- 个人资料 -->
		<view v-if="token" class="content-box">
			<view class="box" v-if="info.aud_id">
				<view class="header">
					<image :src="info.head_pic"></image>
				</view>
				<view class="info" @click="handleUserEdit">
					<view class="name">
						<text>{{info.nickname}}</text>
						<text>{{info.gender=='1'?'男':'女'}}</text>
						<image src="/static/26.png"></image>
					</view>
					<view class="age">
						<view>{{info.age}}岁</view>
						<view>{{info.weight}}kg</view>
						<view>{{info.height}}cm</view>
					</view>
				</view>
			</view>
			<view class="box1 box" v-else @click="handleUserEdit">
				<view class="info2">
					完善资料后，记录更准确哦！
				</view>
			</view>
			<image src="/static/0.png" class="headerbgimg"></image>
		</view>
		<view class="box1 box" v-if="!token" @click="handleLogin">
			<view class="info2">
				未登录，点击登录
			</view>
			<image src="/static/0.png" class="headerbgimg"></image>
		</view>
		<!-- 计食器 -->
		<view class="jishiqi">
			<view class="left">
				<view class="time">
					<view class="quan"></view>
					<text v-if="today_intake.time">{{today_intake.time}}</text>
				</view>
				<view class="chart">
					<!-- <qiun-data-charts type="arcbar" :chartData="chartData" :canvas2d="true" :cHeight="300" :cWidth="300"
						canvasId="arcbar008" /> -->
					<view class="center">
						<view>{{today_intake.title}}</view>
						<view class="number">{{today_intake.kcal.value||0}}</view>
						<view>Kcal</view>
						<view>
							<text :style="{'backgroundColor':today_intake.kcal.color}"></text>
							{{today_intake.kcal.standard||''}}
						</view>
					</view>
				</view>
			</view>
			<view class="right" @click="handleNavTo(today_intake.time)">
				<view class="detail">查看详情></view>
				<view>
					<text>碳水</text>
					<text>{{today_intake.other_elements.carbohydrate.value||0}}g</text>
				</view>
				<view>
					<text>脂肪</text>
					<text>{{today_intake.other_elements.fat.value||0}}g</text>
				</view>
				<view>
					<text>蛋白质</text>
					<text>{{today_intake.other_elements.protein.value||0}}g</text>
				</view>
			</view>
		</view>
		<!-- 早午餐 -->
		<view class="tools">
			<view class="tools-item" v-for="(ite,ind) in today_intake.list">
				<view class="title">
					<image :src="ite.icon"></image>
					<text>{{ite.title}}</text>
				</view>
				<view class="kcal">
					<text>{{ite.value?ite.value:0}}</text>kcal
				</view>
				<view class="tools-btn" @click="handleListDetail(ite)">摄入</view>
				<view class="add" @click="handleAddFood(ind,ite.title)">+</view>
				<image :src="ite.bgimg" class="bgimg"></image>
			</view>
		</view>

		<!-- 搜索 -->
		<view class="serachBox">
			<view class="title">
				<view class="quan"></view>教你做
			</view>
			<view class="searchInput">
				<div class="search-wrap" @click="handleSearch">
					<text>输入食材快速搜索菜谱</text>
					<image src="/static/28.png"></image>
				</div>
			</view>
		</view>

		<!-- 轮播 -->
		<view class="f_banner footbox" v-if="configInfo.banner_data.length">
			<swiper class="swiper" circular="true">
				<swiper-item v-for="(ite,index) in configInfo.banner_data" @click="$tools.NewsPtype(ite)">
					<image :src="ite.pic" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 加餐 -->
		<view class="wrapper activeList" v-if="isShow">
			<view class="bg" @click='isShow=false'>
				<view class="addfood" @click.stop>
					<icon class="iconfont icon-error" @click='isShow=false'></icon>
					<view class="list">
						<view class="item" v-for="(ite,ind) in addfoodList" :key="ind"
							@click="handleAddFood(ite.id,ite.name)">
							<text class="name">{{ite.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 摄入列表 -->
		<view class="wrapper activeList2" v-if="isFoodList">
			<view class="bg" @click='isFoodList=false'>
				<view class="addfood2" @click.stop>
					<view class="title">
						<text>{{ListDetail.title}}</text>
						<text>{{ListDetail.content.time}}</text>
					</view>
					<view class="foodbox">
						<view class="foodbox-list" v-for="(it,id) in ListDetail.content.list">
							<text>{{it.name}}</text>
							<text>{{it.weight}}</text>
							<text>{{it.kcal}}</text>
							<text>{{it.time}}</text>
						</view>
					</view>
					<view class="groupbtn">
						<view @click="handleNavTo(today_intake.time)">更多详情</view>
						<view @click='isFoodList=false'>取消</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
	export default {
		data() {
			return {
				token: "",
				isShow: false,
				isFoodList: false,
				// today_intake: {
				// 	kcal: {},
				// 	list: [],
				// 	time: "",
				// 	title: "",
				// 	other_elements: {}
				// },
				chartData: {
					series: [{
						data: 1,
						color: "#ff4c4f"
					}]
				},
				ListDetail: {
					title: "",
					value: "",
					unit: "",
					content: {
						time: '',
						list: []
					}
				},
				addfoodList: [],
			}
		},
		components: {
			qiunDataCharts
		},
		computed: {
			...mapState(["configInfo", "user", "countFoodInfo"]),
			info() {
				return this.user
			},
			kcalVal() {
				return this.configInfo.kcal_data
			},
			today_intake() {
				return this.countFoodInfo.home_food_count.kcal_data
			}
		},
		onLoad() {
			let that = this
			that.addfoodList = that.$json.addfoodList
			that.token = uni.getStorageSync('token')
			that.$store.dispatch("getHomeConfig")
		},
		onPullDownRefresh() {
			let that = this
			that.index = 0
			that.footlist = []
			that.$store.dispatch("getHomeConfig")
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			//配置接口
			handleHomeConfig() {
				let that = this
				that.$model.getHomeConfig({}).then(res => {
					if (res.code != 0) return
					that.handleHomeUserInfo()
					that.$store.commit('changeConfig', res.data)
				})
			},
			// 获取账号信息
			handleHomeUserInfo() {
				let that = this
				that.$model.getHomeUserInfo({}).then(res => {
					if (res.code != 0) {
						that.$store.commit('changeUserInfo', {})
						console.log("11111")
						return
					}
					that.$store.commit('changeUserInfo', res.data)
					that.handleCountFoodInfo()
				})
			},
			// 计食器信息
			handleCountFoodInfo() {
				let that = this
				that.$model.getCountFoodInfo({
					aud_id: that.info.aud_id,
					time: that.$tools.getDate("start")
				}).then(res => {
					if (res.code != 0) return
					that.today_intake = res.data.home_food_count.kcal_data
				})
			},

			// 搜索
			handleSearch() {
				uni.switchTab({
					url: '/pages/search/search'
				})
			},
			// 登录
			handleLogin() {
				uni.reLaunch({
					url: "/pageTwo/login/login"
				})
			},
			//个人资料
			handleUserEdit() {
				uni.navigateTo({
					url: '/pageTwo/me/userEdit'
				})
			},
			// 计食器详情
			handleNavTo(time) {
				this.isShow = false
				uni.setStorageSync("startDay", time)
				uni.switchTab({
					url: "/pages/count/count"
				})
			},
			// 添加食物
			handleAddFood(ind, name) {
				this.isShow = false
				if (ind != 3) {
					uni.navigateTo({
						url: "/pageTwo/count/search?name=" + name + '&ind=' + ind
					})
				} else {
					this.isShow = true
				}

			},
			// 计食器列表详情
			handleListDetail(item) {
				let that = this
				console.log("item", item)
				if (item.content.list.length) {
					that.isFoodList = true
					that.ListDetail = item
				} else {
					that.$tools.msg("暂无摄入，快去添加吧")
				}
			},

			// 功能页面跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
				uni.switchTab({
					url
				})
			},
		}
	}
</script>

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

	.headerbgimg {
		position: absolute;
		width: 200px;
		height: 180px;
		top: 0;
		right: -15%;
	}

	.size22 {
		margin-bottom: 15px;
	}

	.content-box {
		width: 100%;
		position: relative;
		overflow: hidden;

	}

	.box {
		width: calc(100% - 40rpx);
		background: $maincolor;
		display: flex;
		padding: 30rpx 20rpx;
		padding-bottom: 220rpx;
		align-items: center;
		overflow: hidden;



		.header {
			width: 120rpx;
			height: 120rpx;
			margin-right: 30rpx;
			border: 1px solid #fff;
			border-radius: 50%;
			background-color: #dfdfdf;

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

		.info {
			color: #fff;
			position: absolute;
			left: 170rpx;
			right: 30rpx;
			z-index: 999;

			.name {
				width: 100%;
				display: flex;
				font-size: 32rpx;

				:nth-child(1) {
					margin-right: 30rpx;
					max-width: 70%;
					font-weight: bold;
				}

				text {
					margin-right: 30rpx;
				}

				image {
					width: 50rpx;
					height: 40rpx;
				}
			}

			.age {
				margin-top: 30rpx;

				view {
					background: #F5D2A4;
					border-radius: 5px;
					width: 75px;
					text-align: center;
					float: left;
					padding: 5px 0;
					margin-right: 10px;
				}
			}
		}

	}

	.box1 {
		.header {
			width: 100rpx;
			height: 100rpx;
			background: #fff;
			text-align: center;
			line-height: 100rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}

		.info2 {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.jishiqi {
		width: calc(100% - 60rpx);
		background: #fff;
		margin: auto 30rpx;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
		margin-top: -180rpx;
		border-radius: 20rpx;
		position: relative;

		.left {
			width: 55%;
			float: left;
			height: auto;
			background: #ebf7f5;
			padding-bottom: 15px;
			box-shadow: 0px 1px 5px 2px #dfe2e1fc;
			border-radius: 20rpx 0 0 20rpx;

			.time {
				width: 90%;
				margin: 20rpx;
				display: flex;
				align-items: center;
			}

			.chart {
				width: 320rpx;
				height: 320rpx;
				border-radius: 50%;
				background: $maincolor;
				border: 5px solid #9CDCBF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: auto;
			}

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

				.number {
					width: 100%;
					text-align: center;
					display: inline-block;
					font-size: 48rpx;
					font-weight: bold;
				}

				view {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;

					text {
						width: 12px;
						height: 12px;
						border-radius: 50%;
						display: inline-block;
						margin-right: 5px;
					}
				}
			}
		}

		.right {
			width: calc(45% - 60rpx);
			float: left;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 140px;
			margin: 40rpx 30rpx 0;

			view {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
			}

			.detail {
				text-align: center;
				justify-content: center;
				color: #fff;
				background: #F7931E;
				border-radius: 20rpx;
				padding: 6rpx 0;
			}
		}
	}

	.tools {
		margin: 30rpx 30rpx 0;
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 60rpx);
		justify-content: space-between;

		.tools-item {
			width: 42%;
			background: #fff;
			position: relative;
			padding: 20rpx;
			height: 96px;
			overflow: hidden;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0px 1px 5px 2px #dfe2e1fc;

			.title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				position: absolute;
				z-index: 99;
				width: 100%;
				top: 10px;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 5px;
				}
			}

			.kcal {
				text-align: center;
				position: absolute;
				top: 30%;
				left: 0;
				right: 0;

				text {
					font-size: 56rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}
			}

			.tools-btn {
				border: 1px solid $maincolor;
				text-align: center;
				border-radius: 20rpx;
				width: 60%;
				margin-left: 20%;
				margin-top: 10rpx;
				color: $maincolor;
				position: absolute;
				bottom: 10px;
				z-index: 99;
				padding: 3px 0;
			}

			.add {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				background: $maincolor;
				border-radius: 50%;
				text-align: center;
				color: #fff;
				font-size: 36rpx;
				line-height: 48rpx;
				font-weight: bold;
				z-index: 999;
			}

			.bgimg {
				width: 180rpx;
				height: 180rpx;
				position: absolute;
				top: 20rpx;
				right: -50rpx;
			}
		}
	}

	.serachBox {
		width: calc(100% - 60rpx);

		.title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.searchInput {
			width: calc(100% - 60rpx);
			background-color: #f7f7f7;
			padding: 30rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
		}

		.search-wrap {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border: 1px solid $maincolor;
			border-radius: 30rpx;
			padding: 0 20rpx;
			background: #fff;

			image {
				width: 25px;
				height: 25px;
			}
		}
	}

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

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

		.list {
			padding-bottom: 0px;

			.item {
				height: 40px;
				line-height: 40px;
				border-bottom: none;
			}

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

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

	.addfood2 {
		top: 20%;
		left: 20px;
		right: 20px;
		position: absolute;
		border-radius: 10px;
		background: #fff;
		max-height: 720rpx;
		min-height: 400rpx;


		.title {
			color: $maincolor;
			display: flex;
			justify-content: space-between;
			width: calc(100% - 60rpx);
			font-weight: bold;
			font-size: 16px;
			margin-top: 15px;
			margin-left: 30rpx;
		}

		.foodbox {
			margin: 15px;

			.foodbox-list {
				height: 45px;
				line-height: 45px;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #dfdfdf;

				:nth-child(1) {
					font-size: 15px;
					font-weight: bold;
				}
			}
		}

		.groupbtn {
			position: absolute;
			bottom: 15px;
			display: flex;
			justify-content: space-between;
			margin: auto;
			left: 15px;
			right: 15px;

			view {
				width: 100px;
				padding: 5px 0;
				text-align: center;
				background: #dfdfdf;
				border-radius: 10px;
			}

			:nth-child(1) {
				color: #fff;
				background-color: $maincolor;
			}
		}
	}

	.f_banner {
		width: 100% !important;
		height: 450rpx;
		margin: 15px auto;

		/deep/swiper {
			height: 450rpx;
		}

		image {
			width: 100%;
			height: 100%;
			background-size: 100%;
			position: relative;
		}
	}
</style>