<template>
	<view class="mine-distribution-index">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="color"
			:backgroundColor="color == '#ffffff' ?``:primaryColor" title="分销申请" leftIcon="icon-left">
		</uni-nav-bar>			
		<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>	
		<view class="space-user-info rel"></view>
		<view class="apply-info ml-lg mr-lg fill-base f-title radius-24">
			<view class="flex-center f-md-title text-bold c-black">申请成为分销商</view>
			<view class="space-lg"></view>
			<view class="pt-lg pb-md b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="text-bold">姓名</view>
				</view>
				<input v-model="subForm.user_name" type="text" class="pt-md" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
			</view>
			<view class="mt-lg pb-md b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="text-bold">手机号</view>
				</view>
				<input v-model="subForm.mobile" type="number" class="pt-md" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
			</view>
			<view @tap="submit" class="apply-btn flex-center f-sm-title c-base text-bold radius-16"
				:style="{background:primaryColor}">立即申请</view>
		</view>

		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				subForm: {
					user_name: '',
					mobile: ''
				},
				rule: [{
					name: "user_name",
					checkType: "isNotNull",
					errorMsg: "请输入您的真实姓名",
					regType: 2
				}, {
					name: "mobile",
					checkType: "isAllPhone",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		onLoad(options) {
			this.options = options
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
			this.$util.setNavigationBarColor({
				color,
				bg: 'none'
			});
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
			async initIndex() {},
			initRefresh() {
				this.initIndex()
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				console.log(message, "message");
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.mine.applyReseller(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`
					});
					this.lockTap = false
					this.$util.goUrl({
						url: `/mine/pages/apply-result?type=2`,
						openType: `redirectTo`
					})
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		}
	}
</script>

<style lang="scss">
	.mine-distribution-index {
		.space-user-info {
			top: 0;
			left: 0;
			width: 100%;
			height: 219rpx;
		}
		.mine-index-bg {
			background: rgb(57, 181, 74);
			height: 14.625rem;
			width: 140%;
			left: -20%;
			top: 0;
			z-index: -1;
		}
		.apply-info {
			padding: 50rpx;

			.apply-btn {
				width: 590rpx;
				height: 96rpx;
				margin-top: 70rpx;
			}
		}

	}
</style>
