<script setup lang="ts" name="Login">
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '../../../store'
import { onLoad } from '@dcloudio/uni-app'
import { getCodeImg,getUserToken } from '@/api/user'
import logo from '@/static/image/logo.png'
const userStore = useUserStore()


const formRef:any = ref(null)
const showPassword = ref(false)
// 登陆信息
const loginForm = ref({
  username: '',
  password: '',
  code: '',
  uuid: '',
  tenantId: '000000'
})

const rules=ref({
  username: [{
    required: true,
    message: '请输入账号',
    // blur和change事件触发检验
    trigger: ['blur', 'change']
  }],
   password: [{
    required: true,
    message: '请输入密码',
    // blur和change事件触发检验
    trigger: ['blur', 'change']
  }],
   code: [{
    required: true,
    message: '请输入验证码',
    // blur和change事件触发检验
    trigger: ['blur', 'change']
  }]
})

// 验证码开关
const captchaEnabled = ref(true)
// 验证码图片
const codeImgUrl:any = ref('')
const checked = ref(false)


const onSubmit = async () =>  {
  // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
  formRef.value.validate().then(response => {
      uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
        success:(event) => {
          const {code} = event
          getUserToken(code).then(res=>{
            userStore.updateToken(res.data)
            userStore.login(loginForm.value).then(() => {
          
              userStore.getInfo(true)
              setTimeout(() => {
                uni.switchTab({
                  url:'/pages/stage/index'
                })
              }, 300);
            }).catch(err=>{
               console.log('errerr')
                getCode()
            })
          })

        },
        fail:(err) => {
            
          }
      })
  }).catch(errors => {
    getCode()
  })
}



// 获取验证码
const getCode = () => {
  getCodeImg().then((res: any) => {
    console.log('getCodeImg',res)
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeImgUrl.value =`data:image/gif;base64,${res.img}`.replace(/[\r\n]/g, "")
      
      loginForm.value.uuid = res.uuid
    }
  })
}



onMounted(() => {
  getCode()

})
</script>

<template>
  <div class="container">


    <img class="bgImg" src="../../../static/image/logo/bg.png" alt="">
    <div class="title">你好，<br>欢迎登录</div>
    <div class="form-container">
      <div class="logo-container">
        <img :src="logo" alt="" class="logo">
      </div>
      <div class="infoBox">

        <uv-form  ref="formRef" :model="loginForm" :rules="rules" labelPosition="top" labelWidth="120">
          <uv-form-item label="账号" prop="username">
            <uv-input v-model="loginForm.username" placeholder="请输入账号" border="bottom" >
				    </uv-input>
          </uv-form-item>
          <uv-form-item label="密码" prop="password">
            <uv-input v-model="loginForm.password"  placeholder="请输入密码" type="password" border="bottom">
				    </uv-input>
          </uv-form-item>

          <uv-form-item label="验证码" prop="code" v-if="captchaEnabled">
            <uv-input v-model="loginForm.code"  placeholder="请输入验证码" border="none">
				    </uv-input>
            
            <template v-slot:right>
              <div class="codeImg" v-if="captchaEnabled" @click="getCode">
                <image customStyle=" width: 200rpx;height: 64rpx;" class="code" :src="codeImgUrl" mode="widthFix"></image>
              </div>
            
            </template>
          </uv-form-item>
        </uv-form>

      </div>
			<uv-button type="primary" text="登 录" shape="circle" color="linear-gradient(to bottom, #4773FC, #6D9BFD)" customStyle="margin-top: 100rpx" @click="onSubmit"></uv-button>
      
      
    </div>
  </div>
</template>

<style lang="less" scoped>

.container {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  // min-height: 100vh;
  // background: url(@/static/image/logo/bg.png) center top / cover no-repeat;
  .bgImg{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 824rpx;
  }
  .title{
    margin: 40rpx 0 100rpx 52rpx;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 60rpx;
    color: rgba(255, 255, 255, 1);
  }
  .form-container {
    position: relative;
    flex: 1;
    border-radius: 60rpx;
    position: relative;
    padding: 106rpx 40rpx;
    background: #fff;
    .logo-container {
      position: absolute;
      top: -72rpx;
      left: 0;
      right: 0;
      margin: auto;
      width: 144rpx;
      height: 144rpx;
      border-radius: 60rpx;
      box-shadow: 0 2rpx 40rpx  rgba(64, 103, 251, 0.14);
      background: #fff;
      .logo{
        width: 144rpx;
        height: 144rpx;
        object-fit: cover;
      }
    }
    .infoBox{
      margin-top: 34rpx;
      width: 100%;
      .infoLi{
        margin-bottom: 40rpx;
        .titleBox{
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-weight: 500;
          line-height: 32rpx;
          letter-spacing: 1.6rpx;
          color: rgba(37, 37, 37, 1);
          .icon{
            font-size: 32rpx;
            color: #4773FC;
          }
        }
        .inputBox{
          margin-top: 20rpx;
          width: 100%;
          height: 80rpx;
          border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
          display: flex;
          align-items: center;
          input{
            flex: 1;
            height: 60rpx;
            border: none;
            outline: none;
            font-size: 24rpx;
            letter-spacing: 1.2rpx;
            line-height: 24rpx;
            color: rgba(37, 37, 37, 1);
          }
        }
      }
      .infoLi:last-child{
        margin-bottom: 0;
      }
    }
    .checkedBox{
      margin-top: 26rpx;
      font-size: 24rpx;
      color: rgba(37, 37, 37, .5);
      .checkbox{
        margin-right: 10rpx;
      }
      :deep(.van-badge__wrapper){
        border: 2rpx solid rgba(71, 115, 252, 1);
      }
      .user-agreement{
        color: rgba(71, 115, 252, 1);
      }
    }
    .button-submit {
      margin-top: 200rpx;
    }
  }
}

.titleBox{
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 32rpx;
  letter-spacing: 1.6rpx;
  color: rgba(37, 37, 37, 1);
  .icon{
    margin-right: 12rpx;
    font-size: 32rpx;
    color: #4773FC;
  }
}

// :deep(input) {
//   &::placeholder{
//     color: #999;
//   }
// }
.codeImg {
  width: 200rpx;
  height: 64rpx;
  position: relative;
  .code {
    position: absolute;
    left: 0;
    left: 0;
    width: 200rpx;
    height: 64rpx;
    z-index: 999;
  }
}

</style>
