<template>
	<view>
		<view class=" cankao">
			<view class="top_title">
				参考
			</view>
			<view class="flx jcsb lt_title">
				<view class="flx ac">
					<view class="little-circle color0">
					</view>
					<view class="wz">
						偏低
					</view>
				</view>
				<view class="flx ac">
					<view class="little-circle color1">
					</view>
					<view class="wz">
						正常
					</view>
				</view>
				<view class="flx ac">
					<view class="little-circle color2">
					</view>
					<view class="wz">
						偏高
					</view>
				</view>
			</view>
			<view class="ck_tb">
				<view :class="'flx jcsb ac'" v-for="(v,index) in cankaoData" :key="index">
					<view class="tb_tt">
						{{v.name}}
					</view>
					<view class=" zzt">
						<view class="xnz" v-if="v.data[v.data.length-1] != v.max" style="z-index: 20;">
							
						</view>
						<view class="flx fd_row">
							<view v-if="v.data.length == 3||idx1 > 0" :class="'zzt-body mmtt color'+(v.data.length == 3?idx1:idx1 - 1)" v-for="(vv,idx1) in v.data" :key="idx1" :style="'position: relative;flex:'+ (((vv > v.max?v.max:vv) - v.data[idx1-1])/v.max)">
								<view class="" v-if="v.data.length == 4 && idx1 == 1" :style="getPostion(0,v.data)">
									0
								</view>
								<view :style="getPostion(idx1,v.data)">
									{{vv}}
								</view>
							</view>
						</view>
						<view style="height: 30rpx;"></view>
						<!-- <view class="flx fd_row a123">
							<view v-if="idx1 > 0" :class="'flx '+ (idx1 == 1?'jcsb': 'jc-end')"  v-for="(vv,idx1) in v.data" :key="idx1" :style="'flex:'+ ((((vv > v.max?v.max:vv) - v.data[idx1-1])/v.max) + v.adjustment[idx1-1])">
							<view class="font-small">
								{{ idx1 == 1?v.data[idx1-1]:''}}
							</view>
							<view class="font-small">
								{{vv}}
							</view>
							</view>
						</view> -->
						
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		name:"cankao",
		props:{
			cankaoData:Array,
		},
		data() {
			return {
				
			};
		},
		methods:{
			getPostion(idx,data){
				// position: absolute;top:10rpx;right: 0;font-size: 24rpx;
				let json = {
					position:"absolute",
					top:"22rpx",
					right:"-10rpx",
					fontSize:"24rpx"
				}
				if(idx == 0){
					json.left = '2rpx'
				}
				if(idx + 1 == data.length){
					json.right = 0
				}
				return json
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body-style {
		background-color: #f6f6f6;
	}
	.color0{
		background-color: #a6e6aa;
	}
	.color1{
		background-color: #29cf6f;
	}
	.color2{
		background-color: #fb8646;
	}
	.little-circle{
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		
	}
	.box-rds {
		background-color: #fff;
		border-radius: 40rpx;
		margin: 10rpx;
	}
	.cankao{
		margin: 50rpx;
		.top_title{
			padding-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 800;
		}
		.lt_title{
			padding:20rpx 60rpx;
		}
		.wz{
			font-size: 24rpx;
			margin-left: 10rpx;
			color: #a8a8a8;
		}
		
	}
	.ck_tb{
		.tb_tt{
			font-size: 30rpx;
		}
		.zzt{
			position: relative;
			padding: 20rpx 0;
			width: 70%;
			.xnz{
				width: 8rpx;
				height: 20rpx;
				// background-color: #fff;
				// border-left: 1rpx solid black;
				// border-right:  1rpx solid black;
				// position: absolute;
				// right: 50rpx;
				// top: 19rpx;
				// transform: rotate(15deg);
			}
			.zzt-body{
				height: 10rpx;
				margin: 2rpx;
			}
			.zzt-body:nth-child(1){
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;;
			}
			.zzt-body:nth-child(3){
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;;
			}
			.font-small{
				font-size: 24rpx;
			}
		}
	}
	
	.flx{
		display: flex;
		
	}
	.jc-end{
		justify-content: end;
	}
	.jc-start{
		justify-content: end;
	}
	.ac{
		align-items: center;
	}
	.jc{
		justify-content: center;
	}
	.jcsb{
		justify-content: space-between;
	}
	.fd_row{
		flex-direction: row;
	}
</style>
