<template>
	<view class="">
		<view class="box">
			<view class="time">2024年3月25日16:23:42</view>
			<view class="item">
				<view class="data borderR">
					<view class="c666 mb-5">体重</view>
					<view><text>45.3</text>kg</view>
				</view>
				<view class="data borderR">
					<view class="c666 mb-5">身高</view>
					<view><text>160.2</text>CM</view>
				</view>
				<view class="data">
					<view class="c666 mb-5">BMI</view>
					<view><text>23.6</text></view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="box">
			<view>身体得分：91分</view>
			<view>身体类型：标准</view>
		</view>
		<!--  -->
		<view class="info">
			<view class="item">
				<text></text>
				<view>手动记录</view>
			</view>
			<view class="item">
				<text></text>
				<view>连接设备</view>
			</view>
		</view>
		<!--  -->
		<view class="bold mt-10">其他数据</view>
		<view class="myinfoPage">
			<view class="box1">
				<uni-collapse accordion>
					<uni-collapse-item class="list" v-for="(item,index) in infoList" :key="index">
						<template v-slot:title>
							<uni-list-item class="block">
								<view class="name">
									<icon class="t-icon iconfont" :class="'t-icon-'+item.name"></icon>
									{{item.title}}
								</view>
								<view class="val" v-if="item.title=='肥胖等级'||item.title=='体型'"> - </view>
								<view class="val" v-else>{{item.value?item.value:'0'}}{{item.unit}}</view>
								<view class="level">
									<view class="btnf" :style="{backgroundColor:(item.level=='异常'?'#FFF':item.color)}"
										:class="[item.level=='异常'?'btnC':'']">{{item.level=='异常'?'-':item.level}}
									</view>
								</view>
							</uni-list-item>
						</template>
						<view class="desc">
							<view v-if="item.desc" class="ming">{{item.desc}}</view>
							<view class="scale" v-if="item.ishasscale">本次评分：{{item.scale}}</view>
							<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
								<view class="bi" v-if="item.title!='基础代谢'">
									<view :style="'left:'+item.offset+'%'" class="peobox">
										<view class="xx"></view>
									</view>
									<view class="item" v-for="(ite , ind) in item.list" :key="ind"
										:style="{backgroundColor:ite.color}">
										<view class="span1">{{ite.text}}</view>
										<view class="span" v-if="ind<item.list.length-1">{{ite.maxvalue}}</view>
									</view>
								</view>
								<view v-else>
									<view class="kcalClass" v-if="item.list&&item.list.length">
										标准值:{{item.list[0].maxvalue}}kcal
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="tips c999 ml-15">
				<uni-icons type="info-filled" color="red"></uni-icons>
				此测量数据仅供参考，不可代替医学专业测试！
			</view>

		</view>
		<view class="nolist">
			<icon class="iconfont icon-zanwu"></icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: []
			}
		},
		mounted() {
			this.infoList = this.$json.infoList
			console.log("infolist", this.infoList)
		},
		methods: {
			handleToggle(index) {
				let that = this
				if (!that.MeasureResult) return
				let str = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
				for (var i = 0; i < str.length; i++) {
					if (i == index) {
						if (index == 0 && str[0].showCon == false) {
							str[0].showCon = true
						} else {
							str[i].showCon = !str[i].showCon
						}
					} else {
						str[i].showCon = false
					}
				}
				that.infoList = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 10px;

		.time {
			color: #999;
			padding-bottom: 15px;
			width: 100%;
		}

		.item {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.data {
				width: 33%;
				text-align: center;
			}

			text {
				font-size: 20px !important;
				font-weight: bold;
			}
		}
	}

	.info {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.item {
			color: #fff;
			width: 45%;
			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;
			}
		}
	}

	.myinfoPage {
		width: 100%;
		background: #fff;
		margin-top: 10px;
		padding-bottom: 15px;
		border-radius: 10px;

		.box1 {
			display: flex;
			flex-wrap: wrap;
			border-radius: 10px;
			font-size: 14px;
			position: relative;
			margin: 0px 15px 0;
			padding-bottom: 10px;

			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #666;
				padding: 0;
				line-height: 50px;
				align-items: center;
				flex-wrap: wrap;

				image,
				.t-icon {
					width: 18px !important;
					height: 18px;
					border: 2px solid #c7c7c7;
					background-color: #c7c7c7;
					border-radius: 50%;
					margin-right: 5px;
				}

				.block {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #666;
					position: relative;

					.level,
					.val {
						width: 25%;
					}

					.name {
						width: 40%;
						display: flex;
						align-items: center;
					}

					.icon {
						width: 20px;
						text-align: right;
						display: flex;

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

				.desc {
					line-height: 20px;
					text-align: left;
					width: calc(100% - 20px);
					height: auto;
					border-radius: 5px;
					font-size: 12px;
					color: #999;
					padding: 10px;
					background: #f7f7f7;
				}
			}

			.statuevue {
				height: 35px;
				position: relative;
				width: 100%;
				margin: 20px auto 10px;

				.bi {
					display: flex;
					justify-content: space-between;
					width: auto;
					padding-top: 10px;

					.peobox {
						position: absolute;
						right: 0;
						top: -1px;

						.xx {
							width: 5px;
							height: 5px;
							border-radius: 50%;
							background: #fff;
							position: absolute;
							z-index: 9;
							border: 2px solid #1b2086;
							top: 9px;
						}
					}
				}

				.item {
					position: relative;
					margin: 0;
					flex: 1;
					height: 5px;
					color: #666;
					font-size: 12px;

					.span1 {
						width: 100%;
						text-align: center;
						position: absolute;
						top: -23px;
					}

					.span {
						margin-top: 8px;
						position: absolute;
						right: -8px;
					}
				}
			}
		}

		.yuanxing {
			display: inline-block;
			background: #f19601;
			width: 8px;
			height: 12px;
			margin-right: 5px;
			font-size: 32rpx;
		}

		.btnf {
			font-size: 13px;
			border-radius: 5px;
			height: 22px;
			margin: 0 10px 0 0;
			line-height: 22px;
			color: #fff;
			font-weight: 400;
			width: 44px !important;
			text-align: center !important;
			float: right;
		}

		.tivon {
			display: flex;
			justify-content: center;
			align-content: center;
			align-items: center;

			.bianji {
				width: 20px;
				height: 20px;
				margin-left: 5px;
			}
		}

		.box1 :last-child.list {
			.val {
				width: 25% !important;
			}
		}


		.kcalClass {
			width: 100%;
			text-align: center;
			font-size: 16px;
			line-height: 55px;
			margin: -20px auto;
		}

		.yichang {
			background: #ffe4be;
			color: #ff4239;
			padding: 5px;
			text-align: center;
			border-radius: 5px;
			margin: 0 15px 10px;
		}
	}

	/deep/.uni-collapse-item {
		width: 100% !important;
	}

	/deep/.uni-collapse-item__title-arrow {
		margin-right: 0 !important;
	}

	/deep/.uni-collapse-item__wrap-content.uni-collapse-item--border {
		border-bottom-width: 0
	}
</style>