<template>
  <view class="container">
    <view class="top-box">
      <template v-if="type == 0">
        <p class="p1">更换手机号</p>
        <p class="p2">请输入新手机号，作为登陆账号</p>
      </template>
      <template v-else>
        <p class="p1">更换邮箱</p>
      </template>


      <view class="ipt-box">
        <view class="ipt-item">
          <p class="ipt-text">{{ type == 0 ? '手机号' : '电子邮箱' }}</p>
          <u--input v-if="type == 0" placeholder="请输入手机号" v-model="phone_text" type='number' maxlength='11' clearable></u--input>
          <u--input v-else placeholder="请输入电子邮箱" v-model="email_text" type='text' clearable></u--input>
        </view>
        <view class="ipt-item">
          <p class="ipt-text">验证码 </p>
          <u--input placeholder="请输入验证码" v-model="code_text"></u--input>
          <button class="ipt-btn" :disabled="btn_disabled" :class="btn_disabled ? 'act-ipt-btn' : ''"
            @click="handlerGetCodeBtn">{{ btn_text }}</button>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn" @click="handlerConfirmBtn"> 确定 </button>
      <p  class="btn-text" v-if="btn_disabled && type == 0">已向手机{{ phone_text.substring(0, 3) + '****' + phone_text.substring(7) }} 发送验证码 </p>
      <p  class="btn-text" v-if="btn_disabled && type == 1">已向邮箱{{ email_text.substring(0, 3) + '****' + email_text.substring(6) }} 发送验证码 </p>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        phone_text: '',
        email_text: '',
        code_text: '',
        type: 0,
        time: 60,
        btn_text: '发送验证码',
        btn_disabled: false
      }
    },
    onLoad(option) {
      this.type = option.type
      switch (this.type) {
        case '0':
          uni.setNavigationBarTitle({
            title: '绑定手机号'
          });
          break;
        case '1':
          uni.setNavigationBarTitle({
            title: '绑定邮箱'
          });
          break;
      }
    },
    methods: {
      // 点击获取验证码按钮
      handlerGetCodeBtn() {
        if (this.type == 0) {
          let ResPhone = /^[1][3,4,5,6.7,8,9][0-9]{9}$/
          if (!ResPhone.test(this.phone_text)) {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none'
            })
            return
          } else {
            this.handlerGetCode()
          }
        } else {
          let ResEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          if (!ResEmail.test(this.email_text)) {
            uni.showToast({
              title: '请输入正确的电子邮箱',
              icon: 'none'
            })
            return
          } else {
            this.handlerGetCode()
          }
        }
      },
      // 获取验证码
      handlerGetCode() {
        this.timers = setInterval(() => {
          this.btn_disabled = true
          this.time--
          this.btn_text = `${this.time}后重新获取`
          if (this.time == 0) {
            clearInterval(this.timers)
            this.time = 60
            this.btn_text = `发送验证码`
            this.btn_disabled = false
          }
        }, 1000)
      },
      // 确定按钮
      handlerConfirmBtn() {
        uni.showToast({
          title:`${this.type == 0 ? '手机号' : '电子邮箱'}更换成功`,
          icon:'none'
        })
        setTimeout(()=>{
          uni.navigateBack({
            delta:2
          })
        },1500)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .top-box {
      padding: 80rpx 60rpx 0;

      .p1 {
        font-size: 44rpx;
        color: #000;
      }

      .p2 {
        font-size: 26rpx;
        color: #A2A2A2;
        margin-top: 10rpx;
      }

      .ipt-box {
        margin-top: 60rpx;

        .ipt-item {
          display: flex;
          align-items: center;
          border-bottom: 2rpx solid #F7F7F7;
          margin-bottom: 30rpx;
          padding-bottom: 16rpx;

          .ipt-text {}

          .ipt-btn {
            width: 30%;
            background-color: #Fff;
            border: 2rpx solid #83ADCC;
            color: #83ADCC;
            border-radius: 30rpx;
            font-size: 26rpx;
            padding: 0;
            margin: 0;
          }

          .act-ipt-btn {
            background-color: #F7F7F7;
          }
        }
      }
    }

    .btn-box {
      margin-top: 100rpx;
      text-align: center;

      .btn {
        background-color: #83ADCC;
        color: #fff;
        border-radius: 40rpx;
        width: 90%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
      }

      .btn-text {
        font-size: 26rpx;
        color: #A2A2A2;
        margin-top: 20rpx;
      }
    }
  }
</style>
