<script>
import { clientLogin,sendMsg } from '@/api/newLogin.js'
export default {
  data() {
    return {
      phone: '',
      password: '',
      code: '',
      countdown: 60,
      timer: null,
      isSendingCode: false,
      isBinding: false,
      isPwdHide: true,
      isPasswordLogin:true,
      useCodeLogin:false,

      showCaptcha:false, // 弹窗显隐
      imgCode:'',        // 用户填写的图形验证码
      captchaImg:'',     // 图形验证码图片地址
      captchaKey:''      // 后端返回验证码标识
    }
  },
  computed: {
    canGetCode() {
      return this.phone && this.validatePhone(this.phone) && !this.isSendingCode && this.countdown === 60
    },
    canBind() {
      return this.phone && this.validatePhone(this.phone) && this.code && this.code.length === 6 && !this.isBinding
    }

  },
  onShow() {
    this.password = ''
  },
  methods: {
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
    nextStep(){
       if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }

      if (!this.validatePhone(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      if(!this.isPasswordLogin){
        this.showCaptcha=true
      }

    },
    //登录
    loginPhoneFun() {
      var _this = this;
      if (this.isBinding) return

      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }

      if (!this.validatePhone(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }

      if (!this.password && this.isPasswordLogin) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }

      this.isBinding = true
      clientLogin({
        //openId: uni.getStorageSync('wx_copenid'),
        userType:'2',
        phone: _this.phone,
        codeSwitch:'false',//是否开启验证码登录 true-是 false-否
        passWord: this.passWord
      }).then(res => {
        if (res.data.code == 200) {
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          uni.setStorageSync('wx_phone', _this.phone)
          _this.isBinding = false;
          _this.back();
        }
      })
    },
    back() {
      let pages = getCurrentPages();
      if (pages.length >= 2) {
        let prevPage = pages[pages.length - 2];
        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'
        })
      }
    },
    //图形验证码提交
    submitImgCode(){
      if(!this.imgCode){
         uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      sendMsg({phone :this.phone }).then(res=>{
        console.log(res)
        uni.navigateTo({
          url: `/setting/myNew/useCodeLogin?phone=`+this.phone
        })

      })
      
    },
    //忘记密码
    forgetPassword(){
       uni.navigateTo({
          url: `/setting/myNew/forgetPassword?phone=`+this.phone
       })

    }


  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<template>
  <view class="sett-box">
    <!-- 放在页面最顶部，拦截自动填充核心代码 -->
    <input type="text" name="username" style="position:absolute;opacity:0;width:0;height:0;z-index:-99;" />
    <input type="password" name="password" style="position:absolute;opacity:0;width:0;height:0;z-index:-99;" />


    <view class="greeting-area">
      <view class="bubble-box">
        <view class="bubble-text">您好，欢迎使用广誉源！</view>
      </view>

    </view>
    <view class="input-box" style="margin-top: 180rpx;">
      <u-input v-model="phone" type="number" border="none" maxlength="11" placeholder="请输入手机号"
        placeholder-style="color: #999" class="input-item">
        <template slot="prefix">
          <view class="label">
            <text>+86</text>
            <u-line length="38rpx" color="#ccc" margin="0 12rpx 0 20rpx" direction="col"></u-line>
          </view>
        </template>
      </u-input>
    </view>

    <view class="input-box" v-if="isPasswordLogin">
      <u-input v-model="password" autocomplete="off" border="none" :password="isPwdHide" maxlength="20"
        placeholder="请输入密码" placeholder-style="color: #999" class="input-item">
        <template #suffix>
          <u-icon :name="isPwdHide ? 'eye-off' : 'eye'" @click="isPwdHide = !isPwdHide" size="32rpx" color="#999" />
        </template>
      </u-input>
    </view>


    <view class="bind-btn">
      <u-button v-if="isPasswordLogin || useCodeLogin"  :loading="isBinding" type="primary" @click="loginPhoneFun">登录</u-button>
      <u-button v-if="!isPasswordLogin"  :loading="isBinding" type="primary" @click="nextStep">下一步</u-button>
    </view>
    <view style="display: flex;justify-content: space-between;margin-top: 30rpx;font-size: 28rpx;">
      <view v-if="isPasswordLogin" @click="isPasswordLogin=false">验证码登录</view>
      <view v-if="!isPasswordLogin" @click="isPasswordLogin=true">密码登录</view>
      <view v-if="isPasswordLogin" @click="forgetPassword">忘记密码</view>
    </view>






    <!-- //myNew/forgetPassword -->

    <!-- 图形验证码弹窗 -->
  <u-popup :show="showCaptcha" mode="center" border-radius="12">
    <view class="captcha-box">
      <view class="captcha-title">
        <text>请输入下方图形验证码</text>
        <u-icon name="close" @click="showCaptcha=false"></u-icon>
      </view>
      <!-- 图形验证码图片，点击刷新 -->
      <image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
      <!-- 验证码输入框，唤起全字符键盘 -->
      <u-input 
        v-model="imgCode" 
        placeholder="请输入图形验证码"
        :focus="showCaptcha"
        type="text"
        maxlength="4"
        border="none"
      ></u-input>
      <u-button @click="submitImgCode" block custom-style="margin-top:20rpx;">确定</u-button>
    </view>
  </u-popup>



  </view>
</template>

<style scoped lang="scss">

.captcha-box{
  width:600rpx;
  padding:30rpx;
}
.captcha-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:32rpx;
  margin-bottom:30rpx;
}
.captcha-img{
  width:100%;
  height:120rpx;
  margin-bottom:20rpx;
}

.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;

  .label {
    display: flex;
  }

  .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 {

  ::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>
