<template>
	<view>
		<view class="flx flx_sb" style="padding:40rpx;padding-bottom: 30rpx;"@click="look()" >
			<view class="flx">
				<view class="" v-if="bodyDataExample[key_name].icon">
					<image :src="bodyDataExample[key_name].icon" style="width: 40rpx;margin-right: 10rpx;" mode="widthFix"></image>
				</view>
				<view class="">
					{{ bodyDataExample[key_name].name}}
				</view>
			</view>
			<view class="flx" >
				<view class="" style="color: #999;">
					{{ value }}{{ bodyDataExample[key_name].unit}}
				</view>
				<view class="" style="margin-left: 14rpx;">
					<text :class="'iconfont '+getKeyInfo(value).icon_key" :style="'font-weight:bold;color:' + colorArr[getKeyInfo(value).colorIdx]"></text>
				</view>
				<view :class="(!open?'':'xuanzhaun')" style="width: 40rpx;height: 40rpx; text-align: center;line-height: 40rpx;">
					<text style="color: #999;" :class="'iconfont icon-right '  "></text>
				</view>
			</view>
		</view>
		<view class="info" v-if="open">
			<view class="" style="height: 40rpx;">
			</view>
			<view class="flx">
				<view class="tzm" v-for="(v,i) in bodyDataExample[key_name].tags" :key="i" :style="'background-color: ' + colorArr[v.colorIdx]">
					<view class="info-val" v-if="v.val > 0">
						{{  v.val }}{{ bodyDataExample[key_name].unit }}
					</view>
					<view class="info-qq">
						<view class="qq" :style="'border: 8rpx solid '+ colorArr[v.colorIdx] +';margin-left:'+getKeyInfo(value,1).margin" v-if="getKeyInfo(value).idx == i">
							
						</view>
					</view>
				</view>
			</view>
			<view class="flx flx_sb">
				<view class="flx tags_name flx_ac" v-for="(v,i) in bodyDataExample[key_name].tags"  :key="i">
					<view class="fk" :style="'background-color:'+ colorArr[v.colorIdx] + ' ;'">
						
					</view>
					<view class="name">
						{{ v.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"body_info_components",
		props:{
			key_name:{
				type:String,
				default:"BMI"
			},
			value:{
				type:Number,
				default:0
			}
		},
	
		data() {
			return {
				open:false,
				// 无标准color
				colorArr : [
					"#5990f5",
					"#29ce70",
					"#fcb041",
					"#fa6820",
					"#1da30f"
				],
				icon_info:{
					
				},
				
				bodyDataExample:{
					BMI:{
						name:"BMI",
						tags:[
							{
								name:'偏瘦',
								colorIdx:0,
								val:18.5,
								icon_key:'icon-down-arrow'
							},
							{
								name:'完美',
								colorIdx:1,
								val:24,
								icon_key:'icon-success'
							},
							{
								name:'超重',
								colorIdx:2,
								val:28,
								icon_key:"icon-up-arrow"
							},
							{
								name:'肥胖',
								colorIdx:3,
								val:0,
								icon_key:"icon-up-arrow"
							}
						],
						unit:'',// 计量单位
						icon:'https://img.agrimedia.cn/-_BMI-tuya.png'
					},
					bodyFatPercentage:{
						name:"体脂率",
						tags:[
							{
								name:'偏瘦',
								colorIdx:0,
								val:18,
								icon_key:'icon-down-arrow'
							},
							{
								name:'完美',
								colorIdx:1,
								val:23,
								icon_key:'icon-success'
							},
							{
								name:'超重',
								colorIdx:2,
								val:30,
								icon_key:"icon-up-arrow"
							},
							{
								name:'肥胖',
								colorIdx:3,
								val:0,
								icon_key:"icon-up-arrow"
							}
						],
						unit:'%',// 计量单位
						icon:'https://img.agrimedia.cn/%E4%BD%93%E8%84%82%E7%8E%871-tuya.png'
					},
					leanBodyMass:{
						name:"去脂体重",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:45.8,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:55.9,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-success"
							},
							
						],
						unit:'千克',// 计量单位
						icon:'https://img.agrimedia.cn/%E5%8E%BB%E8%84%82%E4%BD%93%E9%87%8D-tuya.png'
					},
					muscleRate:{
						name:"肌肉率",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:68.1,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:84.8,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-success"
							},
							
						],
						unit:'%',// 计量单位
						icon:'https://img.agrimedia.cn/Surgery-tuya.png'
					},
					muscleMass:{
						name:"肌肉量",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:40.8,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:50.8,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-success"
							},
							
						],
						unit:'千克',// 计量单位
						icon:'https://img.agrimedia.cn/watch-app/exercise-tuya.png'
					},
					subcutaneousFat:{
						name:"皮下脂肪",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:8.6,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:16.7,
								icon_key:'icon-success'
							},
							{
								name:'高',
								colorIdx:2,
								val:0,
								icon_key:"icon-up-arrow"
							},
							
						],
						unit:'%',// 计量单位
						icon:'https://img.agrimedia.cn/008%E7%9A%AE%E4%B8%8B%E8%84%82%E8%82%AA-tuya.png'
					},
					bodyMoisture:{
						name:"体内水分",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:53.4,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:66.6,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-up-arrow"
							},
							
						],
						unit:'%',// 计量单位
						icon:'https://img.agrimedia.cn/watch-app/%E6%B0%B42-tuya.png'
					},
					skeletalMuscleRate:{
						name:"骨骼肌",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:25,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:35,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-success"
							},
							
						],
						unit:'%',// 计量单位
						icon:'https://img.agrimedia.cn/watch-app/%E9%AA%A8%E9%AA%BC%E8%82%8C%E7%8E%87-tuya.png'
					},
					boneMass:{
						name:"骨重",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:2.9,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:3.7,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-up-arrow"
							},
							
						],
						unit:'千克',// 计量单位
						icon:'https://img.agrimedia.cn/%E9%AA%A8%E9%87%8D.png'
					},
					proteinAmount:{
						name:"蛋白质",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:14.1,
								icon_key:'icon-down-arrow'
							},
							{
								name:'标准',
								colorIdx:1,
								val:17.7,
								icon_key:'icon-success'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-up-arrow"
							},
							
						],
						unit:'%',// 计量单位
						icon:'https://img.agrimedia.cn/%E8%9B%8B%E7%99%BD%E8%B4%A8-tuya.png'
					},
					basalMetabolicRate:{
						name:"基础代谢",
						tags:[
							{
								name:'低',
								colorIdx:0,
								val:1619,
								icon_key:'icon-down-arrow'
							},
							{
								name:'完美',
								colorIdx:4,
								val:0,
								icon_key:"icon-success"
							},
							
						],
						unit:'千卡',// 计量单位
						icon:'https://img.agrimedia.cn/%E5%9F%BA%E7%A1%80%E4%BB%A3%E8%B0%A2.png'
					},
				}
			};
		},
		mounted() {
			// let val = this.getKeyInfo(this.value)
			// let body =this.$utils.getPwd('123456')
		},
		methods:{
			look(){
				this.open = !this.open
			},
			getKeyInfo(val,type = 0){
				let back = {}
				let data  = this.bodyDataExample[this.key_name].tags
				data.map((v,i) => {
					if(i == 0){
						if(val < v.val){
							back = v
							back.prev_val = 0
							back.idx = i
							back.margin = ((val / (v.val - 0)) * 100).toString() + '%'
						}
					}else{
						
						if(val >= data[i-1].val && (val < v.val || v.val == 0)){
							
							back = v
							back.prev_val = data[i-1].val
							back.idx = i
							if(v.val == 0){
								back.margin = '20%'
							}else{
								back.margin = (((val - data[i-1].val) / (v.val - data[i-1].val)) * 100).toString() + '%'
							}
						}
					}
				})
				return back
			}
		}
	}
</script>

<style lang="scss" scoped>
.xuanzhaun{
	transform: rotate(90deg);
}
.info{
	background-color: #e7faf8;
	padding: 20rpx;
	.tags_name{
		margin: 40rpx 0 20rpx 0;
		.fk{
			width: 15rpx;
			height: 15rpx;
			border-radius: 5rpx;
		}
		.name{
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}
	.tzm{
		height: 20rpx;
		width: 100%;
		position: relative;
		.info-val{
			position: absolute;
			color: #999;
			font-size: 24rpx;
			right: -50%;
			top: -40rpx;
			width: 100%;
			
			text-align: center;
		}
		.info-qq{
			position: absolute;
			width: 100%;
			left: -12rpx;
			top: -6rpx;
			z-index: 99;
			
			.qq{
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #fff;
			}
		}
	}
	.tzm:first-child{
		border-top-left-radius:20rpx;
		border-bottom-left-radius:20rpx;
	}
	.tzm:last-child{
		border-top-right-radius:20rpx;
		border-bottom-right-radius:20rpx;
	}
}
</style>