<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;">
					<Text>{{ userinfo.CustomModel.ApplicationProtocol}}</Text>
				</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();
				this.request2({
						url: '/api/AppletUser/GetUserApplyForDistrbutorInfo',
						data: {}
					},
					(res) => {
						uni.hideNavigationBarLoading()
						this.userinfo = res.data;
						this.pageTitle = res.data.CustomModel.DistributionApplication
					}
				);
			},
			Select() {
				console.log(this.checked)
			},
			showagreement() {
				this.isshowagreement = true
			},
			read() {
				this.checked = true;
				this.isshowagreement = false
			},
			apply() {
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: that.userinfo.template_message_list,
					complete(res) {
						if (that.checked == false) {
							uni.showToast({
								title: "请先查看分销协议并同意",
								icon: "none"
							});
							return false
						}
						if (that.name == '') {
							uni.showToast({
								title: "请输入真实姓名",
								icon: "none"
							});
							return false
						}
						if (that.mobile == '') {
							uni.showToast({
								title: "请填写手机号码",
								icon: "none"
							});
							return false
						}
						uni.showLoading({
							title: '加载中...'
						});
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						that.request2({
								url: '/api/AppletUser/SetUserApplyForBeDistrbutor',
								data: that.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>