<!--体测数据-详情页-->
<template>
	<view class="overall">
		<view class="date">{{$util.formatToDateTime(surveyInfo.created_at,'Y-m-d')}}</view>

		<view class="content">
			<view class="circle-container">
				<view class="card-con-txt1-left">
					<image :src="$util.img('/uniapp_src/static/images/index/score.png')" class="overlay-image"></image>
				</view>
				<view class="card-con-txt1-left-txt">{{surveyInfo.calculateChildHealthScore}}</view>
				<view class="card-con-txt1-left-txt top1">综合评分</view>
			</view>
			<view style="height: 170rpx;"></view>
			<view style="display: flex;justify-content: space-around;">
				<view style="text-align: center;">
					<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">身高 (CM)</view>
					<view style="font-size: 55rpx;color: #29d3b4;">{{(surveyInfo.height)}}</view>
				</view>
				<view style="text-align: center;">
					<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">体重 (KG)</view>
					<view style="font-size: 55rpx;color: #29d3b4;">{{surveyInfo.weight}}</view>
				</view>
			</view>
			<!--          <view class="coach-message">-->
			<!--            <view>-->
			<!--              <image :src="$util.img('/uniapp_src/static/images/index/lv.png')" class="drop-image"></image>-->
			<!--            </view>-->
			<!--            <view style="padding: 15rpx 0 0 5rpx;line-height: 1.6;font-size: 30rpx;color: #7F7F7F;">{{v.content}}</view>-->
			<!--          </view>-->
			<view class="list_box">
				<view class="ul">
					<view class="li">
						<view class="li_title">坐位体前屈</view>
						<view class="li_content">测试结果：{{surveyInfo.seated_forward_bend}}</view>
					</view>

					<view class="li">
						<view class="li_title">仰卧卷腹</view>
						<view class="li_content">测试结果：{{surveyInfo.sit_ups}}</view>
					</view>

					<view class="li">
						<view class="li_title">九十度仰卧撑</view>
						<view class="li_content">测试结果：{{surveyInfo.push_ups}}</view>
					</view>

					<view class="li">
						<view class="li_title">火烈鸟平衡测试</view>
						<view class="li_content">测试结果：{{surveyInfo.flamingo_balance}}</view>
					</view>

					<view class="li">
						<view class="li_title">三十秒双脚连续跳</view>
						<view class="li_content">测试结果：{{surveyInfo.thirty_sec_jump}}</view>
					</view>

					<view class="li">
						<view class="li_title">立定跳远</view>
						<view class="li_content">测试结果：{{surveyInfo.standing_long_jump}}</view>
					</view>

					<view class="li">
						<view class="li_title">4乘10m灵敏折返跑</view>
						<view class="li_content">测试结果：{{surveyInfo.agility_run}}</view>
					</view>

					<view class="li">
						<view class="li_title">走平衡木</view>
						<view class="li_content">测试结果：{{surveyInfo.balance_beam}}</view>
					</view>

					<view class="li">
						<view class="li_title">网球掷远</view>
						<view class="li_content">测试结果：{{surveyInfo.tennis_throw}}</view>
					</view>

					<view class="li">
						<view class="li_title">十米往返跑</view>
						<view class="li_content">测试结果：{{surveyInfo.ten_meter_shuttle_run}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import memberApi from '@/api/member.js';
	import apiRoute from '@/api/apiRoute.js';
	export default {
		data() {
			return {
				survey_id: '', //评测id

				surveyInfo: {}, //评测详情
			}
		},
		onLoad(options) {
			this.survey_id = options.survey_id //评测id
		},
		onShow() {
			this.init()
		},
		methods: {
			//初始化
			async init() {
				this.getInfo()
			},

			//评测详情
			async getInfo() {
				let data = {
					survey_id: this.survey_id
				}
				let res = await apiRoute.physicalTestInfo(data)
				if (res.code != 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
				this.surveyInfo = res.data
			},
		}
	}
</script>

<style lang="less" scoped>
	.overall {
		width: 100%;
		height: 100vh;
		background-color: #29d3b4;
	}

	.date {
		color: #fff;
		width: 92%;
		margin: auto;
		text-align: left;
		font-size: 30rpx;
		padding: 20rpx 0;
	}

	.content {
		width: 92%;
		height: 70vh;
		background-color: #fff;
		border-radius: 15rpx;
		margin: 150rpx auto 0;
		position: relative;
	}

	.circle-container::before {
		content: '';
		width: 200px;
		height: 100px;
		background-color: #fff;
		border-radius: 100px 100px 0 0;
		display: inline-block;
		transform: translate(-50%, 0) rotate(0deg);
		transform-origin: center top;
		position: absolute;
		top: -12%;
		left: 50%;
		transform: translate(-50%, -0%);
	}

	.card-con-txt1-left {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.overlay-image {
		width: 300rpx;
		height: 200rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.card-con-txt1-left-txt {
		font-size: 32rpx;
		color: #29d3b4;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -0%);
	}

	.top1 {
		top: 5%;
	}

	.coach-message {
		width: 92%;
		margin: 10rpx auto;
		display: flex;
	}

	.drop-image {
		width: 60rpx;
		height: 60rpx;
		align-items: center;
	}
	
	.list_box{
	  font-size: 30rpx;
	  text-align: center;
	  margin-top: 120rpx;
	  .ul{
	    padding: 0 20rpx;
	    display: flex;
	    flex-wrap: wrap; /* 允许换行 */
	    justify-content: space-between;
	    align-items: center;
	    gap: 20rpx;
	    .li{
	      width: 48%; /* 每个列表项占宽度的48%，留出一些间距 */
	      display: flex;
	      flex-direction: column;
	      gap: 5rpx;
	      .li_title{
	        text-align: left;
	      }
	      .li_content{
	        text-align: left;
	      }
	    }
	  }
	}
</style>