<template>
	<view class="vip-box">
		<template v-if="vipInfo && vipInfo.vipOrderCount<vipInfo.vipCondition">
			<view class="vip-box-unactive row">
				<view class="col">
					<view class="step-box row items-center">
						<view class="line" :style="{width:`${(vipInfo.vipOrderCount/vipInfo.vipCondition)*100}%`}"></view>
						<view class="step-item" :class="{'active':x<vipInfo.vipOrderCount}" v-for="x in vipInfo.vipCondition">
							{{x+1}}
						</view>
					</view>
				</view>
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png" class="vip-logo"></image>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"vip",
		props:['statistics'],
		data() {
			return {
				vipInfo:null,
			};
		},
		watch:{
			statistics:{
				handler(newVal,oldVal){
					this.vipInfo = newVal
				},
				deep:true,
			}	
		},
		mounted() {
			
		},
		methods:{
			
		}
	}
</script>

<style scoped>
	@import url('../../asset/css/flex.css');
@font-face {
  font-family: "dinAli";
  src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/BFOHNMvFqM80.woff2") format("woff2");
  font-display: swap;
}
.vip-box{
	padding-top: 28rpx;
}
.vip-box-unactive{
	padding:0rpx;
	background: linear-gradient(90deg, #3F423F, #313131);
	position: relative;
	border-radius: 18rpx;
}
.vip-box-unactive .vip-logo{
	right: 0;
	width: 87rpx;
	height: 99rpx;
	top: -37rpx;
	position: absolute;
	z-index: 4;
}
.vip-box-unactive .remark{
	font-size: 24rpx;
	color: #E2C27A;
	line-height: 1;
	margin-bottom: 16rpx;
}
.vip-box-unactive .step-box{
	position: relative;
	justify-content: space-between;
}
.vip-box-unactive .step-box::after,
.vip-box-unactive .step-box .line{
	height: 10rpx;
	background: #C99E59;
	border-radius: 5rpx;
	left: 0;
	top: 10rpx;
	position: absolute;
	z-index: 2;
}
.vip-box-unactive .step-box::after{
	z-index: 1;
	background: #2E2E2E;
	border-radius: 0;
	right: 0;
	content: ' ';
	display: block;
}
.vip-box-unactive .step-item{
	/* font-weight: 400; */
	font-size: 24rpx;
	color: #494949;
	width: 30rpx;
	height: 30rpx;
	background: #2E2E2E;
	border-radius: 50%;
	position: relative;
	z-index: 3;
	text-align: center;
	font-family: dinAli;
	text-align: center;
	line-height: 34rpx;
	font-weight: bolder;
}
.vip-box-unactive .step-item.active{
	background: linear-gradient(270deg, #C99E59, #FFFFB3);
	color: #583F2C;
}
</style>