<template>
  <view class="mark" :class="[show_key ? '' : 'hidden']">
    <view class="kong"></view>
    <!-- 信息框 -->
    <view class="msg">
      <!-- 关闭按钮 -->
      <view class="px-30rpx py-20rpx">
        <u-icon name="close" @tap="closeFuc"> </u-icon>
      </view>
      <view class="title"> {{title}} </view>
      <slot> </slot>
      <view class="pswBox">
        <view v-for="(item, index) in 6" :key="index" class="content_item">{{ password[index] ? '●' : '' }}</view>
      </view>
    </view>
    <!-- 数字键盘 -->
    <view class="numeric">
      <block v-for="item in num" :key="item">
        <view class="num" :class="item == 10 ? 'amend1' : item == 12 ? 'amend3 iconfont' : ''" @tap="press({ num: item })">
          <u-icon size="36" v-if="item == 12" name="backspace"></u-icon>
          <text v-else>{{ item == 10 ? '' : item == 11 ? '0' : item == 12 ? '' : item }}</text>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title:{
      type:String,
      default:'请输入支付密码'
    }
  },
  computed:{
    show_key:{
      get(){
        return this.value
      },
      set(val){
        this.$emit('input',val)
      }
    }
  },
  data() {
    return {
      num: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      password: '',
    };
  },
  methods: {
    press(obj) {
      let num = obj.num;
      if (obj.num == 10) {
        console.log('我是10我什么都不干');
      } else if (obj.num == 12) {
        this.password = this.password.slice(0, this.password.length - 1);
      } else if (obj.num == 11) {
        num = '0';
        this.password += num;
      } else {
        this.password += num;
      }
      if (this.password.length == 6) {
        this.$emit('getPassword', this.password);
        this.password = '';
      }
    },
    // 关闭支付页面
    closeFuc() {
      this.show_key = false
      this.$emit('closeFuc', false);
    },
    // 找回密码
    forgetFuc() {
      uni.navigateTo({
        url: '/pages/mine/myWallet/changezfPwd/changezfPwd',
      });
    },
  },
};
</script>

<style>
.mark {
  width: 750upx;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 0 500upx 0;
  position: fixed;
  top: 0upx;
  left: 0upx;
  z-index: 10027;
}
.hidden {
  display: none;
}
.kong {
  width: 750upx;
  height: 250upx;
}
.msg {
  width: 550upx;
  height: 450upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20upx;
  margin: 0 auto;
  animation: msgBox 0.2s linear;
}
@keyframes msgBox {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  50% {
    transform: translateY(25%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes numBox {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  50% {
    transform: translateY(25%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.msg > .img {
  padding: 20upx 0 0 20upx;
  font-size: 40upx;
}
.msg > .title {
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  font-weight: 500;
  font-size: 36upx;
  text-align: center;
}
.msg > .subTitle {
  width: 100%;
  height: 50upx;
  line-height: 50upx;
  font-weight: 400;
  font-size: 32upx;
  text-align: center;
}
.pswBox {
  width: 80%;
  height: 80upx;
  margin: 50upx auto 0;
  display: flex;
}
.content_item {
  flex: 2;
  text-align: center;
  line-height: 80upx;
  border: 1px solid #d6d6d6;
  border-right: 0upx solid;
}
.content_item:nth-child(1) {
  border-radius: 10upx 0 0 10upx;
}
.content_item:nth-child(6) {
  border-right: 1px solid #d6d6d6;
  border-radius: 0 10upx 10upx 0;
}
.numeric {
  width: 750upx;
  height: 470upx;
  border: 1upx solid;
  position: fixed;
  z-index: 98;
  bottom: 0upx;
  background-color: #fff;
  animation: msgBox 0.2s linear;
}
.num {
  width: 225upx;
  height: 90upx;
  font-size: 42upx;
  font-weight: 500;
  line-height: 90upx;
  text-align: center;
  vertical-align: middle;
  margin: 12upx 12upx 0 12upx;
  display: inline-block;
  border: 1upx solid #e4e7ed;
  border-radius: 10upx;
  background-color: #ffffff;
  position: relative;
  z-index: 99;
}
.forget {
  font-size: 28upx;
  font-weight: 500;
  color: #3d84ea;
  text-align: center;
  line-height: 80upx;
}
.amend1 {
  border: 1upx solid #e4e7ed;
  background-color: #cccfd6;
}
.amend3 {
  border: 1upx solid #e4e7ed;
  background-color: #e4e7ed;
  line-height: 80rpx;
}
/* .amend11{
		position: absolute;
		top: 313upx;
		left: 0upx;
		background-color: #CCCFD6;
		border: 1upx solid #FF0000;
	}
	.amend1{
		height: 100upx !important;
		position: absolute;
		top: 306upx;
		left: 0upx;
		z-index: 99;
		background-color: #CCCFD6;
		border: 2upx solid #CCCFD6;
	}
	.amend2{
		position: absolute;
		top: 306upx;
		left: 250upx;
		z-index: 99;
	}
	.amend3{
		position: absolute;
		top: 306upx;
		left: 500upx;
		z-index: 99;
		font-size: 60upx;
		border: 0upx;
		background-color: #CCCFD6;
	} */
</style>
