<template>
  <view class="edit_phone">
    <view class="center">
      <view class="ipt_box">
        <u-input
          placeholder="请输入新手机号"
          v-model="phone"
          border="bottom"
          type="number"
          fontSize="32rpx"
          clearable
        ></u-input>
        <view style="margin-top: 50rpx">
          <u-input
            border="bottom"
            clearable
            placeholder="请输入验证码"
            v-model="value"
            fontSize="32rpx"
          >
            <template slot="suffix">
              <u-code
                ref="uCode"
                @change="codeChange"
                seconds="60"
                changeText="Xs"
              ></u-code>
              <u-button
                @tap="getCode"
                :text="tips"
                class="custom-style"
                :plain="true"
                size="mini"
              ></u-button>
            </template>
          </u-input>
        </view>
      </view>
      <button class="btn" @tap="submit">保存</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tips: '',
        // 验证码
        value: '',
        // 手机号
        phone: '',
      }
    },
    methods: {
      // 验证码
      codeChange(text) {
        this.tips = text
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          if (this.phone) {
            // 模拟向后端请求验证码
            uni.showLoading({
              title: '正在获取验证码',
            })
            setTimeout(() => {
              uni.hideLoading()
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            }, 2000)
            this.$api.post('/login/sendSms', { phone: this.phone })
          } else {
            uni.$u.toast('请先输入手机号')
          }
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      },
      submit() {
        if (this.phone && this.value) {
          uni.showToast({
            title: '修改成功',
            icon: 'success',
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.$u.toast('请先输入手机号和验证码')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 60rpx 24rpx;
  }
  // .ipt_box {
  //   margin-top: 100rpx;
  // }
  .custom-style {
    color: #6195fe;
    text-align: center;
  }
  /deep/.u-button--plain.u-button--info {
    color: #ec7c00 !important;
    border: 0 !important;
    font-size: 26rpx;
  }
  /deep/.u-input--no-radius {
    padding: 24rpx 18rpx !important;
  }
  .btn {
    height: 88rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 88rpx;
    border: 0;
    margin-top: 140rpx;
    background-color: #ec7c00;
    color: white;
  }
  /deep/.u-button__text {
    font-size: 28rpx !important;
  }
</style>
