<template>
  <view class="zai-box" v-show="login == true">
    <view class="header_banner">
      <view class="backs" :style="{top:CustomTop+'px'}" @click="backs">
        <uni-icons type="home" color="#999" size="22"></uni-icons>
      </view>
      <image class="bigimg" src="../../static/dls.jpg" mode=""></image>
    </view>
    <view class="loginpage">
      <view class="hydl">
        欢迎登录
      </view>
      <view class="wel">
        Welcome to login
      </view>
      <view class="pages">
        <view class="cu-form-group margin-top" :class="[shape=='round'?'round':'']">
          <text class="cuIcon-people margin-right-xs" style="color: #3e8eff;"></text>
          <input @input="TypeInput($event)" placeholder="请输入账号名称" name="input"
                 v-model="userInfoLoginDTO.userName"></input>
        </view>
        <view class="cu-form-group margin-top" :class="[shape=='round'?'round':'']">
          <text class="cuIcon-lock margin-right-xs" style="color: #3e8eff;"></text>
          <input class="uni-input" placeholder="请输入登陆密码" :password="!showPassword"
                 v-model="userInfoLoginDTO.password"/>
        </view>
        <view class="padding text-center margin-top">
          <button class="cu-btn bg-blue" :loading="loading" :class="[shape=='round'?'round':'']"
                  @click="tologins()">
            <text space="emsp">{{ loading ? "登录中..." : " 登录 " }}</text>
          </button>
          <view class="botbq">

          </view>
        </view>
      </view>
    </view>
    <!-- <view class="loginpage">
      <image class="bigimg" src="../../static/dls.jpg" mode=""></image>
      <view class="padding text-center margin-top">
        <button class="login-btn block bg-blue lg round" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号登录</button>
        <view class="botbq">
          版权所有@
        </view>
      </view>
    </view> -->
    <!-- 登录加载弹窗 -->
    <view class="cu-load load-modal" v-if="loading">
      <!-- <view class="cuIcon-emojifill text-orange"></view> -->
      <image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit" class="round"></image>
      <view class="gray-text">登录中...</view>
    </view>
  </view>

</template>

<script>
import {ACCESS_TOKEN, USER_NAME, USER_INFO} from "@/common/util/constants"
import {mapActions} from "vuex"
import configService from '@/common/service/config.service.js';
import api from "@/api/api"

export default {
  data() {
    return {
      shape: '',//round 圆形
      loading: false,
      phoneNo: '',
      smsCode: '',
      showPassword: false, //是否显示明文
      loginWay: 3, //1: 账密，2：验证码
      pages: 2,
      smsCountDown: 0,
      smsCountInterval: null,
      toggleDelay: false,
      version: '',
      //第三方登录相关信息
      thirdType: "",
      thirdLoginInfo: "",
      thirdLoginState: false,
      bindingPhoneModal: false,
      login: false,
      thirdUserUuid: '',
      url: {
        bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
      },
      code: '',
      userInfoLoginDTO: {
        userName: '',
        password: '',
      },
      CustomTop: 0,
    };
  },
  onLoad() {
    this.CustomTop = this.Custom.top
  },
  onShow() {
    var that = this
    uni.login({
      success: function (res) {
        console.log(res.code)
        that.code = res.code
        let params = {}
        params.jsCode = that.code
        console.log(params, 152)
        api.wxlogin(params).then(res => {
          console.log(res, 165)
          if (res.data.code == 0) {
            let userInfo = res.data.data;
            uni.setStorageSync('third_session', userInfo.thirdSession);
            console.log(that.login, '状态')
            if (userInfo.id) {
              that.login = false
              uni.reLaunch({
                url: '/pages/index/index'
              })
            } else if (!userInfo.id) {
              that.login = true
            }
          }
        })
      }
    });
  },
  methods: {
    backs() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    getPhoneNumber(e) {
      this.code = e.detail.code
      var json = {
        "code": this.code
      }
      this.$http.post('/applet/userInfo/ma/phone/login', json).then(res => {
        // 打印调用成功回调
        if (res.data.code == 0) {
          // uni.setStorageSync('App-Token',res.token)
          uni.setStorageSync('constant', res.data.data)
          uni.reLaunch({
            url: '/pages/index/index'
          })
        } else {
          uni.removeStorageSync('third_session')
          uni.removeStorageSync('constant')
        }
      })
    },
    TypeInput(e) {
      console.log(e, 415)
      // 只能输入数字的验证;
      const inputType = /[\W]/g   //想限制什么类型在这里换换正则就可以了
      this.$nextTick(function () {
        this.userInfoLoginDTO.userName = e.detail.value.replace(inputType, '');
      })
    },
    tologins() {
      console.log(this.userInfoLoginDTO.password, this.userInfoLoginDTO.userName, '密码用户')
      if (!this.userInfoLoginDTO.userName) {
        uni.showToast({
          title: '请输入账号',
          icon: 'error',
          duration: 2000
        })
        return
      }
      if (!this.userInfoLoginDTO.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'error',
          duration: 2000
        })
        return
      }
      this.$http.post('/applet/userInfo/logins', this.userInfoLoginDTO).then(res => {
        if (res.data.code == 0) {
          uni.setStorageSync('constant', res.data.data)
          uni.setStorageSync('password', this.userInfoLoginDTO.password)
          uni.setStorageSync('userName', this.userInfoLoginDTO.userName)
          uni.reLaunch({
            url: '/pages/index/index'
          })
        } else {
          uni.removeStorageSync('constant')
          uni.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
          // this.userInfoLoginDTO.password = ''
          // this.userInfoLoginDTO.userName = ''
        }
      })
    }
  }
}
</script>

<style>
.login-paddingtop {
  padding-top: 100upx;
}

.zai-box {
  width: 100%;
  height: 100%;
}
.backs {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 60rpx;
  border-radius: 50%;
  left: 30rpx;
}
.header_banner {
  width: 100%;
  height: 800rpx;
  position: absolute;
}
.bigimg {
  z-index: -99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 800rpx;
}
/*    .zai-box {
        padding: 0 20upx;
        padding-top: 100upx;
        position: relative;
    } */

.zai-logo {
  width: 200upx;
  height: 150px;
}

.zai-title {
  font-size: 58upx;
  color: #000000;
  text-align: center;
}

.input-placeholder, .zai-input {
  color: #94afce;
}

.zai-label {
  padding: 60upx 0;
  text-align: center;
  font-size: 30upx;
  color: #a7b6d0;
}

.zai-btn {
  background: #ff65a3;
  color: #fff;
  border: 0;
  border-radius: 100upx;
  font-size: 36upx;
}

.zai-btn:after {
  border: 0;
}

/*按钮点击效果*/
.zai-btn.button-hover {
  transform: translate(1upx, 1upx);
}

.login-btn {
  width: 90%;
  line-height: 98rpx;
  height: 98rpx;
  border-radius: 49rpx;
}

page {
  background-color: white;
  height: 100%;
}

.loginpage {
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  top: 500rpx;
  padding: 63rpx 56rpx 0;
}

.hydl {
  font-size: 40rpx;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.wel {
  color: #7e7e80;
  margin-bottom: 50rpx;
}

input {
  width: 100%;
  height: 110rpx;
  border-radius: 20rpx;
}

.cu-form-group {
  background-color: #f6f7fb;
  height: 110rpx;
  border-radius: 20rpx;
}

.cu-btn {
  width: 100%;
  height: 107rpx;
  font-size: 36rpx;
  border-radius: 20rpx;
}

.botbq {
  font-size: 28rpx;
  position: fixed;
  bottom: 48rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #2a2a2a;
}

.pages {
  /* border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx; */
  width: 100%;
}
</style>
