<template>
	
	<!-- 输入支付密码的弹窗 -->
	<!-- 场景描述
	 转余额给好友===》 向吃雪糕的女孩(ID68）转账
	 转佣金到余额===》转佣金到余额
	 
	 提现到微信===》
	 提现到余额===》
	 提现到银行卡==》
	 
	 
	 -->
	<view class="best-modal digital-keyboard-modal" :class="{'best-modal-active':_show}">
		<view class="best-modal-layer" @click="cancel"></view>
		<view class="best-modal-content">
			<view class="dk-title">请输入支付密码</view>
			<!-- <view class="dk-subtitle">佣金转到余额</view> -->
			<view class="dk-subtitle">{{msg}}</view>
			<view class="dk-price">
				<text class="fuhao">¥</text>
				<text class="shuzi">{{money}}</text>
			</view>
			<view class="pwd-box clearfix" @click="getKeyboard">
				<view class="pwd-text" v-for="(item,index) in _digits" :key="index" :class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
			</view>
			<view class="pwd-forget">
				<text v-if="_forget" @click="forgetPwd">忘记密码</text>
			</view>
			<view class="digital-keyboard">
				<view class="form_edit clearfix">
					<view class="num" hover-class="_float-hover-c" v-for="item in digitalList" :key="item" :class="{'no-num':(item === '' || item === '-1')}"
					 @click="getKeyNumber(item)">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {havepassword} from "@/utils/api/api.js"; //检测是否设置了支付密码
	export default {
		data() {
			return {
				activeInput: 0,
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'],
				paymentPwd: ''
			};
		},
		mounted() {
			//console.log("检测有没有设置支付密码~");
		},
		props: {
			//金额
			money:{
				type: String|Number,
				default: ''
			},
			//说明
			msg:{
				type: String,
				default: ''
			},
			show: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			},
			digits: {
				type: [Number, String],
				default: 6
			},
			forget: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			payPassWord() {
				var payPassWord = this.paymentPwd.split('') || [];
				//payPassWord.fill('*');
				payPassWord.fill('●');
				return payPassWord;
			},
			_show() {
				this.initData();
				return String(this.show) === 'false' ? false : true;
				
			},
			_forget() {
				return String(this.forget) === 'false' ? false : true;
			},
			_digits() {
				let digits = [];
				digits.length = this.digits;
				return digits;
			}
		},
		methods: {
			initData: function() {
				this.paymentPwd = this.value;
				this.activeInput = this.value.length;
			},
			forgetPwd: function() {
				console.log('跳转到忘记密码')
				
				uni.navigateTo({
				    url: '/pages/setPassword/setPayPassword'
				});
			},
			cancel: function() {
				this.$emit('cancel');
			},
			getKeyNumber: function(val) {
				if (val === '' || (val != -1 && this.activeInput == this.digits)) { //空或者已经达到最大值
					return false;
				} else if (val != -1) { //数字输入
					this.activeInput++
					this.paymentPwd += val;
					if (this.activeInput == this.digits) { //验证密码正确性
						return this.$emit('submit', this.paymentPwd);
					}
				} else { //删除
					if (this.activeInput != 0) {
						this.activeInput--;
						this.paymentPwd = this.paymentPwd.substr(0, this.activeInput)
					}
				}
			},
			getKeyboard: function(e) {
				var index = e.target.dataset.index;
				if (index === undefined) return false;
				var _length = this.paymentPwd.length
				this.activeInput = index <= _length ? index : _length;
			},
			//检测是否设置了支付密码 没设置让用户去设置
			async chailejiance(){
				let restow = await havepassword({});
				if(restow.code==0){
					console.log("检测用户设置了支付密码");
				}else{
					console.log("检测用户没有设置支付密码");
					uni.showModal({
						title: '温馨提示',
						content: '您还未设置鹿马支付密码，请前往设置！',
						confirmText:"去设置",
						showCancel:false,
						success:  (res)=> {
						  if (res.confirm) {
							uni.navigateTo({
							  url: '/pages/setPassword/setPayPassword',
							})
						  }
						}
					})
				}
			},
		},
		watch:{
			_show(){
				if(this._show){
					//检测有没有设置支付密码
					this.chailejiance();
				}
			}
		}
	}
</script>

<style lang="scss">
	// 清楚浮动
	.clearfix::before,
	.clearfix::after {
		content: "";
		display: table;
		clear: both;
	}

	.clearfix {
		zoom: 1;
	}

	// 我所有的弹窗插件都会基于这个父类class展开
	.best-modal {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: none;
		z-index: 99;
	}

	//方便以后写动画
	.best-modal.best-modal-active {
		display: block;
	}

	.best-modal-layer {
		background-color: rgba(0, 0, 0, 0.2);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}

	.best-modal-content {
		position: relative;
		z-index: 2;
	}
	
	._float-hover-c{
		opacity: .5;
		background-color:#cccccc !important;
	}

	// 弹窗个性化样式

	.digital-keyboard-modal view {
		//为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.digital-keyboard-modal .best-modal-content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		//border-radius: 20px 20px 0px 0px;
		border-radius:10upx;
		background: #fff;
		
		font-size:36upx;
		color:rgba(30,30,30,1);
		
	}

	.digital-keyboard-modal .dk-title {
		font-size:36upx;
		color:rgba(30,30,30,1);
		border-bottom:1px solid rgba(239,239,239,1);
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}
	.dk-price{
		margin-bottom: 40upx;
		text-align: center;
	}
	.dk-price .fuhao{
		color:#1E1E1E;
		font-size: 30upx;
		//font-weight: 700;
	}
	.dk-price .shuzi{
		color:#1E1E1E;
		font-size: 65upx;
		font-weight: 700;
	}
	.digital-keyboard-modal .dk-subtitle {
		text-align: center;
		font-size:30upx;
		
		color:rgba(0,0,0,1);
		margin-top: 40upx;
		margin-bottom: 15upx;
	}

	.digital-keyboard-modal .pwd-forget {
		font-size: 28upx;
		color: #FF6900;
		padding: 30upx 0 30upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		text-align: right;
		margin-right: 37px;
		line-height: 33upx;
	}

	/* 键盘 */
	.digital-keyboard-modal .form_edit {
		position: relative;
	}

	.digital-keyboard-modal .num {
		-webkit-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear;
		float: left;
		background-color: #fff;
		width: 33.33333333%;
		cursor: pointer;
		border: 1upx solid #eee;
		height: 100upx;
		text-align: center;
		color: #333;
		line-height: 100upx;
		font-size: 55upx;
		font-weight: bold;
	}

	.digital-keyboard-modal .num:nth-of-type(3n) {
		border-bottom: 0;
		border-right: 0;
	}

	.digital-keyboard-modal .num:nth-of-type(3n+1) {
		border-bottom: 0;
		border-left: 0;
	}

	.digital-keyboard-modal .num:nth-of-type(3n+2) {
		border-bottom: 0;
		border-left: 0;
		border-right: 0;
	}

	.digital-keyboard-modal .num.no-num {
		background-color: #f2f2f2;
		font-size: 0;
	}

	.digital-keyboard-modal .num:last-child {
		background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAilBMVEUAAADLy8vLy8vLy8vMzMzMzMzY2NjMzMzMzMzQ0NDOzs7MzMzMzMzNzc3Pz8/T09PMzMzNzc3Nzc3Nzc3Ly8vMzMzMzMzMzMzOzs7MzMzNzc3MzMzOzs7Ozs7Q0NDMzMzMzMzMzMzOzs7Ozs7Ly8vMzMzMzMzMzMzMzMzOzs7MzMzMzMzMzMzMzMzKmFAsAAAALXRSTlMAQICZ9vAD+uoMG+eyRCsHwV5RJfvhjEw2yGdWMiEX7NWjOhL83JKGeinNu3IVbGIkAAADJklEQVR42u2Z2XLiQAxFBY3xBhgw+2IWkxAg+v/fm6lJKgGBkbrHKl76PFJQOm7crWsZPB6Px+PxeDwej0dGsm/UzB7kZJMIFYiOCYhYz1GJcCCqP0Y9hsCSp6jIJgaGXoSqLLn6G9TlCE9ZbVAZA8+YBcigK7BvIYOuQIOpry3QDZFBV2DK1NcWmI6QQVdgyNTXFlgekEFXYCD8cTeG4Rafcl7GUDQjO4EFSggG399+tlsn7a+OVqlp3OuffvbrqLo+fBPP5QKfKKJxdcdgBR9XmS6UCnygiIhfs8NNq+0IBSYoFGDv2tEUrtnJBCYoZUYMuLR1Fgm8o5gOs3NJ3pyiRMCgBQ1ydoY3eZdcfy+QCOzQhqBHumcLf2gRu3WEvEB7h3ZEOclvwY/bDG4oxsgLtDtoS0rW4JQ+/jx5Q0aA1BcTrEilf1c6Tu68GAH7+pVrvUXcFnf/DC+QXdCNVhduiPv9WJAsqUDWR1dGZL9lmV2yNF/a6M7h98RxSZbmt1U6s4BKlshhnOvTruuYbIzN+cvkDqdkYaCoI/++wwOOKBJYYB3s4A6DMoEd1mPQBqfObuCCtdBpu402DPTrWgBKHskEOlgDxnm8ZuBdYxP8tmFeoIuodhCVc8na8ZruzSC7CAQaITLwDZkiz3mG6ZjWkaTs2T1pmf+cRqUnEoneaEyDZcgKuM/j0vz+vm/NgOZ1RsDdYLymO//hXbEPWAGYuRikyePBejglBqeIEXCbyganqsH6iBr0AkbAZS5N/+vVpjqqQvfACDhM5pfP4v9hKExHxvndRIfGf+Z87PMCkNsYJOThnAvLe0bA9v3QnAx22R6Vixr5WmzQvznsRnxYHjAC1u/o8qvrF+SEMmUErA3m5c3jF2dgxFkqkRpEs6+G28QnXArmGcFUBimeVjOG9p4JPZtjDpBNrNJk8Ya1so1s42yxRU14ASgZA2UB3kBfAMozMigLQMwYKAswgxt9AWZ0pS/ADO8UBF5mYMDNQF9APMLVGbCRIb4iC3itQZjAaw2OAC81OGcgMZigEiYGGeWwqcDnCjwej8fj8Xg8Ho/nL38AXRgT/6dxCesAAAAASUVORK5CYII=) center center / auto 50upx no-repeat;
	}
	
	
	.digital-keyboard-modal .num:focus{
		background-color: #CCCCCC;
	}

	.digital-keyboard-modal .pwd-box {
		padding: 0 37upx;
		position: relative;
		text-align: center;
	}

	.digital-keyboard-modal .pwd-text {
		position: relative;
		line-height: 110upx;
		vertical-align: middle;
		text-align: center;
		font-size: 30upx;
		font-weight: bold;
		width: 92upx;
		height: 92upx;
		line-height: 92upx;
		margin-right: 10upx;
		display: inline-block;
		border: solid 1px #ccc;
	}

	.digital-keyboard-modal .pwd-text.active:after {
		-webkit-animation: twinkle 1s infinite;
		animation: twinkle 1s infinite;
		height: 70%;
		width: 4upx;
		content: '';
		position: absolute;
		top: 15%;
		left: 50%;
		margin-left: -2upx;
		background-color: #4fa5e1;
	}

	@-webkit-keyframes twinkle {
		from {
			background-color: #4fa5e1;
		}

		to {
			background-color: transparent;
		}
	}

	@keyframes twinkle {
		from {
			background-color: #4fa5e1;
		}

		to {
			background-color: transparent;
		}
	}
</style>
