<template>
	<view class="s_addStyle" :style="{'height':contentHeight}">
		<image :src="userinfo.CustomModel.HeadImage" style="width: 100%;height: 165px;"></image>
		<view style='width: 94%;margin-left: 3%;margin-top: 10px;'>
			<Text style='padding: 10px 0;width: 100%;border-bottom: 1px solid #f5f5f5;display: inline-block;'>
				欢迎加入
				<Text :style="{color:mainColor}">{{topname}}</Text>
				，请填写申请信息
			</Text>
			<view class='addTbox'>
				<view class="addTbox_l">
					<Text>邀请人</Text>
				</view>
				<Text :style="{color:mainColor}">{{userinfo.ApplyForInfo.SuperiorName}} <Text style='color: #6F6666;'>(请核对)</Text>  </Text>
			</view>
			
			<view class='addTbox'>
				<view class="addTbox_l">
					<Text>姓名</Text>
				</view>
				 <input class="uni-input"  v-model="msg.Name" placeholder="请输入真实姓名" />
			</view>
			
			<view class='addTbox'>
				<view class="addTbox_l">
					<Text>手机号码</Text>
				</view>
				<input class="uni-input"  type="number" v-model="msg.Mobile" placeholder="请填写手机号码" />
			</view>
			<view class='addTbox'>
				<u-checkbox-group @change="Select">
				  <u-checkbox v-model="checked" shape="circle" :active-color="mainColor" label-size='24'
				    >我已经阅读并了解</u-checkbox
				  >
				</u-checkbox-group>
				<Text style='font-size: 12px;color: #1F4C87;' @click='showagreement'>【{{userinfo.CustomModel.ApplicationAgreement}}】</Text>
			</view>
			
		</view>
		<view style="width: 100%;height:70px ;background: #F7F7F7;display: flex;align-items: center;justify-content: center;">
			<view :style="{background:userinfo.CustomModel.ButtonColor,'border-radius':userinfo.CustomModel.ButtonFilletPX+'px'}" class="apply" @click="apply">
				<Text :style="{color:userinfo.CustomModel.ButtonTextColor}">{{userinfo.CustomModel.ButtonText}}</Text>
			</view>
		</view>

		<image :src="userinfo.CustomModel.BottomImage" style="width: 100%;height: 165px;"></image>
		<view class="agreementbox" v-if='isshowagreement==true'></view>
		<view class="agreementbox_t" v-if='isshowagreement==true'>
			<view class="agreement_b">
				<Text style='height: 40px;line-height: 40px;'>分销申请协议</Text>
				<!-- <view>TODO内容</view> -->
				<view style="width: 100%;height: 760rpx;padding: 20rpx;">
					
				</view>
				<view class="agreement_bottom" :style="{background:mainColor}" @click="read">
					<Text style='color: #fff;'>我已阅读</Text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "分销申请",
				contentHeight:0,
				mainColor:'',
				secondary:'',
				bg_img:'',
				userinfo:{},
				topname:'',
				checked:false,
				isshowagreement:false,
				msg:{
					Name:'',
					Mobile:'',
				}
			
			}
		},
		
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.getUserInfo()
		},
		mounted() {
			let currentPages = getCurrentPages();
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = wx.getStorageSync("basedata")
			   ? wx.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 
			   this.topname = wx.getStorageSync("basedata")
			   ? wx.getStorageSync("basedata").mall.name
			   : '';
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			getUserInfo(){
				uni.showNavigationBarLoading();
					let h = this.apiheader();
					
					this.request2(
					 {
					 	url: '/api/AppletUser/GetUserApplyForDistrbutorInfo',
					 	data: {}
					 },	
				  (res) => {
					uni.hideNavigationBarLoading()
					this.userinfo = res.data;
					this.pageTitle = res.data.CustomModel.DistributionApplication
					// if(res.data.is_can_apply==false && res.data.status==1){
					// 	this.getorder()
					// }
				  }
				);
			},
			Select(){
				console.log(this.checked)
			},
			showagreement(){
				this.isshowagreement = true
			},
			read(){
				this.checked = true;
				this.isshowagreement = false
			},
			apply(){
				if(this.checked==false){
					uni.showToast({
						title: "请先查看分销协议并同意",
						icon: "none"
					});
					return false
				}
				if(this.name==''){
					uni.showToast({
						title: "请输入真实姓名",
						icon: "none"
					});
					return false
				}
				
				if(this.mobile==''){
				
					uni.showToast({
						title: "请填写手机号码",
						icon: "none"
					});
					return false
				}
				uni.showLoading({
				    title: '加载中...'
				});
					
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 前一个页面
				this.request2(
				 {
					url: '/api/AppletUser/SetUserApplyForBeDistrbutor',
					data: this.msg
				 },	
				  (res) => {
					uni.hideLoading();
					setTimeout(()=>{
						 uni.navigateBack({
							 success: function() {
								 beforePage.onLoad(); // 执行前一个页面的created方法
							 }
						 });
					},1000)
				  }
				);
				
				
			}
		}
	}
</script>

<style>
.s_addStyle{
	background: #fff;
	position: relative;
}
.s_addStyle .addTbox{
	width: 100%;
	border-bottom: 1px solid #f5f5f5;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 50px;
}
.addTbox .addTbox_l{
	width:180rpx ;
	
}
.s_addStyle .apply{
	width: 93%;
	height: 45px;
	border-radius: 22.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.s_addStyle .agreementbox{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #333333;
	opacity: 0.3;
	z-index: 888;
}
.s_addStyle .agreementbox_t{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.s_addStyle .agreementbox_t .agreement_b{
	width:80% ;
	border-radius: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}
.s_addStyle .agreementbox_t .agreement_bottom{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
