<template>
  <view class="login-wrapper">
    <LoginInput pd="0 50rpx" v-model:value="loginInfo.userName"></LoginInput>
    <LoginInput title="密码" place="请输入账号密码" :password="!isOpenEyes" v-model:value="loginInfo.passwordType">
      <view class="right-eyes" @tap="isOpenEyes = !isOpenEyes">
        <image :src="eyeImg[isOpenEyes ? 1 : 0]" mode="scaleToFill" />
      </view>
    </LoginInput>
    <LoginButton @login="login" :forgotPassword="true" :isRegister="true"></LoginButton>
  </view>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import LoginInput from "@/components/newComponents/LoginInput/LoginInput"
import LoginButton from "./LoginButton"
import { $login, $getPasswordRules } from "@/http/apiManager.js"
import reg from "@/hooks/validate"
import { Base64 } from "js-base64"
onMounted(() => {
  getRules()
})
const eyeImg = reactive(["/static/loginImg/login-eye-close.svg", "/static/loginImg/login-eye-open.svg"])
const emits = defineEmits(["successLogin"])
const selected = ref(false)
const isOpenEyes = ref(false)
const loginInfo = reactive({}) //密码信息
const rules = ref({})
const getRules = () => {
  $getPasswordRules().then((res) => {
    rules.value.rule = new RegExp(res.bizData.regexpRules)
    rules.value.ruleText = res.bizData.errTips
  })
}
const login = () => {
  if (!loginInfo.userName && !loginInfo.passwordType) {
    uni.showToast({
      title: "请输入账号和密码",
      icon: "none",
    })
  } else {
    $login({
      ia: Base64.encode(loginInfo.userName),
      ip: Base64.encode(loginInfo.passwordType),
      // #ifdef APP-PLUS
      lt: Base64.encode("APP"),
      // #endif
      // #ifdef H5 || MP-WEIXIN
      lt: Base64.encode("LITE"),
      // #endif
    }).then((res) => {
      const { bizData } = res
      emits("successLogin", bizData.iToken)
    })
  }
}
</script>

<style lang="scss" scoped>
image {
  display: block;
  width: 36rpx;
  height: 36rpx;
}
.right-eyes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110rpx;
  height: 110rpx;
  background-color: transparent;
}
</style>
