<template>
	<view>
		<view class='brokerage-details'>
			<view class='header'>
				<view class='currentScore'>当前分销等级 </view>
				<text @click="showProtocol=true" class="brokerageRule">等级规则</text>
				<view v-if="userInfo.brokerage" class='nav'>
					<image v-if="userInfo.brokerage.brokerage_icon" class="level_icon" :src="userInfo.brokerage.brokerage_icon"></image>
					<image v-else class="level_icon" src="../static/images/level_avatar.png"></image>
					<text class="level_text">{{userInfo.brokerage.brokerage_name}}</text>
				</view>
			</view>
			<view class='wrapper'>
				<view class="grade">
					<view class="grade-table">
					 <view class="tr bg-w">
						 <view class="th table-bg"><text class="text text-bg">等级权益</text></view>
						 <view class="th"><text class="text">一级佣金上浮</text></view>
						 <view class="th"><text class="text">二级佣金上浮</text></view>
					 </view>
					 <view class="bg-g">
						 <block v-for="(item,index) in gradeList" :key="index">
						 	 <view class="tr" :class="item.brokerage_level == (userInfo.brokerage &&userInfo.brokerage.brokerage_level) ? 'current' : ''">
						 			<view class="td td-img">
						 				<img class="table_icon" :src="item.brokerage_icon" alt="">{{item.brokerage_name}}
									</view>
						 			<view class="td">{{item.extension_one}}%</view>
						 			<view class="td">{{item.extension_two}}%</view>
						 	</view>
						 </block>
					 </view>
					</view>
				</view>
				<view class='task'>
					<view class="task_title">
						<view class="title-t">做任务<i>.</i>提升等级</view>
						<text v-if="(userInfo.brokerage && userInfo.brokerage.brokerage_level) != (userInfo.next_brokerage && userInfo.next_brokerage.brokerage_level)" class="title-b">
							完成每级对应的任务，即可解锁下一个等级
						</text>
						<text v-else class="title-b">
							您已升至最高等级，邀请好友赚佣金吧 <text class="iconfont icon-xiangyou"></text>
						</text>
					</view>
					<view class="task_status">
						<view class='process_count acea-row row-between-wrapper'>
							<view class="text_line text_line1">
								<view class="icon_count duihao"><text class="iconfont icon-duihao"></text></view>
								<view class="task_level level1" v-if="userInfo.brokerage">
									{{userInfo.brokerage.brokerage_name}}
									<text class="level_text">(当前等级)</text>
								</view>
							</view>
							<view class="text_line text_line2">
								<view class="task_current">
									<image v-if="userInfo.next_brokerage" class="level_current" :src="userInfo.next_brokerage.brokerage_icon"></image>
								</view>
								<view class="task_level level2" v-if="userInfo.next_brokerage">
									{{userInfo.next_brokerage.brokerage_name}}
									<text class="level_text" v-if="userInfo.brokerage && userInfo.next_brokerage">
									{{ userInfo.brokerage.brokerage_level == userInfo.next_brokerage.brokerage_level
									? '(已完成)' : '(进行中)'}}
									</text>
								</view>
							</view>
							<view v-if="userInfo.down_brokerage" class="text_line text_line3">
								<view class="icon_count suozi"><text class="iconfont icon-quanxianguanlisuozi"></text></view>
								<view class="task_level level3" v-if="userInfo.down_brokerage">
									{{userInfo.down_brokerage.brokerage_name}}
									<text class="level_text">(未解锁)</text>
								</view>
							</view>
							<view v-else class="text_line text_line3">
								<view class="icon_count quan"></view>
								<view class="task_level level3">
									<text class="level_text">已达到顶级</text>
								</view>
							</view>
						</view>
					</view>
					<!--等级任务-->
					<view class="task_item">
						<view class="title">等级任务</view>
						<view class="item" v-for="(item,index) in userInfo.brokerage_rate" :key="index">
							<view class="item-title">
								<text class="current_state">{{item.name}}</text>
								<text v-if="item.info" class="iconfont wenhao" @click="showInfo(item)">?</text>
								<text class="condition">{{item.rate != 100 ? '未满足条件' : '已满足条件'}}</text>
							</view>
							<view class="task-process">
								<text class="current_val" :style="'width:'+item.rate+'%;'"></text>
							</view>
							<view class="task-experience">
								<text class="task_remain">还需要{{getNumber(item.num-item.task,index)}}{{getNnit(index)}}</text>
								<view class="count"><text class="task_now">{{item.task}}</text>/<text class="task_all">{{item.num}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="instructions" v-if="showProtocol">
			<view class="setAgCount">
				<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
				<div class="title">{{title}}</div>
				<view class="content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>
		<view class="success" v-if="isShowbox">
			<view class="bg"></view>
			<view class="con">
				<image src="images/grade_bg.png" mode=""></image>
				<view class="title">分销等级权益</view>
				<view class="upgrade">{{type == 'level' ? '恭喜您升级啦！' :  type == 'top' ?'恭喜您' : ''}}
					<text v-if="type=='top'" class="top">已升至最高等级</text>
				</view>
				<view class="commission">邀请好友，赚更多的佣金</view>
				<view class="btn" @click="close">我知道了</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>

	import { getBrokerageInfo, getAgreementApi, getBrokerageGrade, brokerageNotice } from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import emptyPage from '@/components/emptyPage.vue';
	import parser from "@/components/jyf-parser/jyf-parser";
  import spread from "../../../libs/spread";
	const app = getApp();
	export default {
		components: {
			authorize,
			emptyPage,
			"jyf-parser": parser,
		},
		data() {
			return {
				userInfo:{},
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false,//是否隐藏授权
				title: '分销等级规则',
				showProtocol: false,
				protocol: '',
				tagStyle: {
					img: 'width:100%;display:block;',
					video: 'width:100%;'
				},
				gradeList: [],
				isShowbox: false,
				type: ''
			};
		},
		computed: mapGetters(['isLogin','uid']),
		onLoad(options) {
			if (this.isLogin) {
				this.getUserInfo();
				this.getGrade();
				this.upgradeRemind();
			} else {
                this.isAuto = true;
                this.isShowAuth = true
			}
			this.getAgreement();

      // 关系处理
      if(options.spread) spread(options.spread, this.isLogin)
		},
		/**
		   * 页面上拉触底事件的处理函数
		   */
		  onReachBottom: function () {

		  },
		methods: {
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				this.getUserInfo();
				this.getGrade();
				this.upgradeRemind();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			getUserInfo: function() {
				let that = this;
				getBrokerageInfo().then(function(res) {
					that.$set(that,'userInfo',res.data);
				}).catch(res => {
					return that.$util.Tips({
						title: res
					});
				});
			},
			/*获取等级说明*/
			getAgreement() {
				let that = this
				getAgreementApi('sys_brokerage').then(res => {
					that.protocol = res.data.sys_brokerage
				})
			},
			/*获取等级任务*/
			getGrade(){
				let that = this;
				getBrokerageGrade().then(function(res) {
					that.gradeList = res.data;
				}).catch(res => {
					return that.$util.Tips({
						title: res
					});
				});
			},
			/*查看任务说明*/
			showInfo(item){
				this.showProtocol = true;
				this.title = item.name;
				this.protocol = item.info;
			},
			// 弹窗关闭
			close(){
				this.isShowbox = false
			},
			/*分销员升级提醒*/
			upgradeRemind(){
				let that = this;
				brokerageNotice({type: 0}).then(function(res) {
					that.isShowbox = true;
					that.type = res.data.type
				}).catch(res => {
					that.isShowbox = false;
				});
			},	
			getNumber(num,task){
				let s = '';
					switch (task) {
						case 'spread_user':
							s = parseInt(num); break;
						case 'pay_num':
							s = parseInt(num); break;
							break;
						case 'spread_money':
							s = num.toFixed(2); break;
							break;
						case 'pay_money':
							s = num.toFixed(2); break;
							break;
						default :
							s = num.toFixed(2)
					}
					return(s);			
			},
			/*获取任务单位*/
			getNnit(task){
				let s = '';
				switch (task) {
				  case 'spread_user':
				    s = '人'; break;
				  case 'pay_num':
				    s = '个'; break;
				    break;
				  case 'spread_money':
				    s = '元'; break;
				    break;
					case 'pay_money':
					  s = '元'; break;
					  break;
				  default :
				    s = '个'
				}
				return(s);
			}
		},
    // #ifdef MP
    // 分享给好友
    onShareAppMessage () {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1]
      let shareData = {
        title: '分销等级',
        path: page.$page.fullPath || '/' + page.route,
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // 分享到朋友圈
    onShareTimeline() {
      let shareData = {
        title: '分销等级',
        query: {},
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.query.spread = this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // #endif
	}
</script>

<style scoped lang="scss">
	.task_status{
		margin-top: 106rpx;
		padding: 0 94rpx;
	}
	.process_count{
		position: relative;
		&:before{
			content: '';
			display: block;
			width: 100%;
			height: 4rpx;
			background-color: rgba(255,255,255,.17);
		}
		.icon_count{
			width: 50rpx;
			height: 50rpx;
			border-radius: 100%;
			border-radius: 100%;
			text-align: center;
			line-height: 50rpx;
			&.duihao{
				background-color: #E93323;
			}
			&.suozi{
				background-color: #FBEACE;
				display: inline-block;
			}
		}
		.text_line{
			position: relative;
			width: 33.3%;
			&.text_line3{
				text-align: right;
			}
		}

		.text_line1,.text_line3{
			top: -25rpx;
		}
		.task_current{
			width: 86rpx;
			height: 86rpx;
			margin: -43rpx auto 0;
			.level_current{
				width: 86rpx;
				height: 86rpx;
			}
		}
		.icon-duihao{
			color: #ffffff;
		}
		.icon-quanxianguanlisuozi{
			color: #000000;
		}
		.task_level{
			text-align: center;
			margin-top: 15rpx;
			position: relative;
			font-size: 24rpx;
			.level_text{
				display: block;
				margin-top: 3rpx;
				font-size: 18rpx;
			}
			&.level1{
				left: -70rpx;
				color: #FFFFFF;
			}
			&.level2{
				color: #FBEACE;
				font-size: 30rpx;
			}
			&.level3{
				right: -70rpx;
				color: #FFFFFF;
				opacity: 0.6;
			}
		}
		.quan{
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
			background-color: #404040;
			border-radius: 100%;
			position: absolute;
			right: -12rpx;
			top: -30rpx;
		}
	}
	.brokerage-details .task_item{
		background-color: #FBEACE;
		border-radius: 30rpx;
		margin: 50rpx 20rpx 0;
		padding: 20rpx 25rpx 40rpx;
		position: relative;
		&:before{
			content: "";
			display: block;
			border: 20rpx solid transparent;
			border-bottom-color: #FBEACE;
			position: absolute;
			top: -40rpx;
			left: 50%;
			margin-left: -20rpx;
		}
		.title{
			color: #282828;
			font-size: 36rpx;
			font-weight: bold;
			text-align: left;
		}
		.item{
			margin-top: 30rpx;
			padding: 25rpx 30rpx 20rpx;
			background: #fff;
			border-radius: 12rpx;
			position: relative;
			&:before{
				content: "";
				display: block;
				width: 6rpx;
				height: 28rpx;
				background-color: #E93323;
				position: absolute;
				top: 30rpx;
				left: 0;
			}
		}
		.item-title{
			position: relative;
			text-align: left;
			.wenhao{
				width: 34rpx;
				height: 34rpx;
				display: inline-block;
				text-align: center;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				border-radius: 50%;
				background-color: #D5D5D5;
				color: #ffffff;
				margin-left: 4rpx;
			}
			.current_state{
				font-size: 28rpx;
				color: #282828;
				font-weight: bold;
			}
			.condition{
				color: #999999;
				font-size: 26rpx;
				float: right;
			}
		}
		.task-process{
			margin-top: 36rpx;
			width: 100%;
			height: 12rpx;
			border-radius: 6rpx;
			background: #E5E5E5;
			position: relative;
			.current_val{
				display: block;
				width: 50%;
				height: 12rpx;
				background: linear-gradient(90deg, #E93323 0%, #FFA363 100%);
				border-radius: 6rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.task-experience{
			margin-top: 20rpx;
			color: #999999;
			text-align: left;
			.count{
				float: right;
				.task_now{
					color: #E93323;
				}
			}
		}
	}

	.brokerage-details{
		min-height: 100vh;
		background-color: #1F1F1F;
		padding-top: 60rpx;
	}
	.brokerage-details .header {
		position: relative;
		background-image: url('data:image/jpg;base64,[encoded data, 63228 characters]');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 490rpx;
		font-size: 72rpx;
		color: #fff;
		box-sizing: border-box;
		text-align: center;
		.brokerageRule{
			font-size: 24rpx;
			color: #FBEACE;
			padding: 7rpx 27rpx;
			border: 1px solid #FBEACE;
			border-radius: 26rpx;
			position: absolute;
			top: 40rpx;
			right: 20rpx;
		}
	}
	.brokerage-details .task{
		text-align: center;
		padding-bottom: 40rpx;
		.title-t{
			width: 438rpx;
			font-size: 46rpx;
			color: #FBEACE;
			font-weight: bold;
			margin:0 auto 18rpx;
			display: inline-block;
			position: relative;
			&:before{
				content: '';
				display: block;
				width: 438rpx;
				height: 17rpx;
				background-size: cover;
				background-image: url('data:image/png;base64,[encoded data, 5460 characters]');
				position: absolute;
				top: 50%;
				margin-top: -8rpx;
				left: 0;
			}
			i{
				display:inline-block;
				font-size: 40rpx;
				font-weight: bold;
				font-style: normal;
				padding: 0 10rpx;
				position: relative;
				top: -10rpx;
			}
		}
		.title-b{
			font-size: 28rpx;
			color: #FBEACE;
			opacity: .7;
			display: block;
			.icon-xiangyou{
				font-size: 16rpx;
				display: inline-block;
				margin-left: 6rpx;
			}
		}
	}

	.brokerage-details .header .currentScore {
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 11rpx;
	}
	.currentScore .wenhao{
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
		border-radius: 100%;
		background-color: #fff;
		color: #e93323;
		margin-left: 4rpx;
	}

	.brokerage-details .header .line {
		width: 60rpx;
		height: 3rpx;
		background-color: #fff;
		margin: 20rpx auto 0 auto;
	}

	.brokerage-details .header .nav {
		flex: 1;
		margin-top: 35rpx;
		.level_icon{
			width: 147rpx;
			height: 147rpx;
		}
		.level_text{
			display: block;
			width: 150rpx;
			text-align: center;
			font-size: 22rpx;
			font-weight: bold;
			color: #FBEACE;
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATAAAABaCAYAAAA/4wp7AAALxElEQVR4Xu2dTUwb6RnHZzzj8Qc2EAjZbkiklaJIVVYIDJhgAgaSoFZqLonUSw/dQ5NDk3ty6h6SU/fevTQ9bC6teuheNlJWMlLAYGNsMEhJpJWiKFIQLYSPgj228fijekby2xl7SNIemLHn/0pIG9bSPM/vffXTO8P4/fMcx3FTU1PjgiAM0X9jgAAIgEAzEKhUKu94KnRmZibS1tZ2rRmKRo0gAAIgQARkWX5VE9gPbW1tvwIWEAABEGgWAtlsNqUK7Nq1a499Pt/vmqVw1AkCIAACsiwvqAKbmJh42NXV9QcgAQEQAIFmISDL8qwqsMnJyfudnZ1/rBVeKBS4ra2tZukDdYIACNiAQEdHB9fZ2ck6zeVyP6oCm56evuv3+/+kFdj29rYNkKBFEACBZiHQ1dXF+Xw+Vm4mk3miCuzq1au3fT7fnyGwZplK1AkC9iNw5swZzu12s8b39/cf1W4hb3Z0dPyj9n9KpRK3ublpP0LoGARAwLIE6gV2cHDwQBXYpUuXfnbhwoV/ait/9+6dZRtBYSAAAvYj0NPTo9uBZbPZe6rAvvjiC3dfX18eArPfokDHINAsBOoFJsvyHVVgNG7cuFHVNrKxsdEsfaFOEAABGxA4e/Ys53A4WKeZTOYWBGaDiUeLINAKBM6dO6dr482bN58fKzB6D0xRlFboGz2AAAi0AIF6gb148cLDBDYzMyNLkuSt9fn+/XuuWCy2QNtoAQRAoBUI9Pb26tp4+vQprxVYRpIk9pYYBNYKU44eQKB1CHxMYAeSJLVjB9Y6E45OQKBVCEiSxNFfIbWjfge263Q6u2of2NnZwS1kq8w++gCBJidAAjt9+jTrolgs5iKRSJv2FnLL6XSeqX0ik8lw9IMBAiAAAmYTMBBYNhKJ+JnApqenX7rd7ktagWWzWbPrxvVBAARAgCOBdXd3MxKKohxGIpEOJrDJycmk1+sdhsCwWkAABKxGwOVycXQaRW0oirIXiUS6mcCmpqaiHo9nHAKz2tShHhAAATpGx+/3awW2HYlEPtMKLOJ2u1mwhyzLeAaGdQMCIGAJAiQw7Vlg+Xz+1dzc3Jdagf3gdrtZsAe9xLq3t2eJ4lEECICAvQkYCCw1NzcXZAILh8OPvV4vC/aAwOy9YNA9CFiJgIHAFubm5iaYwEKh0MP29nYW7EEC29/ft1IPqAUEQMCmBNrb2zmPx8O6z+fzs/Pz89eZwMbGxu77/X4W7AGB2XSloG0QsCCBU6dOqa9S1MbR0dGPz58//yUT2Pj4+F2v18uCPcrlMre7u2vBVlASCICA3QhQGpFWYLlc7snCwsJXTGATExO3PR4PC/YgQEgmstsyQb8gYE0C9QLLZDKP4vH419od2E2v18uCPSAwa04kqgIBOxKoF1g2m30Qi8W+YQKjYI/e3l5dsAcdqYMBAiAAAmYToK8RaY+TlmX5XiwW+5YJjII9Ll68qAv2gMDMnjZcHwRAgAjUH6VTKBTuRKPRx0xg9KGZmRldsAe9RkEZkRggAAIgYCaBeoFls9lb8Xj8e53Arl+/rhPYwcEBzsU3c9ZwbRAAAZWA9iww+vfm5ubnr169+hcEhgUCAiBgeQL1Anv9+rXn7du3BZ3AwuGw7HQ6WbAH7cBwC2n5uUWBINDSBERR5Do6OnQ9zs7Oqu7SCWxycjIjiiIL9oDAWnpdoDkQaAoCnyywcDh84HQ6WbBHLpfj8nndHyabomEUCQIg0DoE/heB7YqiyI49JHlBYK2zENAJCDQjARIYfZm7NhRFyUWj0baGW8hwOLwliiIL9oDAmnG6UTMItBYBp9OpO421VCpl5+fn1eNZdc/AxsfHX0qSxII9ILDWWgjoBgSakQAdo6M9SocCPaLRqPpUXyewsbGxpMvlYsEehUIBt5DNOOOoGQRaiIDb7dYJrFQq7UWjUTWiSCewK1euRCVJYsEeiqJwiFZroZWAVkCgCQkYCGw7Go1+ZrQDi0iSxII96B0wCKwJZxwlg0ALESCB0Y/mIf6rxcXFL40E9kySpF/UPgiBtdAqQCsg0KQEvF6v7jDDYrGYisViwQaBhUKh71wu128hsCadaZQNAi1IgAI96FWK2igWiwuxWGyiQWDBYPCh1+tlwR6VSgXZkC24INASCDQTgba2tnqBzcbj8esNAhsZGbnv8XhYsAd9gL5OhAECIAACZhGoF5iiKE9jsdiNBoFdvnz5rtvtZsEeEJhZU4brggAI1AgY7MD+Eo/HbzcIbHR09LYkSbpgj8PDQ5AEARAAAdMI+P1+juf/+8ZXPp9/lEwmvza6hbzpdrt1wR4QmGnzhguDAAhwnO57kASkUCg8WF5e/qZBYBTs0d3drQv2kGWZo4f5GCAAAiBgBgHagWlHoVC4l0wmv20QGAV7nD9/Xnd+Dh2pQyG3GCAAAiBgBoF6gSmKcmdpaelxg8DoFxMTE7pz8SEwM6YM1wQBEKgRqBfY0dHRreXl5e8NBTY+Pq4TGJ1IgR0YFhMIgIAZBARB0H2Rm2rY29tTAz0gMDNmBNcEARD4ZAJGAtvY2FADPQwFFgqFZEEQWLBHsVjk6AcDBEAABE6agJHAFhYW2DsVuuN0qLhQKJRxOBws2IPkRcfqYIAACIDASRNwOBwNt5CLi4vHC2x0dPRAEAR2ADUEdtJThuuBAAjUCNAOTHuUDv3+YwLbdTgcLNiDdl/YgWFBgQAImEGAzsOnn9ool8u5RCKhBnoYPgMbHR3dcjgcLNgDAjNj2nBNEAABIlAvsEqlkl1aWmJvtjY8AxsZGXkpiiIL9qBXKI6OjkATBEAABE6cgMEO7DCRSLCY7gaBBYPBpCiKLNiDBIa/Qp74vOGCIAACHKeeA6a9haxUKnuJREIN9DC8hRwZGYkKgsCCPSAwrCMQAAGzCJC8tKexViqV7UQioQZ6GAosGAxGRFFkwR4QmFlTh+uCAAhIksTRXyJro1wu/7S8vPzzDwnsmSAILNijWq3iGRjWEQiAgCkESGD0LphGYEvJZDJ0rMCGh4e/E0WRBXvQByngFgMEQAAETppAvcBKpdJCKpVSAz0MbyEDgcBDSZJYsAd9CH+FPOlpw/VAAASIAD0Dq9uBzaZSKTXQw1Bgg4OD951Opy7YAwLDYgIBEDCDAO3AtMdJl8vlp6lUSg30MBTY0NDQXVEUdcEeEJgZU4drggAIuFwuHYRyufzXVCr1mw8J7LYgCLpgD3obnx7mY4AACIDASRKgHZh2KIryKJ1Oq4Eehjuw/v7+my6XSxfsAYGd5JThWiAAAjUC9QIrlUoPVldX1UAPQ4FRsIfP59MFe0BgWFAgAAJmEKgXWLlcvreysqIGehgKjII9enp6dMEepVIJt5BmzB6uCQI2JkAP77Vv4ROKSqVyZ2VlRQ30MBQY/TIYDOoeeEFgNl5FaB0ETCJgJLBSqfRVOp1+8kGBDQ8P6wRGuZDIhjRpFnFZELApARKY9mtEhCGXy7FAj2N3YBCYTVcM2gYBCxEwEtjOzg4L9DhWYENDQzLP8yzYAzswC80qSgEBmxAwElgqldIdAdZwHhixGRwczPA8z4I9SGB4D8wmqwZtgoBFCJDAtF8jorJWVlY+SWAHPM+zYA8IzCIzijJAwEYE/m+BBQIBXbAH7b7wEN9GKwetgoAFCNQLrFqtFlZXVz3a0gxvIQOBwBbP8yzYgwSGW0gLzChKAAEbESCBab/IXa1WD9PpNDsP/9iH+IFA4CXP8yzYAwKz0apBqyBgEQIGAvt3Op0+9dEd2MDAQJLneRbsgd2XRWYUZYCAzQjU7cD21tbWWKDHsTuwgYGBKM/zLNgDArPZqkG7IGARAnUC215bW2OBHscKrL+/P+JwOFiwh0V6QRkgAAI2JlCtVn9aW1tjgR4fEtgznudZsIeNmaF1EAABixCoVqtL6+vrLNDjQwL7O8/zv7ZI3SgDBEAABOhNiIX19XUW6HGswPr6+u4IgsAODQM7EAABEDCbQLVa/dv6+vrvtXUYvgdmdqG4PgiAAAh8CoH/AAanG7jW1RsmAAAAAElFTkSuQmCC');
			padding: 8rpx 0;
			margin: 0 auto;
			position: relative;
			top: -50rpx;
			background-size: cover;
			&:before{
				content: '';
				display: block;
				width: 204rpx;
				height: 35rpx;
				background-image: url('data:image/png;base64,[encoded data, 5864 characters]');
				background-size: cover;
				position: absolute;
				top: -6rpx;
				left: 50%;
				margin-left: -102rpx;
			}
		}
	}
	.brokerage-details .grade{
		padding: 0 20rpx;
		position: relative;
		top: -100rpx;
		.grade-table{
			width: 710rpx;
			background: #ffffff;
			border-radius: 20rpx;
			text-align: center;
			border-spacing: 0;
			box-sizing: border-box;
			padding-bottom: 10rpx;
			max-height: 600rpx;
			overflow-y: scroll;
			.bg-w{
				position: relative;
			}
			.bg-g{
				padding: 0 6rpx;
			}
			.current{
				border: 1px solid #CCA25D;
				border-radius: 10rpx;
			}
			.th,.td{
				font-size: 24rpx;
				width: 231.66rpx;
				display: inline-block;
				padding: 10rpx;
			}
			.td-img{
				text-align: left;
				padding-left: 36rpx;
			}
			.th{
				color: #666666;
			}
			.td{
				height: 64rpx;
				color: #282828;
				font-weight: bold;
			}
			.table_icon{
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
				position: relative;
				top: 10rpx;
			}
			.table-bg{

				color: #FBEACE;
				min-width: 213rpx;
				height: 70rpx;
				line-height: 70rpx;
				.text-bg{
					background-image: url('data:image/png;base64,[encoded data, 5532 characters]');
					background-size: 100%;
					text-align: left;
					padding-left: 20rpx;
					position: absolute;
					top: 0;
					left: 0;
					width: 213rpx;
					height: 70rpx;
				}

			}
			.text{
				position: relative;
				top: -20rpx;
			}
		}
	}
	.success{
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.5);
		}
		.commission{
			font-size: 18rpx;
			color: #2F2B31;
			width: 100%;
			position: absolute;
			top: 240rpx;
			left: -20rpx;
			text-align: center;
			&:before,&:after{
				content: "";
				display: block;
				width: 52rpx;
				height: 10rpx;
				position: absolute;
				/* #ifdef MP || APP-PLUS */
				top: 9rpx;
				/* #endif */
				/* #ifdef H5 */
				top: 14rpx;
				/* #endif */
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAUCAMAAABWIogpAAAAwFBMVEUAAAAeGxsfHBwfHBwfHBwfGxsfHR0gHR0fGxsfHBwBAQH25tDz487v38ro2MPf0LzWyLXQwq+qn5BnYFdHQjwzMCssKSUWFBIQDw0LCgkHBgbCtaS9saBaU0zr3Mfj1cDazLnKvavHuqi4rJy0qJiwpZWkmouglYeckoSYjoCUinyQhnmLgnaHfnKDem5+dmp6cmd2bmRyamBsZVtfWFBUT0dQS0RMSEFBPTc8OTM5NTAnJCEkIR4dGxkaGRZjXVNX44A9AAAACXRSTlMAVPqA/IN8WITLwrIKAAAAr0lEQVRIx7XNRRLCQAAEwMVJiLvi7hLc/v8rODFVkOI2/YEWXKWqYMIjSdQJT7lMnfAUatQJjxDcCQ93wsOb8BTfD3fCQ5/wYBKNhqKoalPTWrreNgzT7HTjJOn1B5Y1HI0n09l8sVytN9udbWdZuj8cHed0vriu511v0v3h+0EQhlEky7KAyldUKOZHcX70TP9HvxOekiDAxH0wsR9M7AcT+8FEfjCRH0x4uOqf5wXaUhSOXi91TgAAAABJRU5ErkJggg==');
				background-size: cover;
			}
			&:before{
				/* #ifdef MP || APP-PLUS */
				left: 120rpx;
				/* #endif */
				/* #ifdef H5 */
				left: 72rpx;
				/* #endif */

			}
			&:after{
				/* #ifdef MP || APP-PLUS */
				right: 126rpx;
				/* #endif */
				/* #ifdef H5 */
				right: 76rpx;
				/* #endif */
				transform: rotateY(180deg);
			}
		}
		.title{
			width: 245rpx;
			height: 69rpx;
			background-image: url('data:image/png;base64,[encoded data, 7624 characters]');
			background-size: cover;
			color: #FBEACE;
			text-align: center;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -122rpx;
			line-height: 60rpx;
			font-size: 26rpx;
		}
		.upgrade{
			font-size: 58rpx;
			text-align: ceter;
			color: #CC6C34;
			text-align: center;
			width: 100%;
			position: absolute;
			left: 0;
			top: 90rpx;
			font-weight: bold;
			font-family: 'Tahoma, Geneva, Verdana, sans-serif';
			.top{
				display: block;
				font-size: 46rpx;
			}
		}
		.con{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width:561rpx;
			height:533rpx;
			background-image: url('data:image/png;base64,[encoded data, 185660 characters]');
			background-size: cover;
			.btn{
				position: absolute;
				width:380rpx;
				height:70rpx;
				left: 50%;
				margin-left: -200rpx;
				bottom: 47rpx;
				line-height: 70rpx;
				text-align: center;
				color: #6C250F;
				background: linear-gradient(90deg, #fcebc1 0%, #f1ae5b 100%);
				border-radius:35rpx;
				font-size: 28rpx;
			}
		}
	}
	.instructions{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}
	.instructions .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
		.content {
			height: 900rpx;
			overflow-y: scroll;
			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}
			/deep/ img {
				max-width: 100%;
			}
		}
	}
	.instructions .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}

	.instructions .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
	.instructions .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
</style>
