<template>
	<view class="content">
		<view class=" calendar">
			<!-- 日历 -->
			<ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick' @onMonthClickPre='onMonthClickPre'
				v-if="isShow">
			</ren-calendar>
			<!--  -->
			<view class="box" v-if="infoList.length">
				<view class="list" v-for="(item,index) in infoList" :key="index" @click="addMemberTags(item.id,item)">
					<!-- 成人 -->
					<view class="item">
						<view class="check">
							<text class="iconfont"
								:class="isActive.indexOf(item.id)!=-1?'icon-radio':'icon-kongradio'"></text>
						</view>
						<view>{{item.height}}<text>身高</text></view>
						<view>{{item.weight}}<text>体重</text></view>
						<view>{{item.bmi}}<text>BMI</text></view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="bottom">
				<view class="list" v-for="(ite,ind) in ActiveDays" :key="ind" v-if="isActive"
					@click="addMemberTags(ite.id,ite)">
					<view class="item borderRadius">
						<view class="time">{{ite.createtime}}</view>
						<view>{{ite.height}}<text>身高</text></view>
						<view>{{ite.weight}}<text>体重</text></view>
						<view>{{ite.bmi}}<text>BMI</text></view>
						<view class="check">
							<icon class="iconfont icon-quxiao"></icon>
						</view>
					</view>
				</view>
				<view class="pkclass" v-if="length==2">vs</view>
				<view :class="{'active':length!=2}" class="btn" @click="handlePK">减脂对比</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			RenCalendar,
		},
		computed: {
			...mapState(["user", "TrendPk", "appTheme"]),
			length() {
				return this.isActive.length
			},
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad() {
			this.token = uni.getStorageSync("token")
		},
		onShow() {
			let that = this
			that.startM = that.$tools.getDate("m").substring(0, 10)
			that.endM = that.$tools.getDate("m").substring(11, 21)
			that.infoList = this.$json.contrastList
			that.markDays = []
			that.list = []
			that.isActive = []
			that.ActiveDays = []
			// this.$nextTick(() => {
			//   that.isShow = true
			//   that.getList(that.startM, that.endM)
			// })
		},
		methods: {
			getList(start, end) {
				let that = this
				that.$model.GetTrendList({
					familyid: uni.getStorageSync('familyid'),
					starttime: start,
					endtime: end,
				}).then(res => {
					if (res) {
						that.markDays = res.pkList.Dlist
						that.list = res.pkList.list
						for (var i = 0; i < res.pkList.list.length; i++) {
							if (Date.parse(that.endDate) == Date.parse(res.pkList.list[i].createtime)) {
								that.infoList.push(res.pkList.list[i]);
							}
						}
					}
				})
			},
			onMonthClickPre(data) {
				console.log("onMonthClickPre", data)
				let that = this
				let start = data.substring(0, 10)
				let end = data.substring(11, 21)
				that.infoList = []
				that.markDays = []
				that.list = []
				that.getList(start, end)
			},
			onDayClick(data) {
				let that = this
				this.infoList = []
				for (var i = 0; i < that.list.length; i++) {
					if (Date.parse(data.date) == Date.parse(that.list[i].createtime)) { //includes 检测数组是否有某个值
						this.infoList.push(that.list[i]);
					}
				}
			},
			addMemberTags(index, item) {
				var that = this;
				console.log("addMemberTags", index, item)
				// if (this.user.type != 1) return
				if (that.isActive.indexOf(index) == -1) {
					that.isActive.push(index);
					that.ActiveDays.push(item);
				} else {
					that.isActive.splice(that.isActive.indexOf(index), 1);
					that.ActiveDays.splice(that.ActiveDays.indexOf(item), 1);
				}
				if (that.isActive.length > 2) {
					that.isActive.splice(0, 1)
					that.ActiveDays.splice(0, 1);
				}
			},
			handlePK() {
				let that = this
				// if (that.isActive.length != 2) {
				// 	that.$tools.msg("请先选择数据！")
				// 	return
				// }
				let info = {}
				// info.familyid = uni.getStorageSync('familyid')
				// info.firstId = that.isActive[0]
				// info.secondId = that.isActive[1]
				console.log("1111")
				uni.navigateTo({
					url: "/pages/weight/pkdetail?info=" + JSON.stringify(info)
				})
			},
		},
		data() {
			return {
				markDays: [],
				infoList: [],
				list: [],
				isActive: [],
				ActiveDays: [],
				token: null,
				startM: null,
				endM: null,
				isShow: true,
			}
		},
	}
</script>

<style scoped lang="scss">
	.calendar {
		background: #f7f7f7;
		min-height: 100vh;

		.box {
			margin-bottom: 305px;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 15px;
			align-items: center;


			.item {
				width: 100%;
				height: auto;
				background: #fff;
				display: flex;
				height: 40px;
				justify-content: space-between;
				padding: 10px 15px;
				border-radius: 10px;
				align-items: center;
				text-align: center;
				font-size: 16px;
				font-weight: 700;

				view {
					width: 32%;
				}

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

				text {
					width: 100%;
					font-size: 12px;
					display: block;
					color: #666;
					text-align: center;
					font-weight: 400;
				}

				.check {
					width: 35px !important;

					.icon-kongradio {
						font-size: 22px;
						color: #999;
					}

					.icon-radio {
						font-size: 22px;
						color: #FCA82D;
					}

				}
			}
		}

		.time {
			width: 100%;
			font-size: 14px;
			color: #666;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;

			text {
				font-size: 14px;
				margin-top: 3px;
			}
		}

		.bottom {
			margin: 0;
			width: auto;
			position: fixed;
			left: 0px;
			right: 0px;
			bottom: 0px;
			z-index: 9;
			padding: 0 10px 10px;
			background: #fff;
			border-radius: 0;
			border-top: 1px solid #dfdfdf;

			.btn {
				width: auto;
				margin: 10px 0 0;
				background: $maincolor;
			}

			.list {
				margin: 10px 0;
				height: 120rpx;
				position: relative;

				.item {
					background: #F7F7F7;
				}

				.time {
					float: left;
					text-align: center;
					justify-content: center;
					color: #fea82d;
					font-weight: 700;
					width: 35%;
				}

				.check {
					position: absolute;
					right: -5px;
					top: -5px;
					width: 25px;

					.icon-quxiao {
						font-size: 20px;
						color: #999;
					}
				}

			}
		}

		.pkclass {
			position: absolute;
			width: 30px;
			height: 30px;
			background: #fea82d;
			border-radius: 50%;
			line-height: 27px;
			text-align: center;
			color: #fff;
			font-size: 19px;
			left: 30px;
			top: 120rpx;
		}

		.btn.active {
			border: none;
			color: #333 !important;
			background: #dfdfdf !important;
			display: block;
			border-radius: 10px;
		}
	}
</style>