<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header">
			<view class="top" v-if="token">
				<view class="headimg">
					<image src="../../static/logo.png"></image>
				</view>
				<view class="info">
					<view class="size20 bold">小白</view>
					<view class="mt-5">{{$t("index.age")}}：16岁</view>
					<view>{{$t("index.birthday")}}：2008年1月24日</view>
				</view>
				<icon class="iconfont icon-qiehuan1"></icon>
			</view>
			<view class="top" v-else>
				<view class="headimg">
					<image src="../../static/logo.png"></image>
				</view>
				<view class="info">
					暂无成员，请先添加~
				</view>
				<view class="add" @click="handleAddUser">
					+
				</view>
			</view>
		</view>
		<!-- 地区 -->
		<view class="area box">
			<view>
				<text>{{$t("index.region")}}：</text>
				<text>北京</text>
			</view>
			<!-- <icon class="iconfont icon-arrow-right-bold size20"></icon> -->
		</view>
		<!-- 身体数据 -->
		<view class="card box" @click="navTo('/pages/weight/weight')">
			<view class="title border-bottom">
				<view class="name"><text>身体数据</text>2024/03/25</view>
				<icon class="iconfont icon-arrow-right-bold size20"></icon>
			</view>
			<view class="item title">
				<view>
					<text>身高</text>
					<view class="weight"><text>176</text>cm</view>
					<view class="standardBtn">标准</view>
				</view>
				<view>
					<text>体重</text>
					<view class="weight"><text>76</text>kg</view>
					<view class="standardBtn">标准</view>
				</view>
				<view>
					<text>BMI</text>
					<view class="weight"><text>26</text></view>
					<view class="standardBtn">标准</view>
				</view>
			</view>
			<view class="target">
				<view class="left">
					<icon class="iconfont icon-notification"></icon>
					身体是一切的基础
				</view>
				<view class="targetBtn">手动记录</view>
			</view>
		</view>
		<!-- 卡片数据 -->
		<view class="list">
			<view v-for="(ite,ind) in selectllist" @click="navTo(ite.detailurl)">
				<!-- 大标签 -->
				<view class="card box" v-if="ite.size=='big'">
					<view class="title border-bottom">
						<view class="name"><text>{{ite.name}}</text>{{ite.time}}</view>
						<icon class="iconfont icon-arrow-right-bold size20"></icon>
					</view>
					<view class="item title">
						<view class="item2">
							<text class="name">用时</text>
							<view class="weight"><text>{{ite.taketime?ite.taketime:'--：--：--'}}</text></view>
						</view>
						<view class="item2">
							<text class="name">本次次数</text>
							<view class="weight"><text>{{ite.cnt?ite.cnt:'-'}}</text>{{ite.unit}}</view>
							<view class="standardBtn" :style="{'backgroundColor':ite.standardcolor}"
								v-if="ite.standardtext">
								{{ite.standardtext}}
							</view>
						</view>
					</view>
					<view class="item title">
						<view class="item2">
							<text class="name">平均成绩</text>
							<view class="weight"><text>{{ite.averagecnt?ite.averagecnt:'-'}}</text>{{ite.unit}}</view>
						</view>
						<view class="item2">
							<text class="name">卡路里</text>
							<view class="weight"><text>{{ite.kcal?ite.kcal:'-'}}</text>kcal</view>
						</view>
					</view>
					<view class="target">
						<view class="left">
							<icon class="iconfont icon-notification"></icon>
							{{ite.name}}教程
						</view>
						<view class="targetBtn">手动记录</view>
					</view>
				</view>
				<!-- 小标签 -->
				<view class="card box small" v-if="ite.size=='small'">
					<view class="title border-bottom">
						<view class="name"><text>{{ite.name}}</text>{{ite.time}}</view>
						<icon class="iconfont icon-arrow-right-bold size20"></icon>
					</view>
					<view class="item title">
						<view>
							<text>本次数据</text>
							<view class="weight"><text>{{ite.cnt?ite.cnt:'-'}}</text>{{ite.unit}}</view>
							<view class="standardBtn" :style="{'backgroundColor':ite.standardcolor}"
								v-if="ite.standardtext">
								{{ite.standardtext}}
							</view>
						</view>
					</view>
					<view class="target">
						<view class="left">
							<icon class="iconfont icon-notification"></icon>
							教程
						</view>
						<view class="targetBtn">手动记录</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 设置数据卡片 -->
		<view class="setcard" @click="handleCard">
			设置数据页卡片
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: null,
				selectllist: []
			}
		},
		onLoad() {
			this.selectllist = this.$json.selectllist
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.code);
							}
						}
					})
				} else {
					uni.setLocale(e.code);
					this.$i18n.locale = e.code;
				}
			})
		},
		methods: {
			// 登录
			handleLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			// 添加成员
			handleAddUser() {
				uni.navigateTo({
					url: "/pages/index/userInfo"
				})
			},
			// 设置数据页卡片
			handleCard() {
				uni.navigateTo({
					url: "/pages/card/card"
				})
			},
			navTo(url) {
				console.log("url", url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.header {
		width: 100%;
		height: 280rpx;
		padding-top: 20px;
		background: $maincolor;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.top {
			margin: 0 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 10px;
			padding: 15px;
			min-height: 170rpx;

			.headimg {
				width: 55px;
				height: 55px;

			}

			.toggle {
				width: 20px;
				height: 20px;
			}
		}

		.add {
			border: 1px #dfdfdf dashed;
			font-size: 28px;
			font-weight: 500;
			width: 35px;
			height: 35px;
			line-height: 35px;
			border-radius: 10px;
			text-align: center;
		}
	}

	.box {
		margin: 15px 10px 0;
		padding: 15px 10px 10px;
		background-color: #fff;
		width: calc(100% - 40px);
		display: flex;
		border-radius: 10px;
	}

	.area {
		justify-content: space-between;
	}

	.card {
		flex-wrap: wrap;

		.title {
			width: 100%;
			color: #666;
			display: flex;
			padding-bottom: 5px;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 18px;
				font-weight: bold;
				margin-right: 10px;
				color: #333;
			}

		}

		.item {
			padding: 15px 0;
			display: flex;
			flex-wrap: wrap;
			text-align: center;

			text {
				font-size: 14px;
				font-weight: 500;
				margin-right: 0;
			}

			.weight {
				width: 100%;

				text {
					font-size: 24px !important;
					font-weight: bold;
					margin: 8px 0;
					display: inline-block;
				}
			}

			.standardBtn {
				width: 40px;
				padding: 3px 8px;
				border-radius: 8px;
				text-align: center;
				color: #fff;
				font-size: 14px;
				background-color: $btncolor;
			}
		}

		.target {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 10px;
			font-size: 14px;
			color: $textcolor;
			border-top: 1px solid #f7f7f7;

			.targetBtn {
				width: auto;
				height: 30px;
				line-height: 30px;
				color: #fff;
				border-radius: 10px;
				padding: 0 10px;
				background: $maincolor;
			}
		}

		.item2 {
			width: 40%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.name {
				display: inline-block;
				width: 100%;
			}
		}
	}

	.small {
		width: calc(50% - 40px);
		float: left;
		margin-bottom: 15px;

		.title {
			.name {
				display: flex;
				flex-wrap: wrap;

				text {
					width: 80%;
					margin-bottom: 5px;
					display: inline-block;
				}
			}
		}

		.item {
			justify-content: center;
		}
	}

	.setcard {
		width: calc(100% - 20px);
		text-align: center;
		height: 40px;
		line-height: 40px;
		margin: 10px 15px;
		border-radius: 10px;
		color: $textcolor;
		background-color: #fff;
	}
</style>