<template>
	<view class="TrendPage">
		<!-- 时间选择 -->
		<view class="boxTime">
			<view class="one">
				<picker mode="date" class="f-l" :value="startTime?startTime:startDate" @change="handStartTimeH">
					<view class="uni-input">{{startTime?startTime:startDate}}
						<uni-icons type="down"></uni-icons>
					</view>
				</picker>
				<view>~</view>
				<picker mode="date" :end="endDate" class="f-r" :value="endDate" @change="handEndTimeH">
					<view class="uni-input"> {{endTime?endTime:endDate}}
						<uni-icons type="down"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<!-- 曲线图 -->
		<view class="box">
			<view class="listC">
				<view :class="{active:index==active1}" class="name" v-for="(item,index) in weightList" :key="index"
					@click="showbox(index)">
					{{item.title}}
				</view>
			</view>
			<view class="blockC">
				<view v-if="lineData&&lineData.categories.length&&handTrue">
					<qiunDataCharts type="area" :chartData="lineData" :canvas2d="true" canvasId="charts09"
						:cHeight="480" :cWidth="680" :animation="false"
						:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
				</view>
				<view class="nolist" v-else>
					<uni-icons class="iconfont icon-zanwu"></uni-icons>
				</view>
			</view>
		</view>

		<!--  目标-->
		<view class="box">
			<view class="info">
				<view class="item" @click="navTo('/pages/history/history?type=w')">
					<text></text>
					<view>历史记录</view>
				</view>
				<view class="item" @click="navTo('/pages/compk/contrast?type=w')">
					<text></text>
					<view>数据对比</view>
				</view>
			</view>
			<view class="data">
				<view class="item" @click="handleClick(0)">
					<view class="val">{{userInfo.targetweight?userInfo.targetweight:0}}<text>kg</text></view>
					<view class="name">目标体重<uni-icons class="iconfont icon-bianji" color="#FEC407"></uni-icons></view>
				</view>
				<view class="item">
					<view class="val">{{userInfo.totalweight?Math.abs(userInfo.totalweight):0}}<text>kg</text>
					</view>
					<view class="name" v-if="Number(userInfo.totalweight)<0">累计增重</view>
					<view class="name" v-else>累计减重</view>
				</view>
				<view class="item" @click="handleClick(1)">
					<view class="val">{{userInfo.firstweight?userInfo.firstweight:0}}<text>kg</text>
					</view>
					<view class="name">初始体重<uni-icons class="iconfont icon-bianji" color="#FEC407"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="val">{{userInfo.day?userInfo.day:0}}<text>天</text></view>
					<view class="name">减重天数</view>
				</view>
			</view>
		</view>
		<!-- 初始 -->
		<firstweight></firstweight>
		<!-- 目标 -->
		<targetWeight></targetWeight>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	import targetWeight from '@/components/target/targetWeight.vue';
	import firstweight from '@/components/target/firstweight.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			targetWeight,
			firstweight,
			qiunDataCharts,
		},
		computed: {
			...mapState(["user", "Trend", "appTheme"]),
			userInfo: function() {
				return this.user
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		mounted() {
			let that = this
			this.active = 0
			let list = this.$json.TrendList
			let cidata = {
				weight: {
					categories: [],
					series: [{
						color: "#ff9f40",
						name: "体重",
						data: [],
					}]
				},
				bmi: {
					categories: [],
					series: [{
						name: "bmi",
						color: "#5ba7ff",
						data: [],
					}]
				},
				muscle: {
					categories: [],
					series: [{
						color: "#ff7f91",
						name: "肌肉",
						data: [],
					}]
				},
				fat_r: {
					categories: [],
					series: [{
						color: "#3fcba7",
						name: "脂肪",
						data: [],
					}]
				}
			}

			for (var i = 0; i < list.length; i++) {
				cidata.weight.categories.push(list[i].time);
				cidata.bmi.categories.push(list[i].time);
				cidata.muscle.categories.push(list[i].time);
				cidata.fat_r.categories.push(list[i].time);
				cidata.weight.series.forEach(item => {
					item.data.push(list[i].weight)
				})
				cidata.bmi.series.forEach(item => {
					item.data.push(list[i].bmi)
				})
				cidata.muscle.series.forEach(item => {
					item.data.push(list[i].muscle)
				})
				cidata.fat_r.series.forEach(item => {
					item.data.push(list[i].fat_r)
				})
			}
			for (var i = 0; i < that.weightList.length; i++) {
				that.weightList[i].Line = cidata[that.weightList[i].key];
			}
			that.showbox(0)

			console.log("222", cidata, that.weightList)
			// that.getList(this.startDate, this.endDate)
		},
		methods: {
			getList(start, end) {
				console.log("fanhui", start, end)
				let that = this
				that.$model.getTrendList({
					familyid: uni.getStorageSync('familyid'),
					starttime: start,
					endtime: end,
				}).then(res => {
					if (res) {
						for (var i = 0; i < that.weightList.length; i++) {
							that.weightList[i].Line = res[that.weightList[i].key];
						}
						that.showbox(0)
					}
				})
			},
			showbox(index) {
				let that = this
				that.handTrue = false
				this.$nextTick(function() {
					that.handTrue = true
					that.lineData = that.weightList[index].Line
				})
				that.active1 = index
			},
			//开始
			handStartTimeH(e) {
				let that = this
				if (this.endTime) {
					if (Date.parse(e.target.value) > Date.parse(this.endTime)) {
						this.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.target.value) > Date.parse(this.endDate)) {
						this.$tools.msg("请选择正确的时间")
						return
					}
				}
				this.startTime = e.target.value
				let endtime = that.endTime ? that.endTime : that.endDate
				this.getList(that.startTime, endtime)
			},
			// 结束
			handEndTimeH(e) {
				let that = this
				if (this.startTime) {
					if (Date.parse(e.target.value) < Date.parse(this.startTime)) {
						this.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.target.value) < Date.parse(this.startDate)) {
						this.$tools.msg("请选择正确的时间")
						return
					}
				}
				this.endTime = e.target.value
				let startTime = that.startTime ? that.startTime : that.startDate
				this.getList(startTime, this.endTime)
			},
			handleClick(ind) {
				if (ind == 0) {
					this.$store.commit("changeTarget", true);
					return
				}
				if (ind == 1) {
					this.$store.commit("changeFirst", true);
					return
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		data() {
			return {
				lineData: null,
				type: null,
				active1: 0,
				weight: "",
				startTime: "",
				endTime: "",
				active: 0,
				token: null,
				handTrue: true,
				TrendList: [],
				weightList: [{
						title: '体重',
						key: 'weight',
						showCon: false,
						Line: {
							"categories": [],
							"series": [{
								"color": "#fb7b92",
								"name": "体重",
								"data": []
							}]
						},
					},
					{
						title: 'BMI',
						key: 'bmi',
						Line: {
							"categories": [],
							"series": [{
								"color": "#6bb0fe",
								"name": "bmi",
								"data": []
							}]
						},
					}, {
						title: '肌肉',
						key: 'muscle',
						showCon: false,
						Line: {
							"categories": [],
							"series": [{
								"color": "#ff9f40",
								"name": "肌肉率",
								"data": []
							}]
						},
					},
					{
						title: '脂肪',
						key: 'fat_r',
						showCon: false,
						Line: {
							"categories": [],
							"series": [{
								"color": "#3fcba7",
								"name": "脂肪率",
								"data": []
							}]
						},
					}
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.TrendPage {
		padding: 10px 0;
		margin-bottom: 15px;
		border-radius: 10px;
		background-color: #f7f7f7;

		.boxTime {
			width: calc(100% - 20px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 10px;
			padding: 10px;

			.one {
				width: 80%;
				display: flex;
				line-height: 25px;
				justify-content: space-between;
				align-items: center;
			}

			.tow {
				color: $textcolor;
				padding: 0 5px;
				font-size: 12px;
				height: 25px;
				line-height: 25px;
				border-radius: 10px;
			}

			.style {
				background: $maincolor;
				color: #fff;
			}

			.iconfont {
				font-size: 14px;
				color: #666;
			}
		}

		.listC {
			width: 100%;
			display: flex;
			padding: 10px;
			margin-top: 10px;
			align-items: center;
			background-color: #fff;
			border-radius: 10px 10px 0 0;
			justify-content: space-between;

			.name {
				width: 25%;
				padding: 0 15px;
				font-size: 14px;
				text-align: center;
				border-radius: 5px;
				height: 30px;
				line-height: 30px;
			}

			.active {
				font-size: 14px;
				border-radius: 5px;
				color: #fff;
				background: $maincolor;
			}
		}

		.box {
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			border-radius: 10px;
			justify-content: space-between;
		}

		.blockC {
			clear: both;
			width: 100%;
			height: 250px;
			background-color: #fff;
			border-radius: 0 0 10px 10px;
		}

		.info {
			width: 100%;
			display: flex;
			margin-top: 20px;
			justify-content: space-between;

			.item {
				color: #fff;
				width: 47.5%;
				height: 50px;
				background: $maincolor;
				text-align: center;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-right: 10px;
					display: inline-block;
					background-color: #fff;
				}
			}
		}

		.data {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			color: #666;
			margin-top: 15px;
			width: 100%;

			.item {
				width: 47.5%;
				text-align: center;
				font-size: 14px;
				line-height: 30px;
				background: #fff;
				padding: 5px 0;
				border-radius: 15px;
				margin-bottom: 15px;
			}

			.val {
				display: flex;
				align-items: center;
				font-size: 20px;
				font-weight: 700;
				justify-content: center;
				color: #666;

				text {
					font-size: 14px;
					font-weight: 500;
					display: block;
					margin-top: 3px;
					margin-left: 3px;
				}
			}

			.name {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
			}
		}
	}

	.boxList {
		background-color: #fff;
		border-radius: 10px;

		.list {
			margin: 10px;
		}
	}
</style>