<template>
	<!-- 等级说明 -->
	<view>
		<loadlogo v-if="!loadlogo" />
		<view v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="current-level">
				<view class="user-level dis-flex flex-x-between flex-y-center">
					<view class="user-info dis-flex flex-y-center">
						<image :src="userinfo.avatar" class="user-avatar"></image>
						<view class="user-name f-26 col-f">{{userinfo.nickname}}</view>
					</view>
					<view class="level-info dis-flex flex-y-center">
						<image :src="imgfixUrls + 'level.png'" class="level-icon"></image>
						<view class="level f-26 col-level">{{userlevel.name}}</view>
					</view>
				</view>
				<view class="level-list" :style="{'transform': 'translateX('+(50 + 50*current)+'%)'}">
					<view class="level-item" v-for="(item,index) in levelList" :key="index" @click="levelChange(index,item.id)">
						<view class="dis-flex flex-dir-column flex-x-center flex-y-center">
							<view class="level-dot"></view>
							<image :src="imgfixUrls + 'vip.png'" class="level-vip" v-if="self_leave === item.id"></image>
							<view class="level-text f-26" :class="[self_leave === item.id?'f-30 f-w':'f-26']">{{item.name}}</view>
						</view>
						<view class="item-line" v-if="index !== levelList.length - 1"></view>
					</view>
				</view>
			</view>
			<view class="upgrade-info b-f">
				<part-loading ref="partLoading"></part-loading>
				<view class="up-item" v-if="levelDetail">
					<view class="up-title">{{TextSubstitution.yjtext}}比例</view>
					<view class="up-content">	
						<view class="commission-item dis-flex flex-y-center flex-x-between">
							<view class="commission-left dis-flex flex-y-center">
								<image :src="imgfixUrls + 'yongjin.png'" class="commission-icon"></image>
								<view class="commission-text f-26">一级{{TextSubstitution.yjtext}}</view>
							</view>
							<view class="commission-right f-30 f-w">{{levelDetail.onecommission}}%</view>
						</view>
						<view class="commission-item dis-flex flex-y-center flex-x-between" v-if="levelDetail.hierarchy=='2'">
							<view class="commission-left dis-flex flex-y-center">
								<image :src="imgfixUrls + 'yongjin.png'" class="commission-icon"></image>
								<view class="commission-text f-26">二级{{TextSubstitution.yjtext}}</view>
							</view>
							<view class="commission-right f-30 f-w">{{levelDetail.twocommission}}%</view>
						</view>
						<!-- 					<view class="commission-item dis-flex flex-y-center flex-x-between">
						<view class="commission-left dis-flex flex-y-center">
							<image :src="imgfixUrls + 'yongjin.png" class="commission-icon"></image>
							<view class="commission-text f-26">三级佣金</view>
						</view>
						<view class="commission-right f-30 f-w">{{levelDetail.threecommission}}</view>
					</view> -->
					</view>
				</view>
				<view class="up-item" v-if="levelDetail.flag || levelDetail.flag1 || levelDetail.flag2 || levelDetail.flag3 || levelDetail.flag4 || levelDetail.flag5">
					<view class="up-title dis-flex flex-x-between flex-y-end">
						<view >升级条件</view>
						<view class="col-9 f-24">满足以下条件</view>
					</view>
					<view class="up-content">
						<!-- <view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">{{levelDetail.levelupstatus==0?`已结算总${TextSubstitution.yjtext}`:levelDetail.levelupstatus==1?'下级总人数':levelDetail.levelupstatus==2?'一级下级人数':levelDetail.levelupstatus==3?'下级'+TextSubstitution.fxstext+'总人数':levelDetail.levelupstatus==5?'自购订单金额':'一级'+TextSubstitution.fxstext+'人数'}}<text class="upstand-text">{{levelDetail.upstandard}}{{levelDetail.levelupstatus==0 || levelDetail.levelupstatus==5?'元':'人'}}</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance===0?'0':levelDetail.distance}}{{levelDetail.levelupstatus==0  || levelDetail.levelupstatus==5?'元':'人'}}</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance===0}">{{levelDetail.distance===0?"已完成":"未完成"}}</view>
						</view> -->
						
						<view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">{{`已结算总${TextSubstitution.yjtext}`}}<text class="upstand-text">{{levelDetail.upstandard}}元</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance}}元</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance==0}">{{levelDetail.distance==0?"已完成":"未完成"}}</view>
						</view>
						
						<view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag1==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">下级总人数<text class="upstand-text">{{levelDetail.upstandard1}}人</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance1}}人</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance1==0}">{{levelDetail.distance1==0?"已完成":"未完成"}}</view>
						</view>
						
						<view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag2==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">一级下级人数<text class="upstand-text">{{levelDetail.upstandard2}}人</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance2}}人</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance2==0}">{{levelDetail.distance2==0?"已完成":"未完成"}}</view>
						</view>
						
						<view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag3==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">{{'下级'+TextSubstitution.fxstext+'总人数'}}<text class="upstand-text">{{levelDetail.upstandard3}}人</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance3}}人</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance3==0}">{{levelDetail.distance3==0?"已完成":"未完成"}}</view>
						</view>
						
						<view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag4==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">{{'一级'+TextSubstitution.fxstext+'人数'}}<text class="upstand-text">{{levelDetail.upstandard4}}人</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance4}}人</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance4==0}">{{levelDetail.distance4==0?"已完成":"未完成"}}</view>
						</view>
						
						<view class="condition-item border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="levelDetail.flag5==1">
							<view class="condition-detail">
								<view class="f-28 col-3 m-btm10">自购订单金额<text class="upstand-text">{{levelDetail.upstandard5}}元</text></view>
								<view class="f-24 col-9">当前还差{{levelDetail.distance5}}元</view>
							</view>
							<view class="condition-status" :class="{'completed':levelDetail.distance5==0}">{{levelDetail.distance5==0?"已完成":"未完成"}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import PartLoading from "@/components/template/PartLoading.vue"
	import Loadlogo from '@/components/template/loadlogo'
	export default {
		data() {
			return {
				userinfo: {}, //用户信息
				current: -1,
				self_leave: "1",
				levelList: [], //分销商等级
				levelDetail: {}, //当前分销等级详情
				userlevel: {}, //用户分销等级
				loadlogo: false,
				TextSubstitution:null
			};
		},
		components: {
			PartLoading,
			Loadlogo
		},
		computed: {

		},
		onLoad(options) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#FF5454'
			})
			this.getLevelDetail()
			this.TextSubstitution=uni.getStorageSync('TextSubstitution');
		},
		methods: {
			getLevelDetail() {
				let _this = this;
				App._post_form('&p=distribution&do=disLvInfo', {}, res => {
					let levelList = res.data.lv_list,
						levelIndex = levelList.findIndex(item => item.id == res.data.dislevel),
						userInfo = {
							avatar: res.data.avatar,
							nickname: res.data.nickname
						},
						levelDetail = res.data,
						itemlevelData = null;
					_this.levelList.splice(0, levelList.length, ...levelList);
					levelIndex = levelIndex > 0 ? levelIndex : 0;
					itemlevelData = levelList[levelIndex];
					_this.setData({
						self_leave: itemlevelData.id,
						current: 0 - levelIndex,
						userlevel: itemlevelData,
						userinfo: userInfo,
						levelDetail: levelDetail,
						loadlogo: true
					});

					_this.$nextTick(function() {
						_this.$refs.partLoading.showChange();
					})
				})
			},
			getLeaveData(leave_id) {
				let _this = this;
				App._post_form("&p=distribution&do=disLvInfo", {
					id: leave_id
				}, (res) => {
					let levelDetail = res.data;
					_this.levelDetail = levelDetail;
					_this.$nextTick(function() {
						_this.$refs.partLoading.showChange();
					})
				})
			},
			levelChange(index, leave_id = 0) {
				this.$refs.partLoading.showChange();
				this.current = 0 - index;
				this.getLeaveData(leave_id);
			}
		}
	}
</script>

<style scoped>
	.col-level {
		color: #BA721B;
	}

	.current-level {
		overflow-x: hidden;
		height: 370upx;
		background: linear-gradient(-29deg, rgba(255, 68, 68, 1), rgba(255, 91, 91, 1));
	}

	.upgrade-info {
		position: relative;
		min-height: calc(100vh - 370upx + 60upx);
		/* #ifdef H5 */
		min-height: calc(100vh - 370upx + 60upx - 44px);
		/* #endif */
		border-radius: 30upx 30upx 0 0;
		margin-top: -60upx;
		padding: 40upx 30upx 0;
		box-sizing: border-box;
	}

	.upgrade-info::after {
		content: " ";
		position: absolute;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
		border-width: 10px;
		border-style: solid;
		border-color: transparent transparent #FFFFFF transparent;
	}

	.upgrade-info>>>.part-loading {
		top: 40upx;
	}

	.user-level {
		padding-top: 40upx;
	}

	.user-info {
		margin-left: 30upx;
	}

	.user-info .user-avatar {
		width: 54upx;
		height: 54upx;
		display: block;
		margin-right: 10upx;
		border-radius: 50%;
	}

	.level-info {
		height: 54upx;
		background: #F6C115;
		border-radius: 50px 0 0 50px;
		padding: 0 24upx;
	}

	.level-info .level-icon {
		width: 26upx;
		height: 26upx;
		display: block;
		vertical-align: bottom;
		margin-right: 10upx;
	}

	.level-list {
		margin: 65upx 100upx 0;
		white-space: nowrap;
		transition: transform 400ms;
	}

	.level-item {
		position: relative;
		display: inline-block;
		width: 50%;
		transform: translateX(-50%);
	}

	.level-dot {
		width: 20upx;
		height: 20upx;
		border-radius: 50%;
		background: #FFF589;
		margin-right: 0 auto;
		border: 8upx solid #FF7755;
		margin-bottom: 12upx;
		position: relative;
		z-index: 2;
	}

	.level-vip {
		width: 59upx;
		height: 65upx;
		display: block;
		margin-top: -60upx;
		position: relative;
		z-index: 3;
	}

	.level-text {
		color: #FFC0C0;
		margin-top: 10upx;
	}

	.level-text.active {}

	.item-line {
		position: absolute;
		top: 12upx;
		left: 0;
		right: 0;
		height: 10upx;
		transform: translateX(50%);
		background: #FF7755;
	}

	.up-title {
		color: #333333;
		font-size: 30upx;
		font-weight: bold;
		margin-bottom: 40upx;
	}

	.up-title.dis-flex {
		margin-bottom: 0;
	}

	.up-content {
		padding-bottom: 40upx;
	}

	.up-title .col-9 {
		font-weight: normal;
	}

	.commission-item {
		height: 80upx;
		background: rgba(255,166,166,0.2);
		padding: 0 25upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
	}

	.commission-left .commission-icon {
		width: 36upx;
		height: 36upx;
		display: block;
		margin-right: 20upx;
	}

	.commission-text {
		color: #FF4444;
	}

	.commission-right {
		color: #EB0000;
	}

	.condition-item {
		min-height: 160upx;
	}

	.upstand-text {
		color: rgb(255, 82, 82);
	}

	.condition-status {
		width: 123upx;
		height: 58upx;
		line-height: 58upx;
		background: rgba(246, 246, 246, 1);
		border-radius: 29upx;
		color: #999999;
		font-size: 26upx;
		text-align: center;
	}

	.condition-status.completed {
		color: #BA721B;
		background: #FFF4BB;
	}

	.goods-item {
		padding: 12upx 0;
	}

	.goods-item .goods-thumb {
		width: 110upx;
		height: 110upx;
		border-radius: 8upx;
		display: block;
		margin-right: 12upx;
	}
</style>
