<template>
  <div class="login_page" >
    <div class="login_header">
      <div class="header_left">
        <img src="../../assets/login/login_logo.webp" alt="">
        <span style="margin-left: 10px;">    大数据精准教学诊断平台</span>
      </div>
      <div class="header_right">
        <div class="right_button" @click="GoWebsite"> 官方网站 </div>
      </div>
    </div>
    <div class="login_content" id="particles">
      <div class="login_info">
        <div class="login_info_title">
          <p>HI～欢迎使用</p>
          <p>大数据精准教学诊断平台</p>
        </div>
        <div class="login_info_message">后台管理系统登录</div>
        <div class="login_info_input">
          <el-form ref="userInfoForm" @submit.prevent="SubmitLogin">
            <el-form-item prop="userName">
              <el-input v-model="userName" placeholder="请输入账号" clearable @keyup.enter="SubmitLogin">
                <template #prefix>
                  <i class="iconfont icon_zhanghao" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input v-model="passWord" type="password" show-password placeholder="请输入密码" @keyup.enter="SubmitLogin">
                <template #prefix>
                  <i class="iconfont icon_mima" />
                </template>
              </el-input>
              <!-- <el-input v-model="passWord" placeholder="请输入密码" :type="!showPass ? 'password' : 'text'">
                <template #prefix>
                  <i class="iconfont icon_mima" />
                </template>
                <template #suffix>
                  <span @click.stop="showPass = !showPass">
                    <i v-if="showPass" class="iconfont icon_xianshimima"></i>
                    <i v-else class="iconfont icon_buxianshimima"></i>
                  </span>
                </template>
              </el-input> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="login_info_item">
          <div class="item_left">
            <el-checkbox v-model="remeberPassWord">记住密码</el-checkbox>
          </div>
          <div class="item_right">忘记密码</div>
        </div>
        <div class="login_info_button">
          <el-button  style="width:100%;" @click="SubmitLogin()" :loading="loadingLogin">登 录</el-button>
        </div>
        <div class="login_other_type">
          <div class="other_login_line">
            <span class="line"></span>
            <span class="text">其他登录方式</span>
            <span class="line"></span>
          </div>
          <div class="other_login_icon">
            <div class="icon_item">
              <img src="../../assets/login/login_wechat.webp" alt=""></img>
              <p>微信</p>
            </div>
            <div class="icon_item">
              <img src="../../assets/login/login_feishu.webp" alt=""></img>
              <p>钉钉</p>
            </div>
            <div class="icon_item">
              <img src="../../assets/login/login_email.webp" alt=""></img>
              <p>邮箱</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'

import { login, getUserInfo } from '@/api/login'
import { ElMessage } from 'element-plus' // 
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
// 1. 引入封装好的加密方法
import { encryptPassword } from '@/utils/jsencrypt'

const userStore = useUserStore()
const router = useRouter() // 获取路由实例
// 响应式数据
const userName = ref('huijiaoyan')
const passWord = ref('123456')
const remeberPassWord = ref(false)
const loadingLogin = ref(false)
const showPass = ref(false)


onMounted(() => {

  const storedUsername = localStorage.getItem('userName')
  const storedPassword = localStorage.getItem('passWord')
  const storedRememberMe = localStorage.getItem('rememberMe')

  if (storedRememberMe === 'true') {
    // 使用 ?? 运算符，如果获取值为 null 则默认为空字符串，解决类型冲突
    userName.value = storedUsername ?? ''
    passWord.value = storedPassword ?? ''
    remeberPassWord.value = true
  }
})

// 清空输入框
const ClearInput = () => {
  userName.value = ''
}
 const menuList = ref([])
// 登录提交
const SubmitLogin = () => {
  if(!userName.value || !passWord.value) {
    ElMessage.error('请输入账号和密码');
    return
  }

  const params = {
    username: userName.value.trim(),
    password: encryptPassword(passWord.value.trim()),
    deviceType:'PC'
  }
  loadingLogin.value = true
  login(params).then((res) => {
    console.log("打印登录接口返回res",res)
       loadingLogin.value = false
      if (res.code === 200) {
        console.log("登录成功返回",res)
        localStorage.setItem('token', res.data.tokenValue)
        menuList.value = res.data.pcMenuVOS
        localStorage.setItem('menuList', JSON.stringify(res.data.pcMenuVOS))
        localStorage.setItem('permissions', JSON.stringify(res.data.permissions))
        // 登录成功后调用获取用户信息接口
        return getUserInfo()
      }
  }).then((userInfoRes)=>{
    console.log("获取用户信息返回",userInfoRes)
    if (userInfoRes && userInfoRes.code === 200) {
      // 存储用户信息到 localStorage 或 Pinia
      // localStorage.setItem('userInfo', JSON.stringify(userInfoRes.data))
      userStore.setUserInfo({
        userId: userInfoRes.data.id,
        userName: userInfoRes.data.userName,
        schoolId: userInfoRes.data.schoolId,
        schoolName: userInfoRes.data.schoolName,
        accountName: userInfoRes.data.loginName,
        phone: userInfoRes.data.phone,
        identify: userInfoRes.data.identify,
        roleNames: userInfoRes.data.roleNames,
        roleCodes: userInfoRes.data.roleCodes,
      })
      ElMessage.success('登录成功');
      // 跳转到主页
      router.push('/main/choice')
    }
  }).catch((err) => {
      loadingLogin.value = false

      console.error(err)
  })
}

// 去往官网
const GoWebsite = () => {
  window.open('https://www.k12100.com/website')
}
</script>
<style lang="scss">
@use "../../styles/login.scss" as *;
</style>
