<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="apply-upgrade">
		<view v-if="status === ''">
			<!--顶部提示内容-->
			<view class="top-tips" v-if="parseInt(info.status) === 3">驳回原因：{{ info.reject_cause }}</view>
			<!--表单让你-->
			<view class="title">1.填写注册申请代理的信息</view>
			<view class="form-list">
				<view class="form-list-block">
					<view class="left">真实姓名</view>
					<view class="right"><input class="uni-input" v-model="info.username" placeholder="请输入真实姓名" /></view>
				</view>
				<view class="form-list-block">
					<view class="left">联系电话</view>
					<view class="right"><input class="uni-input" v-model="info.mobile" placeholder="请输入联系电话" /></view>
				</view>
				<view class="form-list-block">
					<view class="left">身份证号</view>
					<view class="right"><input class="uni-input" v-model="info.id_card" placeholder="请输入身份证号" /></view>
				</view>
			</view>
			<view class="title">2.请拍摄并上传你的有效身份证</view>
			<view class="id-card">
				<view class="id-card-content">
					<view class="id-card-block">
						<image :src="$util.img(info.id_card_front || default_card_front)" mode="widthFix"></image>
						<view class="upload-buttons" @click="uploadCard('id_card_front')">上传身份证正面</view>
					</view>
					<view class="id-card-block">
						<image :src="$util.img(info.id_card_reverse || default_card_reverse)" mode="widthFix"></image>
						<view class="upload-buttons" @click="uploadCard('id_card_reverse')">上传身份证反面</view>
					</view>
				</view>
				<view class="id-card-tips">
					<view class="id-card-tips-line">大陆公民持有的本人有效二代身份证</view>
					<view class="id-card-tips-line">
						上传时确保身份证
						<text class="tips-stress">边框完整，字体清晰，亮度均匀。</text>
					</view>
				</view>
			</view>
			<view class="title" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">3.请完成协议</view>
			<view class="agree" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">
				<textarea class="textarea-content" placeholder="请填写如下段落" auto-height v-model="info.upgrade_agree"></textarea>
				<view class="agree-text">
					<text class="agree-red">请输入这段话：</text>
					{{ basicsConfig.upgrade_agree }}
					<text class="agree-red" @click="$util.copy(basicsConfig.upgrade_agree)">[复制]</text>
				</view>
			</view>
			<button class="submit-button" @click="submitApply">确定提交</button>
		</view>
		<view class="empty" v-else>
			<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
			<text v-if="status == 1">您已提交{{ fenxiaoWords.fenxiao_name }}申请，等待平台审核</text>
			<block v-else-if="status == -1">
				<text>您提交的{{ fenxiaoWords.fenxiao_name }}申请，已被拒绝，请再接再厉</text>
				<view class="again-btn color-base-bg" @click="againApply">重新申请</view>
			</block>
		</view>
		<!--登录弹框-->
		<ns-login ref="login"></ns-login>
		<!--加载动画-->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
	components: {},
	data() {
		return {
			isChecked: false,
			isShow: true,
			isIphoneX: false,
			// 推荐人信息
			sourceMemberInfo: {
				fenxiao_name: '无'
			},
			formData: {
				fenXiaoName: '',
				mobile: ''
			},
			fenXiaoAgreement: {
				agreement: {},
				document: {}
			},
			isAgreement: false,
			back: '',
			isAbled: false,
			status: '',
			isSub: false,
			fenxiaoConfig: {
				fenxiao_condition: 0
			},
			basicsConfig: {},
			goodsList: [],
			isOpen: false,
			baseInfo: {},
			default_card_front: 'public/static/img/fenxiao/id_card_front.png',
			default_card_reverse: 'public/static/img/fenxiao/id_card_reverse.png',
			info: {
				username: '',
				mobile: '',
				id_card: '',
				id_card_front: '',
				id_card_reverse: '',
				upgrade_agree: '',
				status: 0
			}
		};
	},
	mixins: [fenxiaoWords],
	onLoad(option) {
		if (option.back) this.back = option.back;
	},
	onReady() {
		// if (uni.getStorageSync('token')) {
		//   this.getBaseInfo();
		// } else {
		//   this.$refs.login.open('/pages_promotion/fenxiao/apply_upgrade');
		// }
	},
	async onShow() {
		setTimeout(() => {
			if (this.addonIsExist && !this.addonIsExist.fenxiao) {
				this.$util.showToast({
					title: '商家未开启分销',
					mask: true,
					duration: 2000
				});
				setTimeout(() => {
					this.$util.redirectTo('/pages/index/index');
				}, 2000);
				return;
			}
		}, 1000);
		this.isIphoneX = this.$util.uniappIsIPhoneX();
		if (this.fenxiaoWords && this.fenxiaoWords.fenxiao_name) this.$langConfig.title(this.fenxiaoWords.fenxiao_name + '申请');
		if (uni.getStorageSync('token')) {
			this.applyStatus();
			this.getSourceMemberInfo();
		} else {
			this.$util.redirectTo(
				'/pages_tool/login/login',
				{
					back: '/pages_promotion/fenxiao/apply'
				},
				'redirectTo'
			);
		}
		this.getFenxiaoConfig();
		this.getFenxiaoBasicsConfig();
	},
	methods: {
		toClose() {
			this.$refs.applyPopup.close();
		},
		ckeckedRuler() {
			this.isChecked = !this.isChecked;
		},
		goodsImg(imgStr) {
			let imgs = imgStr.split(',');
			return imgs[0]
				? this.$util.img(imgs[0], {
						size: 'mid'
				  })
				: this.$util.getDefaultImage().goods;
		},
		imgError(index) {
			this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
		},
		onOpen() {
			this.isOpen = this.isOpen ? false : true;
			this.getFenxiaoConfig();
		},
		goodsTag(data) {
			return data.label_name || '';
		},
		applyStatus() {
			this.$api.sendRequest({
				url: '/fenxiao/api/apply/status',
				data: {},
				success: res => {
					if (res.code >= 0 && res.data) {
						this.status = res.data.status;
						this.isSub = false;
						if (this.status == 2) {
							this.$util.redirectTo('/pages/member/index');
						}
					}
					this.$refs.loadingCover.hide();
				}
			});
		},
		navigateBack() {
			this.$util.goBack();
		},
		// 申请协议
		getAgreement() {
			this.$api.sendRequest({
				url: '/fenxiao/api/config/agreement',
				success: res => {
					if (res.code === 0) {
						this.fenXiaoAgreement = res.data;
						if (this.fenXiaoAgreement.agreement.is_agreement === '1') {
							this.isAgreement = true;
						}
					}
				}
			});
		},
		openPopup() {
			if (this.isAgreement) this.$refs.applyPopup.open();
		},
		closePopup() {
			this.$refs.applyPopup.close();
		},
		fenXiaoValidata() {
			let rule = [
				{
					name: 'fenXiaoName',
					checkType: 'required',
					errorMsg: '请输入' + this.fenxiaoWords.fenxiao_name + '名称'
				},
				{
					name: 'mobile',
					checkType: 'required',
					errorMsg: '请输入手机号'
				},
				{
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}
			];
			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({
					title: validate.error
				});
				return false;
			}
		},
		// 获取推广人信息
		getSourceMemberInfo() {
			this.$api.sendRequest({
				url: '/fenxiao/api/fenxiao/sourceinfo',
				success: res => {
					if (res.code == 0 && res.data) {
						this.sourceMemberInfo = res.data;
					}
				}
			});
		},
		/**
		 * 重新申请
		 */
		againApply() {
			this.status = '';
		},
		/**
		 * 获取申请条件
		 */
		getFenxiaoConfig() {
			this.$api.sendRequest({
				url: '/fenxiao/api/config/fenxiao',
				data: {},
				success: res => {
					if (res.code >= 0 && res.data) {
						this.fenxiaoConfig = res.data;
						this.goodsList = res.data.goods_list;
						if (this.goodsList.length <= 3) {
							this.isShow = false;
						} else if (this.goodsList.length > 3 && this.isOpen == true) {
							this.isShow = true;
							this.goodsList = res.data.goods_list.slice(0, 3);
						}
					}
				}
			});
		},
		/**
		 * 获取分销基本配置
		 */
		getFenxiaoBasicsConfig() {
			this.$api.sendRequest({
				url: '/fenxiao/api/config/basics',
				data: {},
				success: res => {
					if (res.code >= 0 && res.data) {
						this.basicsConfig = res.data;
					}
				}
			});
		},

		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.$util.redirectTo('/pages/member/index');
			return true;
		},
		// 获取基本信息
		getBaseInfo() {
			let _this = this;
			_this.$api.sendRequest({
				url: '/fenxiao/api/apply/upgradeBase',
				success: res => {
					if (res.code === 0) {
						_this.baseInfo = res.data;
						if (res.data.info) _this.info = res.data.info;
						if (parseInt(this.info.status) === 2) {
							_this.$util.showToast({
								title: '审核已经通过',
								mask: true,
								duration: 1000,
								success: function() {
									setTimeout(() => {
										_this.$util.redirectTo('/pages_promotion/fenxiao/index', {}, 'redirectTo');
									}, 1000);
								}
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		// 身份证上传
		uploadCard(type) {
			let _this = this;
			this.$util.upload(1, { path: 'evaluateimg' }, res => {
				if (type === 'id_card_front') _this.info.id_card_front = res[0];
				else _this.info.id_card_reverse = res[0];

				this.$forceUpdate();
			});
		},
		// 提交内容
		submitApply() {
			let _this = this;
			let defaultRule = [
				{ name: 'username', checkType: 'required', errorMsg: '请输入真实姓名' },
				{ name: 'mobile', checkType: 'required', errorMsg: '请输入联系电话' },
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
				{ name: 'id_card', checkType: 'required', errorMsg: '请输入身份证号' },
				{ name: 'id_card_front', checkType: 'required', errorMsg: '请上传身份证正面' },
				{ name: 'id_card_reverse', checkType: 'required', errorMsg: '请上传身份证反面' },
				{ name: 'upgrade_agree', checkType: 'required', errorMsg: '请输入协议内容以代表同意当前协议' },
				{ name: 'upgrade_agree', checkType: 'same', errorMsg: '协议不一致，请检查输入协议是否和下放协议内容一直', checkRule: this.basicsConfig.upgrade_agree }
			];
			_this.$util
				.verify(_this.info, defaultRule)
				.then(res => {
					_this.$api.sendRequest({
						url: '/fenxiao/api/apply/applyfenxiao',
						data: {
							..._this.info,
							fenxiao_condition: 1
						},
						success: res => {
							if (res.code >= 0 && res.data) {
								if (this.basicsConfig.is_examine == 1) {
									this.applyStatus();
								} else {
									this.$util.redirectTo('/pages_promotion/fenxiao/index');
								}
							} else {
								this.isSub = false;
								this.$util.showToast({
									title: res.message
								});
							}
						},
						fail: res => {
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
				})
				.catch(reject => {
					console.log(reject);
				});
		}
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') return false;
		this.$util.redirectTo('/pages/member/index');
		return true;
	}
};
</script>
<style lang="scss" scoped>
.apply-upgrade {
	padding: 30rpx;
	.top-tips {
		color: #f56c6c;
		background-color: #fde2e2;
		position: relative;
		left: -15px;
		top: -15px;
		width: 100%;
		padding: 15px;
		line-height: 20px;
		font-size: 15px;
	}
	.title {
		width: 100%;
		font-size: 30rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}
	.form-list {
		.form-list-block {
			width: 100%;
			color: #000000;
			height: 90rpx;
			line-height: 90rpx;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			align-items: center;
			justify-content: space-between;
			.left {
				height: 70rpx;
				font-size: 30rpx;
				width: 240rpx;
			}
			.right {
				font-size: 30rpx;
				width: calc(100% - 240rpx);
				input {
					height: 70rpx;
					text-align: right;
					font-size: 30rpx;
					color: #898989;
				}
			}
		}
	}
	.id-card {
		.id-card-content {
			width: 100%;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			align-items: flex-start;
			justify-content: space-between;
			.id-card-block {
				width: calc(50% - 15rpx);
				position: relative;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				display: inline-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				padding-top: 20rpx;
				padding-bottom: 75rpx;
				/deep/ image {
					width: 90%;
					div {
						background-position: top center !important;
					}
				}
				.upload-buttons {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					font-size: 32rpx;
					text-align: center;
					background: #5581fe;
					color: #ecefff;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
		.id-card-tips {
			padding: 30rpx 0;
			.id-card-tips-line {
				.tips-stress {
					color: #e15c5c;
				}
			}
		}
	}
	.agree {
		.textarea-content {
			width: calc(100% - 40rpx);
			border: 2rpx solid #7796e9;
			border-radius: 20rpx;
			padding: 20rpx;
			min-height: 300rpx;
			font-size: 30rpx;
		}
		.agree-text {
			font-size: 26rpx;
			line-height: 40rpx;
			margin-top: 20rpx;

			.agree-red {
				font-size: 26rpx;
				line-height: 40rpx;
				color: #ee7877;
			}
		}
	}
	.submit-button {
		background: #5581fe;
		border-radius: 100rpx;
		color: #cbd9f7;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 100rpx;
	}
	.again-btn {
		display: flex;
		justify-content: center;
		width: auto;
		border-radius: $border-radius;
		margin-top: 20rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 60rpx;
		box-sizing: border-box;
	}
	.empty {
		width: 100%;
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 300rpx;
			height: 176rpx;
			margin-bottom: 50rpx;
		}
		text {
			font-size: $font-size-goods-tag;
			font-weight: 600;
		}
	}
}
</style>
