<route lang="yaml">
  meta:
    title: 登录
    constant: true
    layout: false
  </route>
<script lang="ts" setup name="login">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { autoSalt } from '@/utils/common'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const logo = new URL('../assets/images/login-logo.png', import.meta.url).href
const banner = new URL('../assets/images/login-left.png', import.meta.url).href
// 表单类型，login 登录，reset 重置密码
const formType = ref('login')
const loading = ref(false)
const redirectPath = route.query.redirect?.toString() ?? '/'
const redirect = ref(redirectPath.indexOf('edit/password') > -1 ? '/' : redirectPath)
// 登录
const loginFormRef = ref<FormInstance>()
const loginForm: any = ref({
  logonUser: localStorage.login_account || '',
  pwd: '',
  userType: 2,
  platformGuid: '6646dcad76c411eea911fa163e419da9'
  // remember: !!localStorage.login_account,
})
const loginRules = ref<FormRules>({
  logonUser: [
    { required: true, trigger: 'blur', message: '请输入账号' },
  ],
  pwd: [
    { required: true, trigger: 'blur', message: '请输入密码' },
    // { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
  ],
  userType: [
    { required: true, trigger: 'change', message: '请选择用户类型' },
  ]
})
function handleLogin() {
  loginFormRef.value && loginFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      let params = { ...loginForm.value }
      params.pwd = autoSalt(params.pwd)
      userStore.login(params).then(() => {
        loading.value = false
        if (loginForm.value.remember) {
          localStorage.setItem('login_account', loginForm.value.logonUser)
        }
        else {
          localStorage.removeItem('login_account')
        }
        // 有菜单才跳转，没有菜单不跳转登录页面。
        if (userStore.userInfoData?.length > 0) {
          router.push('/data-asset/register-guide')
        }
        // router.push(redirect.value)
      }).catch(() => {
        loading.value = false
      })
    }
  })
}
// 注册
const registerFormRef = ref<FormInstance>()
const registerForm = ref({
  logonUser: '',
  captcha: '',
  pwd: '',
  userType: 2,
  checkPassword: '',
})
const registerRules = ref<FormRules>({
  logonUser: [
    { required: true, trigger: 'blur', message: '请输入账号' },
  ],
  captcha: [
    { required: true, trigger: 'blur', message: '请输入验证码' },
  ],
  pwd: [
    { required: true, trigger: 'blur', message: '请输入密码' },
    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
  ],
  checkPassword: [
    { required: true, trigger: 'blur', message: '请再次输入密码' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.value.pwd) {
          callback(new Error('两次输入的密码不一致'))
        }
        else {
          callback()
        }
      },
    },
  ],
})
function handleRegister() {
  ElMessage({
    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
    type: 'warning',
  })
  registerFormRef.value && registerFormRef.value.validate((valid) => {
    if (valid) {
      // 这里编写业务代码
    }
  })
}
// 重置密码
const resetFormRef = ref<FormInstance>()
const resetForm = ref({
  logonUser: localStorage.login_account || '',
  captcha: '',
  newPassword: '',
})
const resetRules = ref<FormRules>({
  logonUser: [
    { required: true, trigger: 'blur', message: '请输入用户名' },
  ],
  captcha: [
    { required: true, trigger: 'blur', message: '请输入验证码' },
  ],
  newPassword: [
    { required: true, trigger: 'blur', message: '请输入新密码' },
    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
  ],
})
function handleReset() {
  ElMessage({
    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
    type: 'warning',
  })
  resetFormRef.value && resetFormRef.value.validate((valid) => {
    if (valid) {
      // 这里编写业务代码
    }
  })
}
function testAccount(logonUser: string) {
  loginForm.value.logonUser = logonUser
  loginForm.value.pwd = '123456'
  handleLogin()
}
</script>
<template>
  <div>
    <div class="bg-banner" />
    <div id="login-box">
      <div class="login-banner">
        <div>
          <img :src="banner" class="banner">
          <div class="banner_desc">
            <h4>数据资产管理系统</h4>
            <span>激活数据流通体系，释放数据要素新质生产力</span>
          </div>
        </div>
      </div>
      <div class="login_form_panel">
        <div class="login_form">
          <el-form v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
            class="login-form" autocomplete="on">
            <div class="title-container">
              <img :src="logo" class="title_img">
            </div>
            <div class="form-content">
              <el-form-item prop="logonUser">
                <el-input v-model.trim="loginForm.logonUser" placeholder="输入账号" text tabindex="1" autocomplete="on">
                  <!-- <template #prefix>
                      <el-icon>
                        <svg-icon name="ep:user" />
                      </el-icon>
                    </template> -->
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input v-model.trim="loginForm.pwd" type="password" placeholder="输入密码" tabindex="2" autocomplete="on"
                  show-password @keyup.enter="handleLogin">
                  <!-- <template #prefix>
                      <el-icon>
                        <svg-icon name="ep:lock" />
                      </el-icon>
                    </template> -->
                </el-input>
              </el-form-item>
              <!-- <el-form-item prop="userType" label="用户类型">
              <el-select v-model="loginForm.userType" class="m-2" placeholder="请选择">
                <el-option label="用户" :value="2" />
                <el-option label="管理员" :value="1" />
              </el-select>
            </el-form-item> -->
            </div>
            <!-- <div class="flex-bar">
            <el-checkbox v-model="loginForm.remember">
              记住我
            </el-checkbox>
            <el-link type="primary" :underline="false" @click="formType = 'reset'">
              忘记密码了?
            </el-link>
          </div> -->
            <el-button class="login-btn" :loading="loading" type="primary" size="large" @click.prevent="handleLogin">
              登录
            </el-button>
            <!-- <div class="sub-link">
            <span class="text">还没有帐号?</span>
            <el-link type="primary" :underline="false" @click="formType = 'register'">
              创建新帐号
            </el-link>
          </div>
          <div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
            <el-divider>演示账号一键登录</el-divider>
            <el-button type="primary" size="small" plain @click="testAccount('admin')">
              admin
            </el-button>
            <el-button size="small" plain @click="testAccount('test')">
              test
            </el-button>
          </div> -->
          </el-form>
          <el-form v-show="formType === 'register'" ref="registerFormRef" :model="registerForm" :rules="registerRules"
            class="login-form" auto-complete="on">
            <div class="title-container">
              <h3 class="title">
                探索从这里开始! 🚀
              </h3>
            </div>
            <div>
              <el-form-item prop="logonUser">
                <el-input v-model.trim="registerForm.logonUser" placeholder="账号" tabindex="1" autocomplete="on">
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:user" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-input v-model.trim="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:key" />
                    </el-icon>
                  </template>
                  <template #append>
                    <el-button>发送验证码</el-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input v-model.trim="registerForm.pwd" type="password" placeholder="密码" tabindex="3" autocomplete="on"
                  show-password>
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:lock" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="checkPassword">
                <el-input v-model.trim="registerForm.checkPassword" type="password" placeholder="确认密码" tabindex="4"
                  autocomplete="on" show-password>
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:lock" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;"
              @click.prevent="handleRegister">
              注册
            </el-button>
            <div class="sub-link">
              <span class="text">已经有帐号?</span>
              <el-link type="primary" :underline="false" @click="formType = 'login'">
                去登录
              </el-link>
            </div>
          </el-form>
          <el-form v-show="formType === 'reset'" ref="resetFormRef" :model="resetForm" :rules="resetRules"
            class="login-form" auto-complete="on">
            <div class="title-container">
              <h3 class="title">
                忘记密码了? 🔒
              </h3>
            </div>
            <div>
              <el-form-item prop="logonUser">
                <el-input v-model.trim="resetForm.logonUser" placeholder="账号" tabindex="1" autocomplete="on">
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:user" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-input v-model.trim="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:key" />
                    </el-icon>
                  </template>
                  <template #append>
                    <el-button>发送验证码</el-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="newPassword">
                <el-input v-model.trim="resetForm.newPassword" type="password" placeholder="新密码" tabindex="3" autocomplete="on"
                  show-password>
                  <template #prefix>
                    <el-icon>
                      <svg-icon name="ep:lock" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;"
              @click.prevent="handleReset">
              确认
            </el-button>
            <div class="sub-link">
              <el-link type="primary" :underline="false" @click="formType = 'login'">
                返回登录
              </el-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">
      北京传世博润科技有限公司 Copyright @ 2023-2024 <a href="https://beian.miit.gov.cn" target="_blank">京ICP备2024044205号</a>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.footer {
  position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
color: #606060;
font-weight: 200;
}
[data-mode="mobile"] {
  #login-box {
    position: relative;
    width: 100%;
    height: 100%;
    top: inherit;
    left: inherit;
    transform: translateX(0) translateY(0);
    flex-direction: column;
    justify-content: start;
    border-radius: 0;
    box-shadow: none;
    .login-banner {
      width: 100%;
      padding: 20px 0;
      .banner {
        position: relative;
        right: inherit;
        width: 100%;
        max-width: 375px;
        margin: 0 auto;
        display: inherit;
        top: inherit;
        transform: translateY(0);
      }
    }
    .login-form {
      width: 100%;
      min-height: auto;
      padding: 30px;
    }
  }
  .copyright {
    position: relative;
    bottom: 0;
    padding-bottom: 10px;
  }
}
:deep(input[type="password"]::-ms-reveal) {
  display: none;
}
:deep(.el-form) {
  .el-form-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .el-form-item__content {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
  }
}
.bg-banner {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login-bg.png') center/100% 100% no-repeat;
}
#login-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  max-width: 1280px;
  min-width: 900px;
  padding-bottom: 20px;
  .login-banner {
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    >div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .banner {
      width: 495px;
    }
    .banner_desc {
      width: 496px;
      text-align: justify;
      font-size: 24px;
      color: #414141;
      font-weight: 200;
      margin-top: -32px;
      h4 {
        text-align: center;
        margin: 0 0 8px;
        font-size: 28px;
        color: #414141;
        font-weight: 600;
      }
    }
  }
  .login_form_panel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .login_form {
      width: 500px;
      height: 450px;
      margin-top: 45px;
      background: #FFFFFF;
      box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);
      .title_img {
        margin-top: 54px;
        margin-bottom: 47px;
      }
      .form-content {
        margin: 0px 30px;
      }
    }
    .title-container {
      text-align: center;
      >img {
        width: 263px;
      }
      .form_title {
        height: 42px;
        font-size: 28px;
        color: #8D8D8E;
        letter-spacing: 0;
        text-align: center;
        line-height: 42px;
        font-weight: 400;
        margin: 32px 0;
      }
    }
  }
  .login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    .title-container {
      position: relative;
      .title {
        font-size: 1.3em;
        color: var(--el-text-color-primary);
        margin: 0 auto 30px;
        font-weight: bold;
      }
    }
  }
  .el-form-item {
    margin-bottom: 24px;
    :deep(.el-input) {
      height: 44px;
      line-height: inherit;
      width: 100%;
      input {
        height: 44px;
        font-size: 14px;
        &:-webkit-autofill::first-line {
          font-size: 14px;
        }
      }
      .el-input__icon {
        width: 20px;
        height: 15px;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      .el-input__prefix,
      .el-input__suffix {
        display: flex;
        align-items: center;
      }
      .el-input__prefix {
        left: 10px;
      }
      .el-input__suffix {
        right: 10px;
      }
      .el-input__wrapper {
        // border-radius: 0;
        // box-shadow: none;
        // border-bottom: 1px solid #e5e5e5;
        &:hover {
          // box-shadow: none;
        }
      }
    }
  }
  .flex-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .sub-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
    .text {
      margin-right: 10px;
    }
  }
}
.login-btn {
  margin: 24px 30px 0 30px;
  height: 44px;
  width: auto;
  font-size: 20px;
}
</style>