<template>
	<view class="vip-box">
		<template v-if="vipInfo && vipInfo.FinishOrderCount>0 && vipInfo.FinishOrderCount<vipInfo.OrderCount">
			<view class="vip-box-unactive row">
				<view style="margin-top: 25rpx;" class="col">
					<view class="remark row items-center">
						再完成{{vipInfo.OrderCount-vipInfo.FinishOrderCount}}单即可成为VIP，享永久折扣！
						<image style="width: 21rpx;height: 21rpx;margin-left: 10rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528690203686.png"></image>
					</view>
					<view class="step-box row items-center">
						<view class="line" :style="{width:`${(vipInfo.FinishOrderCount/vipInfo.OrderCount)*100}%`}"></view>
						<view class="step-item" :class="{'active':x<vipInfo.FinishOrderCount}" v-for="x in vipInfo.OrderCount">
							{{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:{
			lineId:{
				type:Number
			}
		},
		data() {
			return {
				user:{},
				vipInfo:null,
				userVipRights:{}
			};
		},
		mounted() {
			this.user = uni.getStorageSync('b2b_user')
			this.user = this.user?this.user:{customerId:0},
			this.getUserVipInfo()
		},
		methods:{
			getUserVipInfo(){
				const parameter = {
					VipCusType:1,
					CustomerId:this.user.customerId
				}
				// #ifdef MP-DI
				parameter.VipCusType = 2
				// #endif
				
				this.apipost( "vip_post_CheckCustomerIsVip", parameter,(r) => {
					this.vipInfo = r.data
					const v = r.data
					this.$emit('setUserOrder',v.FinishOrderCount)
					if(v.FinishOrderCount >= v.OrderCount){
						let rule = v.RuleList.find(x=>x.LineId==this.lineId)
						if(!rule) rule = v.RuleList.find(x=>x.LineId==0)
						if(rule) {
							this.userVipRights = rule
							this.$emit('change',this.userVipRights)
						}
						
					}
				})
			}
		}
	}
</script>

<style>
	@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-unactive{
	margin: 25rpx 0rpx;
	padding:0rpx 34rpx 0rpx 34rpx;
	height: 120rpx;
	background: linear-gradient(90deg, #3F423F, #313131);
	position: relative;
	border-radius: 18rpx;
}
.vip-box-unactive .vip-logo{
	right: 34rpx;
	width: 87rpx;
	height: 99rpx;
	top: 15rpx;
	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: 30rpx;
	font-weight: bolder;
}
.vip-box-unactive .step-item.active{
	background: linear-gradient(270deg, #C99E59, #FFFFB3);
	color: #583F2C;
}
</style>