<template>
	<view class="content">
		<!-- 时间选择 -->
		<view class="TrendPage">
			<view class="TrendTime">
				<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}}
								<icon class="iconfont iconDown"></icon>
							</view>
						</picker>

						<picker mode="date" :end="endDate" class="f-r" :value="endDate" @change="handEndTimeH">
							<view class="uni-input">~ {{endTime?endTime:endDate}}
								<icon class="iconfont iconDown"></icon>
							</view>
						</picker>
					</view>
					<view class="tow" @click="handAllTime(0)" :class="{style:active==0}">
						近3月
					</view>
					<view class="tow" @click="handAllTime(1)" :class="{style:active==1}">
						近半年
					</view>
				</view>
			</view>
			<!-- 曲线图 -->
			<view class="box boxList">
				<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">
						<qiun-data-charts 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>
						<icon class="iconfont icon-zanwu"></icon>
					</view>
				</view>
			</view>

			<!--  目标-->
			<view class="box">
				<view class="data">
					<view class="item" @click="handleClick(0)">
						<view class="val">{{userInfo.targetweight?userInfo.targetweight:0}}<text>kg</text>
						</view>
						<view class="name">目标体重<icon class="t-icon t-icon-bianji3"></icon>
						</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">初始体重<icon class="t-icon t-icon-bianji3"></icon>
						</view>
					</view>
					<view class="item">
						<view class="val">{{userInfo.day?userInfo.day:0}}<text>天</text></view>
						<view class="name">减重天数</view>
					</view>
					<view class="item" @click="handleClick(2)">
						<view class="val"></view>
						<view class="name">
							<icon class="iconfont icon-tianjia">手动记录</icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 手动 -->
			<manuaRecord @getList="getList"></manuaRecord>
			<!-- 初始 -->
			<firstweight></firstweight>
			<!-- 目标 -->
			<targetWeight></targetWeight>
			<!-- 登录 -->
			<userPopup></userPopup>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	import userPopup from '@/components/userLogin.vue'
	import targetWeight from '@/components/target/targetWeight.vue';
	import firstweight from '@/components/target/firstweight.vue';
	import manuaRecord from '@/components/target/manuaRecord.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
	export default {
		components: {
			targetWeight,
			firstweight,
			manuaRecord,
			userPopup,
			qiunDataCharts,
		},
		computed: {
			...mapState(["user", "Trend", "appTheme"]),
			userInfo: function() {
				return this.user
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		onLoad() {
			// 导航栏颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.appTheme,
			})
		},
		onShow() {
			let that = this
			this.token = uni.getStorageSync('token')
			this.active = 0
			this.startTime = ""
			this.endTime = ""
			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)
			},
			// 日期
			handAllTime(ind) {
				let that = this
				if (!uni.getStorageSync('token')) {
					uni.redirectTo({
						url: '/pageTwo/login/login'
					})
					// that.$store.commit("changeUserLogin", true)
					return
				}
				this.active = ind
				if (ind == 0) {
					this.startTime = that.$tools.GetDateStr(-90)
				} else {
					this.startTime = that.$tools.GetDateStr(-180)
				}
				this.getList(this.startTime, this.endDate)
			},
			handleClick(ind) {
				if (!uni.getStorageSync('token')) {
					uni.redirectTo({
						url: '/pageTwo/login/login'
					})
					// that.$store.commit("changeUserLogin", true)
					return
				}
				if (ind == 0) {
					this.$store.commit("changeTarget", true);
					return
				}
				if (ind == 1) {
					this.$store.commit("changeFirst", true);
					return
				}
				if (ind == 2) {
					this.$store.commit("changeRecord", true);
					return
				}
			},
		},
		data() {
			return {
				lineData: null,
				type: null,
				active1: 0,
				weight: "",
				startTime: "",
				endTime: "",
				active: 0,
				token: null,
				handTrue: true,
				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>
	.TrendTime {
		background: #fff;
		padding: 10px;
		margin-bottom: 15px;
		border-radius: 10px;
	}

	.listC {
		margin: 10px;
	}

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

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