<!--
 * @Description:
 * @Author: Aimee·Zhang
 * @Date: 2022-01-10 10:29:17
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-12 14:29:12
-->

<template>
	<view class="info">
		<!-- 进度 -->
		<view class="plan">
			<view class="plan-1">
				<span>基本信息</span> <u-line-progress :percentage="percentplan1" activeColor="#34ce98" class="line-progress" :showText="false" />
			</view>
			<view class="plan-2">
				<span>健康目标</span> <u-line-progress :percentage="percentplan2" activeColor="#34ce98" width="200rpx" class="line-progress" :showText="false" />
			</view>
			<view class="plan-3">
				<span>行为习惯</span> <u-line-progress :percentage="percentplan3" activeColor="#34ce98" width="200rpx" class="line-progress" :showText="false" />
			</view>
		</view>
		
		<!-- 进度1 基本信息 -->
		<block>
			<!-- 进度1 基本信息页面展示 性别 -->
			<view class="plan-content" v-if="sexShow">
				<view class="info-des">生理性别和激素会影响我们的身体代谢食物的方式</view>
				<view class="info-title">您的性别是？</view>
				<view class="sex">
					<view class="sex-item" @click="clickSex(1)">
						<u-image class="sex-item-avatar" width="150rpx" height="150rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
						男性
					</view>
					<view class="sex-item" @click="clickSex(2)">
						<u-image class="sex-item-avatar" width="150rpx" height="150rpx" :src="require('../../static/imgs/avatar-0.png')" :lazy-load="true" shape="circle" />
						女性
					</view>
				</view>
			</view>
			<!-- 进度1 基本信息页面展示 年龄 -->
			<view class="plan-content" v-if="birthdayShow">
				<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
				<view class="age">
					<view class="info-title">你的出生日期是？</view>
					<view class="year" @change="dateShow = true">{{ showBirthday }}</view>
					<u-datetime-picker confirmColor="#34ce98" ref="datetimePicker" v-model="birthday" mode="date" :show="dateShow" :formatter="formatter" :minDate="-302688000" :maxDate="maxDate" :closeOnClickOverlay="true" @confirm="confirmBirthday" @cancel="camcelBirthday" />
				</view>
			</view>

			<!-- 进度1 基本信息页面展示 身高体重 -->
			<view class="plan-content weight-content" v-if="heightWeightShow">
				<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
				<view class="info-des">身高体重信息对健康信息有重要参考价值</view>
				<view class="info-title">您的身高是？</view>
				<view class="weight">
					<view class="count"><span>{{ heightU }}</span>厘米</view>
					<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollHeight" :scrollLeft="Number(heightU)" />
				</view>
				<view class="info-title">您的体重是？</view>
				<view class="weight">
					<view class="count"><span>{{ weightU }}</span>公斤	</view>
					<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollWeight" :scrollLeft="Number(weightU)" />
				</view>

				<view class="pre-next">
					<view class="pro" @click="weightClick(1)">上一步</view>
					<view class="next" @click="weightClick(2)">下一步</view>
				</view>
			</view>
		</block>
		
		<!-- 进度2 健康目标 -->
		<block>
			<!-- 减脂类型 -->
			<view v-if="targetShow" class="plan-content target-content">
				<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
				<view class="info-title">您的目标是？</view>
				<view class="target-type">
					<view class="target-type-item"> <u-image class="target-img" width="160rpx" height="160rpx" @click="activedTarget = '1'" :src="activedTarget === '1' ? require('../../static/imgs/ic-w-s.png') : require('../../static/imgs/ic-w-n.png')" :lazy-load="true" shape="circle" /> 减肥 </view>
					<view class="target-type-item"> <u-image class="target-img" width="160rpx" height="160rpx" @click="activedTarget = '2'" :src="activedTarget === '2' ? require('../../static/imgs/ic-b-s.png') : require('../../static/imgs/ic-b-n.png')" :lazy-load="true" shape="circle" /> 保持体重 </view>
					<view class="target-type-item"> <u-image class="target-img" width="160rpx" height="160rpx" @click="activedTarget = '3'" :src="activedTarget === '3' ? require('../../static/imgs/ic-m-s.png') : require('../../static/imgs/ic-m-n.png')" :lazy-load="true" shape="circle" /> 增肌 </view>
				</view>
				<view class="pre-next">
					<view class="pro" @click="targetClick(1)">上一步</view>
					<view class="next" @click="targetClick(2)">下一步</view>
				</view>
			</view>
			<!-- 减脂体重 -->
			<view v-if="targetWeightShow" class="plan-content target-content">
				<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
				<view class="info-title">您的打算减脂多少？</view>
				<view class="target-type">
					<view class="target-type-item">
						<view class="count"> <span>{{ weightTargetU }}</span> 公斤 </view>
						<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollTargetWeight" :scrollLeft="Number(weightTargetU)" />
					</view>
				</view>
				<view class="pre-next">
					<view class="pro" @click="targetWeightClick(1)">上一步</view>
					<view class="next" @click="targetWeightClick(2)">下一步</view>
				</view>
			</view>
		</block>

		<!-- 进度3 行为习惯 -->
		<!-- 减脂类型 -->
		<view v-if="behaviorShow" class="plan-content target-content">
			<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
			<view class="info-title">您的运动量是？</view>
			<view class="target-type">
				<view class="target-type-item">
					<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '1'" :src="activedbehaviarTarget === '1' ? require('../../static/imgs/ic-w-01.png') : require('../../static/imgs/ic-w-02.png')" :lazy-load="true" shape="circle" />
					久坐不动
				</view>
				<view class="target-type-item">
					<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '2'" :src="activedbehaviarTarget === '2' ? require('../../static/imgs/ic-w-03.png') : require('../../static/imgs/ic-w-04.png')" :lazy-load="true" shape="circle" />
					少量运动
				</view>
				<view class="target-type-item">
					<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '3'" :src="activedbehaviarTarget === '3' ? require('../../static/imgs/ic-w-05.png') : require('../../static/imgs/ic-w-06.png')" :lazy-load="true" shape="circle" />
					中等运动量
				</view>
				<view class="target-type-item">
					<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '4'" :src="activedbehaviarTarget === '4' ? require('../../static/imgs/ic-w-07.png') : require('../../static/imgs/ic-w-08.png')" :lazy-load="true" shape="circle" />
					超强度运动
				</view>
			</view>
			<view class="pre-next">
				<view class="pro" @click="targetBehaviorClick(1)">上一步</view>
				<view class="next" @click="targetBehaviorClick(2)">立即创建</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import moment from 'moment';
import vueScale from '@/components/vueScale'; // 体重标尺
import { recordsHealth } from '@/apis/interfaces/essentialInfo.js';
export default {
	components: {
		vueScale
	},
	data() {
		return {
			// 第一部分基本信息 start
			//#region
			percentplan1: 0,
			// 性别--start
			sex: '1', //1是男生2是女生
			sexShow: true, // 性别展示
			// 性别 -- end
			// 年龄 -- start
			birthday: new Date().getTime(), // 年龄默认是当前时间
			maxDate: new Date().getTime(), // 最大年龄为当前年月日
			dateShow: false, // 显示日期
			birthdayShow: false, // 显示年龄模块是否显示
			// 年龄 -- end
			// 身高体重 -- start
			heightWeightShow: false, // 身高体重模块展示
			weight: 11,
			height: 180,
			styles: {
				line: '#dbdbdb',
				bginner: '#fbfbfb',
				bgoutside: '#ffffff',
				font: '#404040',
				fontColor: '#404040',
				fontSize: 16
			},
			weightU: 55, //体重
			heightU: 160, // 身高
			// 身高体重 -- end
			//#endregion
			// 第一部分基本信息 end
			// 第二部分
			//#region
			percentplan2: 0,
			targetShow: false, // 减脂目标模块 是否显示减脂类型
			activedTarget: '', // 减脂
			targetWeightShow: false, // 目标体重页面展示
			weightTargetU: 50,
			//#endregion
			behaviorShow: false, // 默认行为习惯页面不展示
			percentplan3: 0,
			activedbehaviarTarget: '' // 默认没有任何运动量
		};
	},
	computed: {
		showBirthday() {
			return moment(this.birthday).format('YYYY年MM月DD日');
		}
	},
	methods: {
		//性别----------- 选择性别 1男2女
		clickSex(sex) {
			this.percentplan1 = 0;
			this.sex = sex;
			this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33);
			this.sexShow = false;
			this.birthdayShow = true;
			this.dateShow = true;
		},

		// 年龄-------------确认选择了出生年月日
		confirmBirthday(e) {
			this.birthday = e.value;
			this.birthdayShow = false; // 年龄页面弹窗不显示
			this.dateShow = false; // 关闭时间弹窗
			this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33); // 增加进度
			this.heightWeightShow = true; // 展示身高体重模块
		},
        
		// 年龄 ----- 取消选择年龄
		camcelBirthday() {
			this.birthdayShow = false; // // 年龄页面弹窗不显示
			this.dataShow = false; // 关闭时间弹窗
			this.percentplan1 = 0; // 进度为0
			this.sexShow = true; // 显示性别页面
		},
        
		//年龄------------- 过滤出生年月日
		formatter(type, value) {
			if (type === 'year') {return `${value}年`;}
			if (type === 'month') {return `${value}月`;}
			if (type === 'day') {return `${value}日`;}
			return value;
		},
        
        
		// 体重---------标尺滚动
		scrollWeight(msg) {
			this.weightU = msg;
		},
		// 体重---------标尺滚动
		scrollHeight(msg) {
			this.heightU = msg;
		},
		// 体重 ------------ 点击  1 上一页 2 下一页
		weightClick(type) {
			if (type === 1) {
				this.percentplan1 = 33.33;
				this.heightWeightShow = false; // 关闭当前体重页面
				this.birthdayShow = true;
				this.dateShow = true;
			} else {
				this.percentplan1 = 100; // 第一个进度为100
				this.heightWeightShow = false; // 关闭当前体重页面
				this.targetShow = true; // 目标页面展示
			}
		},
        
        
		// 目标 ------------点击  1上一页 2 下一页
		targetClick(type) {
			if (type === 1) {
				this.percentplan1 = 66.66;
				this.heightWeightShow = true; // 打开体重身高页面
				this.targetShow = false; // 关闭目标页面 减重 塑性 增肌
				this.percentplan2 = 0;
			} else {
				if (this.activedTarget === '') {
					uni.showToast({
						title: '请选择目标',
						icon: 'none'
					});
					return;
				}
				this.percentplan2 = 50;
				this.targetShow = false; // 目标页面不展示 展示下一面目标体重
				this.targetWeightShow = true; // 目标体重页面展示
			}
		},
		//目标体重-------------标尺滚动
		scrollTargetWeight(msg) {
			this.weightTargetU = msg;
		},
		// 目标 体重的 --------- 1上一页 2 下一页
		targetWeightClick(type) {
			if (type === 1) {
				this.percentplan2 = 0;
				this.targetShow = true; // 打开目标页面 减重 塑性 增肌
				this.targetWeightShow = false; // 打开体重身高页面
			} else {
				this.percentplan2 = 100;
				this.targetWeightShow = false; // 隐藏目标体重页面
				this.behaviorShow = true; // 打开行为习惯页面
			}
		},
        
        
		// 目标  运动量--------- 1上一页 2 下一页
		targetBehaviorClick(type) {
			if (type === 1) {
				this.percentplan2 = 50;
				this.targetWeightShow = true; // 目标体重页面展示
				this.behaviorShow = false; // 关闭运动量选择页面
			} else {
				if (this.activedbehaviarTarget === '') {
					uni.showToast({
						title: '请选择运动量',
						icon: 'none'
					});
					return;
				}
				let params = {
					sex: this.sex, // 性别
					birthday: moment(this.birthday).format('YYYY-MM-DD'), // 年龄
					weight: this.weightU, // 体重
					height: this.heightU, // 身高
					goal_weight: this.weightTargetU, // 目标体重
					exercise: this.activedbehaviarTarget, // 运动量
					days: 1
				};
				recordsHealth(params)
					.then(res => {
						uni.showModal({
							title: '提示',
							content: '创建成功',
							showCancel: false,
							success: ModalRes => {
								this.percentplan3 = 100;
								this.behaviorShow = false; // 关闭运动量页面
								uni.navigateBack({});
							}
						});
					})
					.catch(err => {
					    uni.showToast({
					        title: err.message,
					        icon: "none",
					        duration: 2000,
					        mask: true
					    })
					});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.info {
	// 完善信息顶部进度条
	.plan {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		font-size: $title-size-m;
		color: $text-color;
		padding: $padding;
		.plan-3,
		.plan-1,
		.plan-2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			span {
				padding-bottom: $padding * 0.6;
			}
		}
		.plan-2 {
			margin: $margin;
		}
		.line-progress {
			width: 180rpx;
		}
	}

	//展示主要内容部分
	.plan-content {
		width: 100%;
		min-height: 70vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		.info-title {
			font-size: $title-size + 10;
			font-weight: bold;
			margin-top: $margin - 10;
		}
		.info-des {
			font-size: $title-size-m;
			color: $text-gray;
			margin-top: $margin;
		}
		// 性别
		.sex {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			.sex-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				margin-top: $margin * 3;
				.sex-item-avatar {
					box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
					border-radius: 50%;
				}
			}
		}
		//年龄
		.age {
			padding-top: $padding * 0.6;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			.year {
				font-size: $title-size * 1.9;
				font-weight: bold;
				color: $main-color;
				margin-top: $margin;
			}
		}
		// 体重
	}
	// 体重身高模块展示
	.count {
		color: $main-color;
		text-align: center;
		margin-top: $margin * 2;
		margin-bottom: $margin * 0.1;
		font-size: $title-size + 2;
		span {
			font-weight: bold;
			font-size: $title-size * 2.2;
			margin-right: $margin * 0.3;
		}
	}
	.pre-next {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		margin-top: $margin * 2;
		view {
			background-color: rgba($color: $main-color, $alpha: 0.5);
			color: white;
			font-size: $title-size;
			font-weight: bold;
			padding: $padding * 0.6 $padding * 3;
			border-radius: 10rpx;
			margin: $margin;
		}
		.next {
			background-color: $main-color;
		}
	}

	// 健康目标模块展示
	.target-content {
		.target-type {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			margin-top: $margin * 2;
			flex-wrap: wrap;
			.target-type-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				font-size: $title-size-m;
				color: $text-gray-m;
				.target-img {
					background: #ececec;
					border-radius: $radius;
					margin: $margin $margin * 0.8;
				}
			}
		}
	}
}
</style>
