<script setup>
import Crypto from "../../utils/crypto";
import { user } from '~/store/index'
import { getAssetsImages } from "~/utils/getAssets"

const loginLoading = ref(false)
const router = useRouter()
const route = useRoute();
let zlb_token = route.query.zlb_token;
if (zlb_token) {
  request({
    url: '/openapi/oauth/zlb/checkticket.php',
    data: {
      zlb_token: zlb_token
    }
  }).then((res) => {
    if (res?.code === '1') {
      localStorage.setItem('fromZlb', 1)
      user.value = res.data
      router.replace('/main/course/qjkc')
    } else {
      loginLoading.value = false
    }
  }).catch(() => {
    loginLoading.value = false
  })
}
if (JSON.stringify(user.value) !== '{}') {
  router.replace('/main/course/qjkc')
}


let pswVisile = $ref(false)

let fromData = $ref({
  user_name: '',
  user_password: ''
})

let isRemember = $ref(false)
const lastForm = localStorage.getItem('login-form')
if (lastForm) {
  fromData = JSON.parse(lastForm)
  isRemember = true
}

let hintShow = $ref(false)
let hintText = $ref('')

let readedClause = $ref(true)


function handleLogin() {
  if (loginLoading.value) {
    return
  }
  if (!readedClause) {
    hintText = '请勾选阅读并同意协议'
    hintShow = true
    return
  } else if (!fromData.user_name || !fromData.user_password) {
    hintText = '请输入账号和密码'
    hintShow = true
    return
  } else {
    hintText = ''
    hintShow = false
  }


  if (isRemember) {
    localStorage.setItem('login-form', JSON.stringify(fromData))
  } else {
    localStorage.removeItem('login-form')
  }
  loginLoading.value = true
  request({
    url: '/user/main/login',
    data: {
      user_main: {
        user_name: fromData.user_name,
        user_password: Crypto.encrypt(fromData.user_password),
      },
    },
  }).then((res) => {
    if (res?.code === '1') {
      localStorage.setItem('fromZlb', 0)
      user.value = res.data
      router.replace('/main/course/qjkc')
    } else {
      loginLoading.value = false
    }
  }).catch(() => {
    loginLoading.value = false
  })

}

function forgetPsw() {
  router.push('/login/identityConfirm')
}
function goFeedBack() {
  router.push('/login/feedback')
}
</script>
<template>
  <div style="display: flex;justify-content: center;">
    <img :src="getAssetsImages('logo1.png')" class="logo" />
  </div>
  <div class="title">桐乡网校</div>
  <div class="inputDiv">
    <div class="inputHeight"><img :src="getAssetsImages('user.png')" class="inputIcon" /></div>
    <div class="inputHeight paddingLeft">
      <input v-model="fromData.user_name" placeholder="账号" />
    </div>
  </div>
  <div class="inputDiv paddingtop">
    <div class="inputHeight"><img :src="getAssetsImages('lock.png')" class="inputIcon" /></div>
    <div class="inputHeight paddingLeft">
      <input v-model="fromData.user_password" placeholder="密码"
        :style="pswVisile ? '' : '-webkit-text-security:disc;'" />
    </div>
    <div class="inputHeight paddingLefteye" @click="pswVisile = !pswVisile"><img
        :src="pswVisile ? getAssetsImages('eyeopen.png') : getAssetsImages('eyeclose.png')" class="eyeIcon" /></div>
  </div>
  <div class="inputDiv paddingtop" style="border-bottom: 0px;display: flex;justify-content: space-between;">
    <div>
      <van-checkbox v-model="isRemember" icon-size="18px" class="checkbox">记住密码</van-checkbox>
    </div>
    <div class="checkbox" style="width: 25%;color: #999999;" @click="forgetPsw()">
      忘记密码
    </div>
  </div>
  <div style="text-align: center;width: 100%;height: 10vw;">
    <span v-show="hintShow" class="hint">提示:{{ hintText }}</span>
  </div>
  <div class="loginButton" @click="handleLogin()" :style="readedClause ? '' : 'background-color: #b8b8b8;'">
    <div v-show="!loginLoading">登录</div>
    <van-loading v-show="loginLoading" />
  </div>

  <!-- <div style="margin-top: 5vh;"><van-checkbox v-model="readedClause" shape="square" class="checkbox clause"
      icon-size="15px" style="width: 80%;margin:auto;">我已阅读并同意<span style="color: #1a4e9c;">《用户服务协议》</span>和<span
        style="color: #1a4e9c;">《隐私政策》</span></van-checkbox>
  </div> -->
  <div style="margin-top:10vh;text-align: center;">
    <span class="clause" style="color: #154A9A;" @click="goFeedBack()">问题与反馈</span>
  </div>
</template>
<style lang="scss" scoped>
.hint {
  color: #E63333;
  font-size: 12px;
}

.clause {
  font-size: 12px !important;
}

.checkbox {
  width: 100px;
  height: 20px;
  font-size: 14px;

  :deep(.van-checkbox__label) {
    color: #999999;
  }
}

.paddingtop {
  padding-top: 20px !important;
}

.inputDiv {
  margin: auto;
  width: 264px;
  display: flex;
  padding-top: 100px;
  border-bottom: 1px solid #999999;

  .inputHeight {
    height: 30px;
    display: flex;
    align-items: center;
  }

  .paddingLeft {
    padding-left: 10px;
  }

  .inputIcon {
    width: 18.5px;
    height: 19.5px;
  }

  .eyeIcon {
    width: 18.5px;
  }

  .paddingLefteye {
    padding-left: 30px;
  }
}

.logo {
  margin-top: 20px;
  width: 101px;
  height: 101px;
}

.title {
  margin: auto;
  width: 90px;
  height: 30px;
  font-size: 22px;
  line-height: 30px;
}

.loginButton {
  margin: auto;
  margin-top: 50px;
  width: 290px;
  height: 46px;
  line-height: 46px;
  background-color: #154A9A;
  color: white;
  font-size: 18px;
  text-align: center;
  border-radius: 4px;
  display: flex;
  justify-content: center;
}
</style>
