<template>
	<view class="">
		<view class="nolist" v-if="!info">
			<image src="@/static/none.png"></image>
			<text>暂无数据，请手动添加~</text>
		</view>
		<view class="box" v-if="info&&info.top_list.length">
			<view class="time">{{info?info.record_time:''}}</view>
			<view class="item2">
				<view class="item2_data" v-for="(item,index) in info.top_list" @click="handleToggleTop(item)">
					<view class="data ">
						<view class="c666 mb-5">{{item.name}}</view>
						<view><text>{{item.value}}</text>{{item.unit}}</view>
					</view>
				</view>
				<view class="myinfoPage" v-if="infoListTop">
					<view class="desc">
						<view v-if="infoListTop.desc" class="ming">{{infoListTop.desc}}</view>
						<view :class="[infoListTop.list.length?'statuevue':'']" v-if="infoListTop.list">
							<view class="bi">
								<view :style="'left:'+infoListTop.offset+'%'" class="peobox">
									<view class="xx"></view>
								</view>
								<view class="item" v-for="(ite , ind) in infoListTop.list" :key="ind"
									:style="{backgroundColor:ite.color}">
									<view class="span1">{{ite.text}}</view>
									<view class="span" v-if="ind<infoListTop.list.length-1">{{ite.max_val}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="box2" v-if="info">
			<view>身体得分：{{info?info.score_value:0}}分</view>
			<view>身体类型：{{info?info.body_type_value:'无'}}</view>
		</view>
		<!--  -->
		<view class="info">
			<view class="item" @click="$store.commit('changeRecord', true)">
				<text class="t-icon-jilu1 t-icon"></text>
				<view>手动记录</view>
			</view>
			<view class="item" @click="$tools.handleBluetoothClick()">
				<text class="t-icon-wulianjie t-icon"></text>
				<view>连接设备</view>
			</view>
		</view>
		<!--  -->
		<view class="bold mt-10" v-if="info&&info.bottom_list">其他数据</view>
		<view class="myinfoPage" v-if="info&&info.bottom_list">
			<view class="box1">
				<uni-collapse accordion>
					<uni-collapse-item class="list" v-for="(item,index) in info.bottom_list" :key="index">
						<template v-slot:title>
							<uni-list-item class="block">
								<view class="name">
									<icon class="t-icon iconfont" :class="'t-icon-'+item.key_name"></icon>
									{{item.name}}
								</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.standard=='异常'?'#FFF':item.color)}"
										:class="[item.standard=='异常'?'btnC':'']">
										{{item.standard=='异常'?'-':item.standard}}
									</view>
								</view>
							</uni-list-item>
						</template>
						<view class="desc">
							<view v-if="item.desc" class="ming">{{item.desc}}</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.max_val}}</view>
									</view>
								</view>
								<view v-else>
									<view class="kcalClass" v-if="item.list&&item.list.length">
										标准值:{{item.list[0].max_val}}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>
		<!-- 手动记录 -->
		<record :rtype="acd_id"></record>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import record from '@/components/manuallyAdd/record.vue';
	export default {
		data() {
			return {
				infoList: [],
				infoListTop: {}
			}
		},
		props: {
			acd_id: ""
		},
		components: {
			record
		},
		computed: {
			...mapState(["MeasureResult"]),
			info() {
				let that = this
				that.infoListTop = that.MeasureResult ? that.MeasureResult.top_list[0] : {}
				return that.MeasureResult
			},
		},
		mounted() {},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleToggleTop(item) {
				this.infoListTop = item
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;

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

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

			.item2_data {
				width: 33%;

				.data {
					width: 100%;
					text-align: center;
					border-right: 1PX solid #f7f7f7;
				}

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

	.box2 {
		height: 50px;
		line-height: 50px;
		border-radius: 10px;
		display: flex;
		padding: 0 10px;
		justify-content: space-between;
		margin-bottom: 10px;
		background-color: #fff;
	}

	.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%;
				color: #666;
				padding: 0;
				line-height: 50px;
				// display: flex;
				// justify-content: space-between;
				// 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% !important;
			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>