// An highlighted block
<template>
  <view class="content" style="position: relative;">
    <cu-custom bgColor="bg-white" :isBack="false">
      <block slot="content">
        登录
      </block>
    </cu-custom>
    <view class="avatorWrapper">
      <view class="avator">
        <image class="img" style="margin-top: 80px;" src="../../static/login/youxianxin.png" mode="widthFix" ></image>
      </view>
    </view>
<!--    <view class="form">-->
<!--      <view class="lia inputWrapper">-->
<!--          <img style="width: 20px;margin: 0 5px;" src="../../static/login/iphoneIcon.png"/>-->
<!--　        <input class="input" type="text"  placeholder="请输入手机号码"/>-->
<!--      </view>-->
<!--      <view class="lia inputWrapper">-->
<!--          <img style="width: 20px;margin: 0 5px;" src="../../static/login/verification.png" />-->
<!--　        <input class="input" type="text"   placeholder="请输入验证码"/>-->
<!--      　　<view class="huoquzhong" >获取验证码</view>-->
<!--      </view>-->
<!--    </view>-->

    <u-form   :model="form" ref="uForm" class="form">
      <u-form-item label="" label-width="130" border-bottom="false">
        <view class="lia inputWrapper">
        <img style="width: 20px;margin: 0 5px;" src="../../static/login/iphoneIcon.png"/>
        <u-input class="margin-left" type="number" placeholder="请输入您的手机号" v-model="form.phone" maxlength="11" />
        </view>

      </u-form-item>
      <view class="lia inputWrapper ">
        <u-form-item label="" label-width="130">
          <img style="width: 20px;margin: 0 5px;" src="../../static/login/verification.png" />
          <u-input  class="margin-left" type="number" placeholder="请输入您的验证码" v-model="form.code" maxlength="6" />
          <u-verification-code class="huoquzhong" start-text="获取验证码" end-text="获取验证码" change-text="XS" :seconds="seconds" ref="uCode"
                               @change="codeChange">

          </u-verification-code>
          <view   class="huoquzhong" slot="right" :disabled="submissionFlag" type="primary" size="mini" @click="getCode">{{tips}}
          </view>
        </u-form-item>
      </view>

    </u-form>
    <view class="loginBtn" @click="submit">
      <text class="btnValue">登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      form: {
        phone: '',
        code: '',
        openid: '',
      },
      seconds: 60,
      submissionFlag: false,
      tips: '',
    }
  },
  onLoad(option) {
    console.log(option)
    var that = this;
    let code= this.getQueryString("code")
    if(code != undefined && code != null && code !=  ''){
        // let code= this.getQueryString("code")
        let param ={
          code:code
        }
        this.openid = localStorage.getItem('openid')
        // if(this.openid === null || this.openid === "" || this.openid === "null"){
        this.$u.api.getAccessToken(param).then(data => {
          if(data.code===200){
            //写入数据n
            // localStorage.setItem("openid",data.result.openid);//用户openid
            if(data.data.serverId != null && data.data.serverId != undefined && data.data.serverId != ''){
              that.form.phone = data.data.phone
              that.form.code = "666666"
              that.form.openid = data.data.openid
              that.submit();
            }else {
              that.form.openid = data.data.openid
            }

          }else{
            that.$message({
              message: '授权失败',
              type: 'error'
            });
          }
        })
      // }
    }
  },
  methods: {
    //获取url中code
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    submit(openid) {
      if (!this.form.phone) {
        this.$api.msg("请输入您的手机号")
        return
      }
      if (!this.form.code) {
        this.$api.msg("请输入您的验证码")
        return
      }
      console.log(this.form);
      this.$u.api.smsLogin(this.form).then(res => {
        console.log(res)
        if (res.code === 200) {
            //登录成功，跳转首页
            uni.setStorageSync("userInfo", res.data.userInfo)
            // uni.setStorageSync("info", res.result.security.token)
            // uni.setStorageSync("secret", res.result.security.secret)
            // uni.switchTab({
            //   url: '../index/index'
            // });
          uni.redirectTo({
            url: '../index/index'
          });
        } else {
          this.$u.toast(res.msg);
        }
      })
    },

    getCode() {
      if (!this.form.phone) {
        this.$api.msg("请输入手机号")
        return
      }
      if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
        this.$api.msg("请输入正确的手机号")
        return
      }
      console.log(this.form)
      this.$u.api.sendLoginSms(this.form).then(res => {
        uni.showLoading({
          title: '正在获取验证码'
        })
        if (res.code === 200) {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
          console.log(res)
        } else {
          this.$u.toast(res.msg);
        }
      })
    },
    end() {
      this.submissionFlag = false;
    },
    start() {
      this.submissionFlag = true;
    },
    codeChange(text) {
      this.tips = text;
    },

  }
}
</script>

<style>
.lia {
  width: 690rpx;
  height: 105rpx;
  margin: 0 auto;
  border-bottom: 1rpx solid #f1f1f1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.shuruqian {
  height: 50rpx;
  width: 60%;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.shuruhou {
  height: 50rpx;
  width: 60%;
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.huoqu {
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2d8bff;
}
.huoquzhong {
  /*width: 110px;*/
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FC6035;
}
.icon_close{
  float: right;
  display: block;
  margin-top: -45px;
  margin-right: 0px;
}
.content {
  background: white;
  width: 100vw;
  height: 100vh;
}
.avatorWrapper{
  height: 30vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.avator{
  width: 150px;
  height: 200px;
  overflow: hidden;
}
.avator .img{
  width: 100%
}
.form{
  padding: 0 100upx;
  margin-top: 50px;
}
.inputWrapper{
  width: 100%;
  height: 45px;
  background: #EEEEEE;
  border-radius: 25px;
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 25px;
}
.inputWrapper .input{
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 15px;
}
.loginBtn{
  position: absolute;
  width: 75%;
  height: 43px;
  background: #FC6035;
  border-radius: 27px;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 200px 54px 0px 54px;
  bottom: 20px;
}
.loginBtn .btnValue{
  color: white;
}
.forgotBtn{
  text-align: center;
  color: #EAF6F9;
  font-size: 15px;
  margin-top: 20px;
}
</style>
