<script setup>
import { apiSystemCommon, apiSystemRole } from '@/api/system'
import md5 from 'js-md5'
import { Base64 } from 'js-base64'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const ruleFormRef = ref(null)
const formRules = {
  account: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
  pwd: [{ required: true, message: '请输入密码', trigger: 'blur' },]
}
const formState = reactive({
  account: '',
  pwd: '',
  checked: false
})
async function submitForm(formEl) {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      const t = new Date().getTime()
      const md5key = 'MiQM9YUdf89T2uIH'
      apiSystemCommon.login({
        Username: formState.account,
        password: md5(md5(formState.pwd) + md5key + `${t}`),
        ReqTime: `${t}`,
        LoginType:"password",
      }).then(res => {
        if (res.Ret === 200) {
          if (formState.checked) {
            localStorage.setItem('account', Base64.encode(formState.account))
            localStorage.setItem('pwd', Base64.encode(formState.pwd))
          } else {
            localStorage.removeItem('account')
            localStorage.removeItem('pwd')
          }
          localStorage.setItem('token', res.Data.Authorization)
          localStorage.setItem('userName', res.Data.SysRealName)
          getMenuList()
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 获取菜单跳转到第一个菜单
function getMenuList() {
  apiSystemRole.menuData().then(res => {
    /* router.replace('/customer/tempUserList')
    return  */
    if (res.Ret === 200) {
      const arr = res.Data || []
      if (arr.length === 0) {
        ElMessage.warning('您暂无任何菜单权限请联系管理员')
        return
      }
      let path = ''
      if (arr[0]?.Children[0]) {
        path = arr[0].Children[0].Path
      } else {
        path = arr[0].Path
      }
      router.replace(path)
    }
  })
}

//获取用户记住的账号密码 如果有
function getRememberedInfo() {
  const account = localStorage.getItem('account') || null
  const pwd = localStorage.getItem('pwd') || null
  if (account) {
    formState.account = Base64.decode(account)
    formState.pwd = Base64.decode(pwd)
    formState.checked = true
  }
}
getRememberedInfo()

onMounted(() => {
  document.onkeydown = (e) => {
    let keyval = window.event.keyCode;
    if (keyval === 13) {
      submitForm(ruleFormRef.value)
    }
  };
})


</script>

<template>
  <div class="flex bg-white login-page">
    <div class="form-wrap">
      <div class="form-content">
        <img class="logo-icon" src="@/assets/imgs/logo_icon.png">
        <h1 class="login-title">Login</h1>
        <h3 class="title">运营管理系统</h3>
        <el-form
          ref="ruleFormRef"
          :model="formState"
          :rules="formRules"
          class="form-box"
          label-position="top"
          hide-required-asterisk
        >
          <el-form-item prop="account" label="工号">
            <el-input v-model="formState.account" placeholder="请输入工号" />
          </el-form-item>
          <el-form-item prop="pwd" label="密码">
            <el-input
              v-model="formState.pwd"
              placeholder="请输入密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item class="remember-cont" prop="checked">
            <el-checkbox v-model="formState.checked" class="remember">
              记住密码
              <el-tooltip effect="dark" content="有效期60天" placement="top">
                <el-icon color="#333"><i-ep-QuestionFilled /></el-icon>
              </el-tooltip>
            </el-checkbox>
          </el-form-item>
          <el-form-item class="btn-wrap">
            <el-button
              style="width: 100%;"
              type="primary"
              color="#086CE0"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <p class="bot-tips">投资咨询部投资咨询业务资格:证监许可【2011】1294号</p>
    </div>
    <div class="right-img-wrap">
      <img src="@/assets/imgs/login_bg.png" alt="">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  height: 100%;
  min-height: 720px;
  align-items: center;
  .form-wrap {
    flex: 1;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 90px;
    height: 100%;
    position: relative;
    .bot-tips{
      color: #C0C4CC;
      font-size: 15px;
      text-align: center;
      margin-top: 90px;
    }
    .form-content{
      width: 440px;
      margin: 0 auto;
      --el-component-size: 60px;
      --el-color-primary:#086CE0 !important;
      :deep(.el-form-item__label){
        font-weight: bold;
        color: #000;
      }
      .el-input{
        --el-input-bg-color:#F3F4F6 !important;
        :deep(.el-input__wrapper){ 
            padding:1px 40px;
        }
      }
      .el-checkbox{
        --el-font-weight-primary:bold !important;
        --el-text-color-regular:#000;
        --el-checkbox-input-width:25px;
        --el-checkbox-input-height:25px;
        --el-checkbox-bg-color:#F3F4F6;
        :deep(.el-checkbox__inner::after){
            height: 14px;
            left:8px;
            width:6px;
        }
        :deep(.el-checkbox__label){
            display: flex;
            align-items: center;
            gap: 5px;
        }
      }
    }
    .logo-icon{
        width: 60px;
        height: 60px;
    }
    .login-title{
      font-size: 32px;
    }
    .title {
      margin-top: 10px;
      font-size: 24px;
    }
    .form-box {
      margin-top: 45px;
      width: 100%;
      .btn-wrap{
        padding:3px;
        position: relative;
        &::after {
            position: absolute;
            content: '';
            z-index: 1;
            height: 100%;
            width: 100%;
            margin: 0 auto;
            filter: blur(30px);
            background-image: linear-gradient(#E0E6F6, #F6F9FF);
        }
      }
      :deep(.el-button){
        font-size: 18px;
        height: 60px;
        z-index: 2;
      }
    }
  }
  .right-img-wrap {
    width: 720px;
    height: 100%;
    position: relative;
    background-color: #086CE0;
    img{
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>