<!--
 * @Description:喝水记录 ，记录当前的喝水情况
 * @Author: Aimee·Zhang
 * @Date: 2022-01-06 14:48:07
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-12 16:23:01
-->

<template>
	<view class="drink" v-if="loaded">
		<!-- 喝水及水杯文字 -->
		<view class="drink-content">
			<view class="title" v-if="!water.is_complete">
				再喝
				<span class="num">{{ water.lack.cup }}</span>
				杯
				<span class="total">（约{{ water.lack.value }}ml）</span>
			</view>
			<view class="title" v-if="water.is_complete">
				已喝
				<span class="num">{{ water.total }}ml</span>
				<u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true" mode="widthFix" width="140rpx" />
			</view>
			<!-- 水杯动态图片 -->
			<view class="wave-content">
				<u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true" mode="scaleToFill" width="320rpx" height="520rpx" />
				<view class="wave" :style="{ '--ballPercent': -ballPercent + 40 + '%' }"></view>
			</view>
			<!-- 目标 -->
			<view class="water-target">
				<view class="target-item" @click="targetShow = true">
					今日目标
					<u-icon
						class="target-icon"
						name="arrow-right"
						color="#666"
						size="14"
						:bold="true"
						:label="water.target + 'ml'"
						labelPos="left"
						labelSize="16"
						labelColor="#666"
						space="6"
					/>
				</view>
				<view class="target-item" @click="waterCShow = true">
					水杯容量
					<u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true" :label="water.ml + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
				</view>
			</view>
			<!-- 目标弹出层 -->
			<view>
				<u-picker
					:show="targetShow"
					:columns="tagerts"
					title="每天喝水目标"
					keyName="label"
					confirmColor="#34ce98"
					:closeOnClickOverlay="true"
					@close="targetShow = false"
					@confirm="targetSure('1', $event)"
					:defaultIndex="tagertsDefaultIndex"
				/>
				<u-picker
					:show="waterCShow"
					:columns="cup_mls"
					title="设置水杯容量"
					keyName="label"
					confirmColor="#34ce98"
					:closeOnClickOverlay="true"
					@close="waterCShow = false"
					@confirm="targetSure('2', $event)"
					:defaultIndex="cupDefaultIndex"
				/>
			</view>
			<!-- 加水 -->
			<view class="add-water" @click="drinkWater">
				<u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true" mode="scaleToFill" width="60rpx" height="80rpx" />
				<span>一杯水</span>
				<u-icon class="add-icon" name="plus-circle-fill" color="#34ce98" size="24" />
			</view>
		</view>
		<!-- 喝水记录 -->
		<view class="--history">
			<view class="title">喝水记录</view>
			<template v-if="logs.length > 0">
				<view class="lists" v-for="item in logs" :key="item.water_log_id" @longpress="delWater(item.water_log_id)">
					<view class="lists-water"><u-icon size="30" :name="require('../../static/icon/water-icon.png')" /></view>
					<view class="list-item">
						<view class="list-item-title">
							水
							<span>{{ item.time }}</span>
						</view>
						{{ item.ml }}ml
					</view>
				</view>
			</template>
			<view v-else class="no-drink">今天一杯水还没有喝呢，来一杯吧~</view>
		</view>
	</view>
</template>
<script>
import { waters, setWaters, drinkWater, delDrinkWater } from '@/apis/interfaces/drink';
import moment from 'moment';
export default {
	data() {
		return {
			ballPercent: 0, // 喝水比例
			logs: [], // 水记录
			water: {}, // 水基本信息
			targetShow: false,
			tagerts: [], // 目标列表
			tagertsDefaultIndex: ['1'], // 目标默认index
			waterCShow: false,
			cup_mls: [], // 水杯列表
			cupDefaultIndex: ['2'], // 目标默认index
			loaded: false
		};
	},
	onShow() {
		this.getWaters();
	},
	methods: {
		// 获取喝水页面信息
		getWaters() {
			waters().then(res => {
				this.cup_mls = [res.cup_mls];
				this.tagerts = [res.tagerts];
				this.water = res.water;
				this.logs = res.logs;
				this.ballPercent = res.water.lack.ratio;
				this.cupDefaultIndex = [res.cup_mls.findIndex(item => item.number === res.water.ml)];
				this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water.target)];
				this.loaded = true;
			});
		},
		// 确认方法index===1 每日目标 2，水杯容量
		targetSure(index, e) {
			// console.log("触发了targetSure", index, e.value[0]);
			// let date = moment(new Date()).format("YYYY--MM--DD");
			let params = {};
			if (index === '1') {
				params = {
					type: 'target',
					ml: e.value[0].number,
					date: moment(new Date()).format('YYYY-MM-DD')
				};
			} else {
				params = {
					type: 'ml',
					ml: e.value[0].number,
					date: moment(new Date()).format('YYYY-MM-DD')
				};
			}
			setWaters(params).then(res => {
				this.getWaters();
				this.waterCShow = false;
				this.targetShow = false;
			});
		},
		// 喝水
		drinkWater() {
			drinkWater().then(res => {
				this.getWaters();
			});
		},
		// 删除和喝水记录
		delWater(id) {
			uni.showModal({
				content: '确认删除么？',
				confirmText: '确认删除',
				confirmColor: '#34ce98',
				cancelText: '再想想',
				cancelColor: '#ddd',
				success: res => {
					if (res.confirm) {
						delDrinkWater(id)
							.then(res => {
								this.getWaters();
							})
							.catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
					}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.drink {
	// 喝水 水杯及文字

	.drink-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		// padding: $padding  0;
		position: relative;
		// 标题 再喝水
		.title {
			font-size: $title-size + 4;
			color: $main-color;
			font-weight: normal;
			margin: $margin * 2;
			position: relative;
			.is_complete {
				position: absolute;
				top: 30rpx;
				right: -120rpx;
			}
			.num {
				font-size: $title-size * 2.3;
				padding: 0 $padding * 0.3;
				font-weight: bold;
			}
			.total {
				font-size: $title-size;
				color: $text-gray-m;
				padding-left: $padding * 0.2;
			}
		}
		// 加一杯水
		.add-water {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			font-size: $title-size;
			color: $text-color;
			margin-top: $margin * 2;
			position: relative;
			span {
				padding-top: $padding * 0.4;
				color:$text-gray-m;
				font-size: $title-size;
			}
			.add-icon {
				position: absolute;
				top: $margin + 8;
				right: 0;
			}
		}
		// 目标
		.water-target {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			color: $text-gray-m;
			font-size: $title-size;
			position: absolute;
			z-index: 110;
			right: $padding * 1.4;
			top: 50%;
			.target-item {
				margin-top: $margin * 1.6;
				.target-icon {
					padding-top: $padding * 0.5;
				}
			}
		}
	}
	// 喝水记录
	.--history {
		padding: $padding;
		.no-drink {
			color: $text-gray-m;
			font-size: $title-size-m;
			padding-top: $padding + 10;
		}
		// 标题
		.title {
			font-size: $title-size + 4;
			font-weight: bold;
			color: $text-color;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			padding-left: $padding;
			padding-bottom: $padding;
			&::before {
				position: absolute;
				content: '';
				width: 8rpx;
				height: 45rpx;
				left: 0;
				background-color: $main-color;
				border-radius: 10rpx;
			}
		}

		// 列表
		.lists {
			// background-color: pink;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			border-bottom: solid 1rpx #f7f7f7;
			.lists-water {
				background-image: linear-gradient(to right, $main-color, $main-color);
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
			}
			.list-item {
				flex: 1;
				margin-left: $margin * 0.7;
				font-size: $title-size;
				color: $text-gray-m;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin: $margin 0 $margin $margin * 0.7;
				.list-item-title {
					font-size: $title-size + 3;
					color: $text-color;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					box-sizing: border-box;
					font-weight: bold;
					span {
						margin-top: $margin * 0.4;
						background-color: #f7f7f7;
						padding: 4rpx 10rpx;
						border-radius: 50rpx;
						font-weight: normal;
						font-size: $title-size - 3;
					}
				}
			}
		}
	}
}
// 水杯动画
.wave-content {
	position: relative;
	z-index: 110;
	.grass {
		position: relative;
		z-index: 120099;
	}

	.wave {
		position: absolute;
		width: 290rpx;
		height: 500rpx;
		background-color: rgba($color: $main-color, $alpha: 0.6);
		background-size: 100%;
		overflow: hidden;
		top: 10rpx;
		left: 20rpx;
		z-index: 10;
		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 1000rpx;
			height: 1000rpx;
			top: var(--ballPercent);
			left: 50%;
			background-color: rgba(255, 255, 255, 0.4);
			border-radius: 45%;
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 4s linear infinite;
			z-index: 10;
		}
		&::after {
			border-radius: 47%;
			background-color: rgba(255, 255, 255, 0.9);
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 6s linear -5s infinite;
			z-index: 20;
		}
	}

	@keyframes rotate {
		50% {
			transform: translate(-50%, -73%) rotate(180deg);
		}
		100% {
			transform: translate(-50%, -70%) rotate(360deg);
		}
	}
}
</style>
