<template>
  <view class="login-wrapper bgF">
    <view class="login-header-img">
      <image src="/static/loginImg/login-Img.svg" mode="scaleToFill" />
      <view class="logo-wrapper"> <image :src="logoImg" mode="scaleToFill" @tap="env.tapFunc()" /> </view>
    </view>
    <view class="login-main">
      <JLogin v-if="loginType" @successLogin="loginFinishCallback"></JLogin>
      <JSmsLogin v-if="!loginType" @successLogin="loginFinishCallback"></JSmsLogin>
      <view class="switch-login" @tap="switchLoginType"
        >{{ loginTips }} <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill"
      /></view>
      <view style="height: 242rpx"></view>
    </view>
  </view>
  <JAgree/>
  <EnvChangeTips ref="env" />
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import JLogin from "./components/JLogin.vue"
import JSmsLogin from "./components/JSmsLogin.vue"
import EnvChangeTips from "./components/EnvChangeTips.vue"
import { $userInfo, $getCompanyInfo,$getUploadImgSize } from "@/http/apiManager.js"
import storageManage from "@/util/storageManage.js"
import { clearRulesArray } from "@/hooks/rules"
onLoad(() => {
  $getCompanyInfo().then(({ bizData }) => {
    logoImg.value = bizData.agentAppTopImgUrl
  })
})
const env = ref(null)
const logoImg = ref("")
const loginTips = ref("短信验证码登录")
const loginType = ref(true)
const switchLoginType = () => {
  loginType.value = !loginType.value
  loginType.value ? (loginTips.value = "短信验证码登录") : (loginTips.value = "账号密码登录")
}

// 成功登录后的操作
function loginFinishCallback(iToken) {
  // 保存token
  storageManage.token(iToken)
  // 保存当前登录过的用户
  // storageManage.loggedInUser(loginInfo.userName)
  // 请求用户信息
  $userInfo().then(({ bizData }) => {
    // 保存用户数据
    storageManage.userInfo(bizData)
       // 存储上传 图片大小限制
       $getUploadImgSize().then(({bizData})=>{
      storageManage.uploadImgSize(bizData.applymentImgUploadSize)
    })
    clearRulesArray()
    uni.reLaunch({ url: bizData.userType === 3 ? "../devWorkbench/devWorkbench" : "../workbench/workbench" })
  })
}
</script>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;

  .login-header-img {
    position: relative;
    height: 500rpx;
    image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .logo-wrapper {
      position: absolute;
      left: 0;
      bottom: 32rpx;
      z-index: 10;
      width: 100%;
      height: 248rpx;
      // background-color: red;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
      height: 32rpx;
      background-color: #fff;
      border-radius: 32rpx 32rpx 0 0;
    }
  }
  .login-main {
    .switch-login {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 150rpx;
      color: #838383;
      font-size: 30rpx;
      letter-spacing: 0.02em;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
