<script>
import { loginPhone, sendMsg } from '@/api/newLogin.js'
export default {
  data() {
    return {
      phone: '', code: '',
      countdown: 60,
    }
  },
  computed: {
    canGetCode() {
      return !this.isSendingCode && this.countdown === 60
    },
    canBind() {
      return this.code && this.code.length === 6 && !this.isBinding
    }
  },
  onLoad(options) {
    if (options.phone) {
      this.phone = options.phone;
      clearInterval(this.timer)
      this.timer = null
      this.startCountdown()
    }

  },
  methods: {
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
    getCode() {
      if (this.isSendingCode || this.countdown < 60) return

      this.isSendingCode = true
      sendMsg({ phone: this.phone }).then(res => {
        console.log(res)

        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })

        this.startCountdown()
        this.isSendingCode = false

      })


    },
    startCountdown() {
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.countdown = 60
          this.timer = null
        }
      }, 1000)
    },
    // 满6位自动校验
    autoCheckCode(val) {
      // 输入刚好6位时自动提交
      if (val.length === 6) {

        loginPhone({
          //openId: uni.getStorageSync('wx_copenid'),
          userType: '2',
          phone: this.phone,
          codeSwitch: 'true',//是否开启验证码登录 true-是 false-否
          phoneMsg: this.code
        }).then(res => {
          if (res.data.code == 200) {
            // uni.showToast({
            //   title: '登录成功',
            //   icon: 'success'
            // })
            uni.setStorageSync('wx_phone', this.phone)
            this.back()
          }
        })
      }

    },
    back() {
      let pages = getCurrentPages();
      if (pages.length >= 2) {
        let prevPage = pages[pages.length - 3];
        let prevRoute = prevPage.route;
        if (prevRoute && prevRoute !== 'pages/index/index') {
          if (prevRoute.startsWith('pages/')) {
            uni.switchTab({
              url: '/' + prevRoute
            })
          } else {
            uni.navigateBack({
              delta: 1,
              fail: () => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            })
          }
        } else {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<template>
  <view class="sett-box">
    <view class="greeting-area">
      <view class="bubble-box">
        <view class="bubble-text">请输入验证码</view>
      </view>

    </view>
    <view>验证码已发送至：+86 {{ phone }}</view>




    <view class="input-box code-box">
      <u-input v-model="code" type="number" border="none" maxlength="6" placeholder="请输入手机验证码"
        placeholder-style="color: #999" class="input-item code-input" @input="autoCheckCode"></u-input>
      <view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
        <text v-if="countdown === 60">获取验证码</text>
        <text v-else>{{ countdown }}s 后重新获取</text>
      </view>
    </view>


  </view>
</template>

<style scoped lang="scss">
.sett-box {
  width: 750rpx;
  height: 100vh;
  background: #F5F8F8;
  padding: 36rpx 40rpx;
}

.input-box {
  width: 678rpx;
  height: 92rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;

  .input-item {
    flex: 1;
  }
}

.code-box {
  .code-input {
    flex: 1;
  }

  .code-btn {
    width: 200rpx;
    text-align: right;
    font-size: 28rpx;
    color: #2DB1A8;
    line-height: 88rpx;

    &.disabled {
      color: #2DB1A8;
    }
  }
}

.bind-btn {
  margin-top: 120rpx;

  ::v-deep .u-button {
    width: 678rpx;
    height: 84rpx;
    border-radius: 60rpx;
    font-size: 28rpx;
    background: linear-gradient(90deg, #2DB1A8 0%, #33BCB0 100%);
    border: none;
  }

  ::v-deep .u-button--disabled {
    background: #E0E0E0 !important;
    color: #999 !important;
  }
}
</style>
