<template>
	<view>
		<view class="" v-if="key_name == 'bodyData'">
			<view class="flx flx_sb flx_ac">
				<view class="flx">
					<view class="">
						<text class="iconfont icon-wode" :style="'font-size:40rpx;color:'+bodyData.BMI.color"></text>
					</view>
					<view class=" " style="margin: 0 10rpx;padding-top: 2rpx;">
						{{ bodyData.BMI.name }}
					</view>
					<view class="" style="font-size: 24rpx;color: #999;padding-top: 6rpx;">
						 {{ item.hour_minute }}
					</view>
				</view>
				<view class="">
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="flx flx_sb " >
				<view class="" v-for="(v,i) in Object.keys(bodyData)" :key="i" style="width: 100%;margin-top: 20rpx;">
					<view class="flx flx_ac flx_jc">
						<view class="">
							{{  item.data_msg[v]  }}
						</view>
						<view class="" style="margin-left: 10rpx;">
							<text :class="'iconfont ' + bodyData[v].icon_key " :style="'font-size:40rpx;color:'+bodyData[v].color"></text>
						</view>
					</view>
					<view class="" style="font-size: 24rpx;color: #999;text-align: center;">
						{{bodyData[v].title}}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="key_name == 'ECGData'">
			<view class="flx flx_sb flx_ac">
				<view class="flx">
					
					<view class=" " style="margin: 0 10rpx;padding-top: 2rpx;">
						<image src="../../static/icon/xinlv.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view class="" style="font-size: 24rpx;color: #999;padding-top: 6rpx;">
						 {{ item.hour_minute }}
					</view>
				</view>
				<view class="">
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="flx flx_sb " >
				<view class="" v-for="(v,i) in Object.keys(ECGData)" :key="i" style="width: 100%;margin-top: 20rpx;">
					<view class="flx flx_ac flx_jc">
						<view class="">
							{{  item.data_msg[v]  }}
						</view>
						<view class="" style="margin-left: 10rpx; font-size: 24rpx;color: #666;">
							{{ ECGData[v].unit }}
						</view>
					</view>
					<view class="" style="font-size: 24rpx;color: #999;text-align: center;">
						{{ ECGData[v].name }}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="key_name == 'bloodLiquid'">
			<view class="flx flx_sb flx_ac">
				<view class="flx">
					<!-- <view class="">
						<text class="iconfont icon-wode" :style="'font-size:40rpx;color:'+bodyData.BMI.color"></text>
					</view> -->
					<view class=" " style="margin: 0 10rpx;padding-top: 2rpx;font-size: 24rpx;">
						(毫摩尔/升)
					</view>
					
				</view>
				<view class="">
					<view class="" style="font-size: 24rpx;color: #999;padding-top: 6rpx;">
						 {{ item.hour_minute }}
					</view>
				</view>
			</view>
			<view class="flx flx_sb d_box" style="margin-top: 20rpx;">
				<view class="" :style="{backgroundColor:colorArr[0].bgColor,color:colorArr[0].color}">
					{{item.data_msg.cholesterol/100}}
				</view>
				<view class="" :style="{backgroundColor:colorArr[1].bgColor,color:colorArr[1].color}">
					{{item.data_msg.triacylglycerol/100}}
				</view>
				<view class="" :style="{backgroundColor:colorArr[2].bgColor,color:colorArr[2].color}">
					{{item.data_msg.highDensity/100}}
				</view>
				<view class="" :style="{backgroundColor:colorArr[3].bgColor,color:colorArr[3].color}">
					{{item.data_msg.lowDensity/100}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"detail_components",
		props:{
			key_name:{
				type:String,
				default:"bodyData"
			},
			item:Object
		},
		data() {
			return {
				bodyData:{
					BMI:{},
					bodyFatPercentage:{},
					muscleRate:{}
				},
				// <view>心率:{{item.data_msg.meanHeartRate}} 次/分</view>
				// <view>HRV：{{item.data_msg.averageHRV}} 毫秒</view>
				// <view>QTc：{{item.data_msg.averageTimeInterval}} 毫秒</view>
				ECGData:{
					meanHeartRate:{
						name:'心率',
						unit:'次/分',
					},
					averageHRV:{
						name:'HRV',
						unit:'毫秒',
					},
					averageTimeInterval:{
						name:'QTc',
						unit:'毫秒',
					}
				},
				colorArr:[
					{
						color:'#46b4ff',
						bgColor:'#e1f3fd'
					},
					{
						color:'#29cf6c',
						bgColor:'#e2fff3'
					},
					{
						color:'#fcc05d',
						bgColor:'#fef5e3'
					},
					{
						color:'#fa4e33',
						bgColor:'#fee5e1'
					}
				]
			};
		},
		mounted() {
			if(this.key_name == 'bodyData'){
				this.bodyData.BMI = this.$utils.getBodyKeyInfo(this.item.data_msg.BMI,'BMI')
				this.bodyData.BMI.title = "BMI"
				this.bodyData.bodyFatPercentage = this.$utils.getBodyKeyInfo(this.item.data_msg.bodyFatPercentage,'bodyFatPercentage')
				this.bodyData.bodyFatPercentage.title = "体脂率"
				this.bodyData.muscleRate = this.$utils.getBodyKeyInfo(this.item.data_msg.muscleRate,'muscleRate')
				this.bodyData.muscleRate.title = "肌肉率"
			}
			
		}
	}
</script>

<style scoped lang="scss">
.d_box{
	view{
		width: 20%;
		text-align: center;
		border-radius: 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		color: #fff;
	}
	view:nth-child(1){
		background-color: red;
	}
}
</style>