<template>
  <!-- 登录 -->
  <div class="loginPage">
    <div class="loginHead">
      <img :src="LogoImg" class="image" />
      <p class="title">开封海绵中心工程运维</p>
    </div>
    <van-form @submit="submitData">
      <van-cell-group inset>
        <van-field
          v-model="allData.userName"
          label=""
          left-icon="manager"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- :rules="[{ pattern, required: true, message: '请输入由字母+数字组成的6-16位密码' }]" -->
        <van-field
          v-model="allData.password"
          :rules="[{ required: true, message: '请输入密码' }]"
          left-icon="lock"
          type="password"
          label=""
          placeholder="请输入密码"
        />
        <van-checkbox v-model="allData.remberPass" icon-size="20px">记住密码</van-checkbox>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
    <van-overlay :show="allData.show">
      <div class="wrapper">
        <van-loading type="spinner" />
        <p>登录中</p>
      </div>
    </van-overlay>
  </div>
</template>

<script setup name="loginPage">
import { useStore } from '@/pinia/store.js';
import { useRouter } from 'vue-router';
import { sysLogin } from '@/api/publicApi.js';
import LogoImg from '@/assets/images/logo.png';
import { EncryptAES, DecryptAES } from '@/utils/AES.js';

const pinias = useStore();
const router = useRouter();
// const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //字母+数字组成的6-16位密码

const allData = reactive({
  userName: '',
  password: '',
  code: '',
  remberPass: true,
  uuid: '',
  show: false,
});
// 登录提交
const submitData = async () => {
  allData.show = true;
  // 默认存储密码
  if (allData.remberPass) {
    localStorage.setItem('usernameGCApp', allData.userName);
    // localStorage.setItem("passwordGCApp", EncryptAES(allData.password));
    localStorage.setItem('passwordGCApp', allData.password);
  } else {
    localStorage.removeItem('usernameGCApp');
    localStorage.removeItem('passwordGCApp');
  }
  let params = {
    login: allData.userName,
    // pwd: EncryptAES(allData.password),
    pwd: allData.password,
  };
  let res = await sysLogin(params);

  allData.show = false;
  if (res && res.data.code == 1) {
    const access_token = res.data.data.token;
    pinias.$patch((state) => {
      state.token = access_token;
    });
    localStorage.setItem('GCAppToken', access_token); //存储token
    localStorage.setItem('userNo', res.data.data.login); //存储userNo
    localStorage.setItem('roleId', res.data.data.roleId);
    localStorage.setItem('roleName', res.data.data.roleName);
    localStorage.setItem('realName', res.data.data.realName);
    localStorage.setItem('mobile', res.data.data.mobile);
    localStorage.setItem('LoginUserID', res.data.data.id);
    localStorage.setItem('appRoleCategory', res.data.data.appRoleCategory);
    router.push('/home_homePage');
  } else {
  }
};

onMounted(() => {
  pinias.hideLoading();
  if (allData.remberPass) {
    const usernameGCApp = localStorage.getItem('usernameGCApp');
    const passwordGCApp = localStorage.getItem('passwordGCApp');
    allData.userName = usernameGCApp ? usernameGCApp : '';
    // allData.password = passwordGCApp ? DecryptAES(passwordGCApp) : "";
    allData.password = passwordGCApp ? passwordGCApp : '';
  }
});
</script>
<style lang="less">
.loginPage {
  .loginHead {
    width: 100%;
    height: 500px;
    background: url('@/assets/images/loginBg.png') no-repeat 100% 100%;
    background-size: cover;
    text-align: center;
    .image {
      width: 161px;
      height: 52px;
      margin-top: 25%;
    }
    .title {
      font-weight: 900;
      font-size: 32px;
      width: 100%;
      text-align: center;
      color: white;
      letter-spacing: 6px;
      margin-top: 30px;
    }
  }

  .van-form {
    margin-top: 60px;
    margin-left: 5%;
    width: 90%;
    .van-cell {
      margin: 30px auto;
      background-color: #f5f6f7;
      border-radius: 40px;
      .van-field__control {
        padding-left: 20px;
      }
      .van-checkbox {
        margin: 20px 30px;
        font-size: 24px;
      }
    }
    .specialField {
      padding: 0px var(--van-cell-horizontal-padding);

      .van-field__left-icon {
        margin-top: 14px;
      }
    }
  }

  .wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
}
</style>