<template>
	<div class="bheader">
		<div class="banner"></div>
		<div class="bcontent">
			<div class="tablist">
				<el-steps :active="active" finish-status="success" align-center :space="310">
				  <el-step title="填写申请信息"></el-step>
				  <el-step title="审核中"></el-step>
				  <el-step title="审核通过"></el-step>
				</el-steps>
			</div>
			<div class="apply-form">
				<div class="title-line">
					<h2>经纪商申请</h2>
				</div>
				<div class="apply-form-box">
					<!-- 申请标准 -->
					<div class="appstandard">
						<h4>经纪商申请标准：</h4>
						<h5>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h5>
						<p v-for='stand in standList'>{{stand.word}}</p>
					</div>
					<!-- 表单 -->
					<div class="form-content">
						<el-form ref="form" label-width="80px" disabled>
						  <el-form-item label="公司/机构名称 :">
						    <el-input v-model="applyform.company" placeholder="请输入您所在的公司或者机构名称"></el-input>
						  </el-form-item>
						  <el-form-item label="姓名 :">
						    <el-input v-model="applyform.contacts" placeholder="请输入您的姓名"></el-input>
						  </el-form-item>
						  <el-form-item label="手机号 :">
								<el-input placeholder="请输入内容" v-model="applyform.mobile" class="input-with-select">
  							  <el-select v-model="applyform.mobile_area" slot="prepend" placeholder="请选择" class='tel-select'>
  							  </el-select>
  							</el-input>
						  </el-form-item>
						  <el-form-item label="其他联系方式 :">
						    <el-input type="textarea" v-model="applyform.other" placeholder="请输入您的其他联系方式 如: 微信、邮箱等"></el-input>
						  </el-form-item>
						  <el-form-item label="所在地 :">
								  <el-select v-model="applyform.country" placeholder="请选择" class='local'>
								  </el-select>
								  <el-select v-model="applyform.area" placeholder="请选择" class='local'>
								  </el-select>
						  </el-form-item>
              <el-row>
                <el-button disabled class="apply-btn">立即申请</el-button>
              </el-row>
						    <!-- <button type='button' >立即申请</button> -->
						</el-form>
						<p class="tip">*您好，我们尊重每一个客户的隐私。 一旦提交了以上内容则表明您同意FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。</p>
					</div>
				</div>
				<!-- 底部 -->
				<div class="server-bottom">
					<div class="bt-title">
						<hr>
						<h3>联系我们 快速申请</h3>
						<hr>
					</div>
					<h4>Feel Free to Contact Us</h4>
					<ul class="serverList">
						<li @mouseenter='ser1=true' @mouseleave='ser1=false'>
							<img src="../../../static/img/phone1.png" v-show='ser1==false'>
							<img src="../../../static/img/phoneHover.png" v-show='ser1==true'>
							<p>86-17354718363</p>
						</li>
						<li @mouseenter='ser2=true,kefu=true' @mouseleave='ser2=false,kefu=false'>
							<img src="../../../static/img/wx.png" v-show='ser2==false'>
							<img src="../../../static/img/wxHover.png" v-show='ser2==true'>
							<p>fx66客服</p>
						</li>
					</ul>
					<img src="../../../static/img/fx66kefufu.jpg" class="kefu" v-show='kefu==true'>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
    data() {
      return {
        active: 2,
        ser1:false,
        ser2:false,
        kefu:false,
        serverListpic:[
        	{
        		serverhover:false,
        		src1:'../../../static/img/phone1.png',
        		src2:'../../../static/img/phoneHover.png',
        		msg:'86-17354718363'
        	},
        	{
        		serverhover:false,
        		src1:'../../../static/img/wx.png',
        		src2:'../../../static/img/wxHover.png',
        		msg:'fx66客服'
        	}
        ],
        standList:[
        	{
        		word:'1.经纪商所辖客户交易手续费的一部分作为返佣；'
        	},
        	{
        		word:'2.经纪商可自行设置客户的提款手续费标准；'
        	},
        	{
        		word:'3.经纪商可招募代理商，并在经纪商后台调整代理商返佣标准；'
        	},
        	{
        		word:'4.经纪商所辖客户有不当得利的行为（恶意刷单、利用BUG等），手续费不返还；'
        	},
        	{
        		word:'5.经纪商可在后台查看直发客户及代理客户的交易统计表；'
        	}
        ],
        applyform:[],
      }; 
    },

    methods:{
      loadsession: function(){
        this.Authorization = sessionStorage.getItem('token_code')? sessionStorage.getItem('token_code'):'';
        this.axios.get('https://dev407.33.cn/api/broker/applystatus',{headers:{Authorization: this.Authorization}}).then((res)=>{
          console.log(res.data.data.info);
          this.applyform = res.data.data.info;
        }).catch((err)=>{
          console.log(err);
        })
      }
    },
    mounted(){
      this.loadsession();
      
    }
  }
</script>

<style scoped>
.bcontent{
	height: 1100px;
}
.bheader{
	position: relative;
	background: #f5f8ff;
	.banner{
		height: 400px;
		width: 100%;
		background: #ccc;
		margin-top: 75px;
		background: url('../../../src/assets/img/nbanner.png') no-repeat center center;
		margin-bottom: 10px;
	}

	.tablist{
		width: 1200px;
   	background: #fff;
   	margin: 0 auto;
   	margin-bottom: 10px;
   	height: 110px;
   	padding-top: 20px;
   	padding-left: 140px;
	}
	.tip{
		margin-top: 22px;
		padding-left: 28px;
    color: #3884d3;
    font-size: 14px;
	}
	.apply-form{
		background: #fff;
   	width: 1200px;
   	margin: 0 auto 20px;
   	.title-line{
   		border-bottom: 1px solid #e5e5e5;
   	  margin-bottom: 50px;
    	height: 80px;
    	h2{
    		line-height: 80px;
    		font-size: 24px;
   		  font-weight: 700;
    	}
   	}
   	.apply-form-box{
   		text-align: left;
    	margin: 0 75px;
    	color: #333;
    	display: flex;
   		.appstandard{
    		height: 320px;
  			width: 530px;
    		border: 1px solid #e5e5e5;
    		padding: 20px;
    		position: relative;
    		text-align: left;
    		h4{
			    font-size: 16px;
    			line-height: 1;		
    		}
    		h5{
					color: #0176c3;
    			margin-top: 20px;
    			font-size: 14px;
    		}
    		p{
					margin-top: 20px;
    			font-size: 14px;

    		}
   		}
   		.appstandard:before{
   			content: "";
    		position: absolute;
    		top: 50%;
    		right: -10px;
    		transform: translateY(-50%);
    		display: block;
    		border-left: 10px solid #e5e5e5;
    		border-top: 10px solid transparent;
    		border-bottom: 10px solid transparent;
   		}
   		.appstandard:after{
   			content: "";
   		  position: absolute;
   		  top: 50%;
   		  right: -8px;
   		  transform: translateY(-50%);
   		  display: block;
   		  border-left: 8px solid #fff;
   		  border-top: 8px solid transparent;
   		  border-bottom: 8px solid transparent;
   		}
   		.form-content{
   			width: 480px!important;
    		margin-left: 40px;
    		.apply-btn{
    			line-height: 36px;
    			position: relative;
    			font-size: 14px;
    			display: block;
    			width: 342px;
    			margin-left: 138px;
    			border: 0;
    			border-radius: 0;
    			background-color: #0176c3;
    			background-color: #d1dbe5;
    			color: #fff;
    			height: 40px;
    			line-height: 40px;
    			padding-top: 0;
    		}
    		.tel-select{
    			width: 130px;
    		}
    		.local{
    			width: 165px;
    		}
    		.local:nth-of-type(2){
					margin-left: 8px;
    		}
   		}   		
   	}
   	.server-bottom{
   			position: relative;
    		width: 1200px;
    		margin: 0 auto;
    		padding-top: 50px;
   			.bt-title{
   				width: 1200px;
					display: flex;
    			align-items: center;
    			justify-content: space-between;
    			hr{
    				width: 420px;
   					height: 1px;
   					background-color: #e5e5e5;
   					border: 0;
    			}
    			h3{
    				font-size: 25px;
    				font-weight: 700;
    				line-height: 1;
    			}
   			}
   			h4{
   				font-size: 16px;
    			color: #999;
    			margin-top: 12px;
   			}
   			.serverList{
					margin-top: 50px;
    			padding: 0 400px 70px;
    			display: flex;
    			justify-content: space-between;
    			li{
						img{
							margin-bottom: 20px;
						}
						
    				p{
    					line-height: 1;
    					font-size: 20px;
    					color:#2c3e50;
    				}
    			}
   			}
   			.kefu{
   				position: absolute;
   				top: 150px;
   				left: 850px;
					width: 120px;
					height: 120px;
				}
   		}
	}
}
</style>

<style>
	.bheader{
		.el-step__icon{
			border:2px solid #bfcbd9;
		}
		.el-step__icon-inner{
			color: #bfcbd9;
		}
		.is-process .el-step__icon{
			background: #bfcbd9;
      border: 2px solid #bfcbd9;
		}
		.is-process .el-step__icon-inner{
			color:#fff;
		}
		.is-success .el-step__icon{
			background: #20a0ff;
			border: none;
		}
		.is-success .el-step__icon-inner{
			color: #fff;
		}
		.is-success .el-step__line{
			border-color: #20a0ff;
		}
		.el-step__main .is-success{
			color: #20a0ff;
		}
		.el-form-item{
			margin-bottom: 22px;
			width: 530px;
		}
		.el-form-item__label{

		}
		.el-form-item__content{
			width: 342px;
			float: left;
			margin-left: 0 !important;
		}
		.el-input__inner{
			height: 36px;
		}
		.el-select{
			display: inline-block;
    	position: relative;
    	.el-input{
    		display: block;
    		position: relative;
    		font-size: 14px;
    	}
		}
		.el-form-item__label{
			width: 138px !important;
			text-align: right;
   		vertical-align: middle;
   		float: left;
   		font-size: 14px;
   		color: #48576a;
   		line-height: 1;
   		padding: 11px 12px 11px 0;
   		box-sizing: border-box;
		}
		
  	.input-with-select .el-input-group__prepend {
   	 	background-color: #fff;
  	}
	}
</style>