<template>
	<view class="page">
		<view class="pop" :class="['pop--'+type1,{'pop--show' : show1 }]" v-if="show1">
			<view v-if="overlay1" class="pop__mask" @touchmove="touchmove" :class="{'pop__mask--hide':!showOverlay1}" @click="handleMaskClick1"></view>
			<view class="pop__container" :style="{zIndex: zIndex}" @touchmove="touchmove">
				<view class="show">
					<image class="image1" :src="imgfixUrls + 'merchant/addPhone.png'" />
					<view class="showPackage">
						<view class="showTitle"><span>绑定手机号</span></view>
						<view class="userNameInput">
							<view class="phones" style="font-size: 20upx;">
								手机号:
							</view>
							<input class="n_input" v-if="show1" :class="show1?'faluhd':'ruleInputs'" :disabled="!show1" style="padding-left: 100upx;" v-model="phone" @blur="blurIos"/>
						</view>
						<view class="userSmsInput" v-if="verifyCode == 1">
							<view class="phones" style="font-size: 20upx;">
								图形验证码:
							</view>
							<input class="s_input" v-if="show1" :class="show1?'faluhd':'ruleInputs'" type="number" :disabled="!show1" maxlength="4" v-model="txMode" style="padding-left:150upx;width: 150upx;"  @blur="blurIos"/>
							<image class="getSms" :src="getImgUrl" @click="GVC" />
						</view>
						<view class="userSmsInput" v-if="smsver == 0">
							<view class="phones" style="font-size: 20upx;">
								验证码:
							</view>
							<input class="s_input" v-if="show1" :class="show1?'faluhd':'ruleInputs'" :disabled="!show1" type="number" maxlength="4" v-model="smsCode" style="padding-left:100upx;"  @blur="blurIos"/>
							<view class="getSms" @click.stop="PIN" v-if="timeCount == 0"><span class="span1">获取验证码</span></view>
							<view class="getSms" v-else>
								<span class="span1">{{ timeEnd }}</span>
							</view>
						</view>
						<view class="showSubmitButton" @click="changeMobile"><span class="span2">绑定手机号</span></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import App from '@/common/js/app.js';

	export default {
		data() {
			return {
				showB: true,
				phone: '',
				txMode: '',
				smsCode: '',
				getSmsCode: '',
				getImgUrl: '',
				timeCount: 0,
				timeEnd: '',
				verifyCode: '',
				smsver:0,
				img:'',
				codetime:''
			};
		},
		props: {
			show1: {
				type: Boolean,
				default: false
			},
			// 是否有遮罩层
			overlay1: {
				default: true
			},
			// 遮罩层是否会显示
			showOverlay1: {
				default: true
			},
			// 内容从哪个方向出，可选 center top bottom left right
			type1: {
				type: String,
				default: 'center'
			},
			//表单组件v-model所需的参数
			modelData: {
				type1: Object,
				default: () => {}
			},
			zIndex :{
				type: String,
				default: '999'
			}
		},
		watch:{
			show1(val){
				if(val){
					this.GVC();
				}
			}
		},
		components: {

		},
		computed: {

		},
		mounted() {
			let _this = this;
			_this.img = _this.imgfixUrl;
			_this.verifyCode = uni.getStorageSync('platformInfor').verifycode;
			_this.smsver = uni.getStorageSync('platformInfor').smsver;
			// console.log(_this.verifyCode);
		},
		methods: {
			touchmove(){
				
			},
			blurIos(){
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
			},
			GVC() {
				let _this = this;
				let data = {};
				App._post_form('&do=GVC', data, res => {
					_this.getImgUrl = res.data.image_data;
					_this.codetime = res.data.time;
				});
			},
			handleMaskClick1() {
				this.$emit('clickmask1');
			},
			// 发送短信验证码
			PIN() {
				let _this = this;
				if (_this.phone == '' || _this.phone.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
						duration: 2000
					});
					return;
				}
				if ( _this.txMode == ''  && _this.verifyCode == 1) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确图形验证码',
						duration: 2000,
						success() {
							_this.GVC();
						}
					});
					return;
				}
				let data = {
					phone: _this.phone,
					type: 2,
					code:_this.txMode,
					time:_this.codetime
				};
				App._post_form('&do=PIN', data, res => {
					let timer_num = 60;
					let timeClock = setInterval(function() {
						timer_num--;
						_this.timeEnd = timer_num + 's后重试';
						_this.timeCount = timer_num;
						if (timer_num == 0) {
							clearInterval(timeClock);
						}
					}, 1000);
					_this.getSmsCode = res.data.code;
				});
			},
			// 改绑手机
			changeMobile() {
				let _this = this;
				if (_this.phone == '' || _this.phone.length !== 11) {
					uni.showModal({
						showCancel:false,
						content:'请输入正确的手机号'
					})
					return;
				}
				if (_this.smsCode == '' && _this.smsver == 0) {
					uni.showModal({
						showCancel:false,
						content:'请输入验证码'
					})
					return;
				}
				if ( _this.txMode == '' && _this.verifyCode == 1) {
					uni.showModal({
						showCancel:false,
						content:'请输入验证码',
						success() {
							_this.GVC();
						}
					})
					return;
				}
				let data = {
					mobile: _this.phone,
					mergeflag: '',
					code: _this.smsCode
				};
				App._post_form(
					'&p=member&do=changeMobile',
					data,
					res => {
						
						_this.phone = '';
						_this.smsCode = '';
						_this.txMode = '';
						uni.showToast({
							icon: 'none',
							title: '绑定成功',
							duration: 2000,
						});
						let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
						let curRoute = routes[routes.length - 1].route
						if(curRoute == 'pages/mainPages/userCenter/userCenter') {
							_this.$emit('getMemberInfo');
						}
						this.$emit('clickmask1',true);
						// _this.show1 = false;
					},
					errno => {
						if (!!errno.data.data.code && errno.data.data.code === 1 || errno.data.message == '手机号已存在,无法重复绑定') return
						uni.showModal({
							title: '友情提示',
							content: errno.data.message,
							showCancel: true,
							success(res) {
								if (res.confirm) {
									let data = {
										mobile: _this.phone,
										mergeflag: 1,
										code: _this.smsCode
									};
									App._post_form('&p=member&do=changeMobile', data, res => {
										_this.phone = '';
										_this.smsCode = '';
										uni.showToast({
											icon: 'none',
											title: '绑定成功',
											duration: 2000
										});
										_this.$emit('clickmask1');
										// _this.show1 = false;
									});
								}
							}
						});
					}
				);
			}
		}
	}
</script>

<style>

</style>
<style lang="less" scoped>
	.page{
		z-index: 2000;
	}
	.phones {
		position: absolute;
		padding-left: 20upx;
		left: 1%;
		top: 1%;
		color: #999999;
		line-height: 92upx;
	}
	.ruleInputs{
		min-width:0!important;
		min-height:0!important;
		padding: 0!important;
	}
	.faluhd{
		
	}
	.pop {
		visibility: hidden;

		.uni-input-placeholder {
			display: none;
		}
	}

	.pop--show {
		visibility: visible;

		.uni-input-placeholder {
			display: block;
		}
	}

	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .5);
		display: none
	}

	.pop__mask--hide {
		background: 0 0;
	}

	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
		opacity: 0
	}

	.pop--show .pop__container {
		opacity: 1
	}

	.pop--show .pop__mask {
		display: block
	}

	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}

	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}

	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		// bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}

	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}

	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	.show {
		width: 600upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
		overflow: hidden;

		>.image1 {
			width: 600upx;
			height: 112upx;
		}
	}

	.showTitle {
		font-size: 36upx;

		color: rgba(51, 51, 51, 1);
	}

	.showTitle2 {
		margin-top: 16upx;
		font-size: 24upx;

		color: rgba(153, 153, 153, 1);
	}

	.showPackage {
		padding: 0 50upx 50upx 50upx;
	}

	.userNameInput {
		margin-top: 50upx;
		position: relative;
		width: 500upx;
		height: 90upx;
		background: rgba(248, 248, 248, 1);
		border-radius: 10upx;

		>.n_input {
			height: 90upx;
			margin-left: 30upx;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.userSmsInput {
		width: 500upx;
		height: 90upx;
		background: rgba(248, 248, 248, 1);
		border-radius: 10upx;
		margin-top: 20upx;
		position: relative;

		>.s_input {
			vertical-align: middle;
			display: inline-block;
			height: 90upx;
			width: 200upx;
			margin-left: 30upx;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.getSms {
		vertical-align: middle;
		display: inline-block;
		width: 150upx;
		height: 58upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 6upx;
		text-align: center;

		>.span1 {
			line-height: 58upx;
			font-size: 24upx;

			color: rgba(255, 255, 255, 1);
		}
	}

	.showSubmitButton {
		margin: 40upx auto 0 auto;
		width: 292upx;
		height: 74upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 37upx;
		text-align: center;

		>.span2 {
			line-height: 74upx;
			font-size: 28upx;

			color: rgba(255, 255, 255, 1);
		}
	}
</style>
