<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: '请填写用户名' }]"
        />
        <van-field
          v-model="allData.password"
          left-icon="lock"
          type="password"
          label=""
          placeholder="8-20位大小写英文字母+数字+特殊符号"
          :rules="[{ pattern, required: true, message: '8-20位大小写英文字母+数字+特殊符号' }]"
        />
        <van-field
          v-model="allData.code"
          label=""
          left-icon="bag"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
          class="specialField"
        >
          <template #button>
            <van-image width="100" height="42" style="display: block" :src="codeUrl" @click="getCode" />
          </template>
        </van-field>
        <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"
          :loading="allData.loginLoading"
          loading-text="登录中..."
        >
          登 录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

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

const pinias = useStore();
const router = useRouter();
const pattern = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/; //大小写带特殊字符最少8位

const codeUrl = ref('');
const allData = reactive({
  userName: '',
  password: '',
  code: '',
  remberPass: true,
  uuid: '',
  loginLoading: false,
});
// 登录提交
const submitData = async () => {
  allData.loginLoading = true;
  // 默认存储密码
  if (allData.remberPass) {
    localStorage.setItem('usernameNFApp', allData.userName);
    localStorage.setItem('passwordNFApp', EncryptAES(allData.password));
  } else {
    localStorage.removeItem('usernameNFApp');
    localStorage.removeItem('passwordNFApp');
  }
  let params = {
    username: allData.userName,
    password: EncryptAES(allData.password),
    uuid: allData.uuid,
    code: allData.code,
  };
  let res = await appLogin(params);

  if (res && res.code == 200) {
    allData.loginLoading = false;
    const { access_token } = res;
    pinias.$patch((state) => {
      state.token = access_token;
    });
    localStorage.setItem('NFAppToken', access_token); //存储token
    router.push('/home_homePage');
    // 获取用户个人详细信息
    // getInfo().then((res2) => {
    //   let datas = res2.data.user;
    //   pinias.$patch((state) => {
    //     state.userNo = datas.userId;
    //     state.phonenumber = datas.phonenumber;
    //     state.imageUrl = datas.avatar || userImages;
    //     state.userName = datas.nickName || '管理员';
    //     state.userDeptName = datas.dept.deptName;
    //   });
    // });
  } else {
    getCode();
    allData.loginLoading = false;
  }
};
// 获取验证码
const getCode = async () => {
  let res = await getCodeImg();
  if (res?.code === 200) {
    codeUrl.value = 'data:image/gif;base64,' + res.img;
    allData.uuid = res.uuid;
  }
};

onMounted(() => {
  getCode();
  if (allData.remberPass) {
    const usernameNFApp = localStorage.getItem('usernameNFApp');
    const passwordNFApp = localStorage.getItem('passwordNFApp');
    allData.userName = usernameNFApp ? usernameNFApp : '';
    allData.password = passwordNFApp ? DecryptAES(passwordNFApp) : '';
  }
});
</script>
<style lang="less">
.loginPage {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login/loginBg.png') no-repeat 100% 100%;
  background-size: 100% 100%;
  .loginHead {
    width: 100%;
    text-align: center;
    .image {
      width: 60px;
      height: 60px;
      margin-top: 25%;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
    }
    .title {
      font-weight: 900;
      font-size: 36px;
      width: 100%;
      text-align: center;
      color: white;
      letter-spacing: 6px;
      margin-top: 30px;
    }
  }
  .van-form {
    margin-top: 20%;
    margin-left: 5%;
    width: 90%;
    .van-cell-group {
      background: transparent;
    }
    .van-cell {
      margin: 30px auto;
      border-radius: 40px;
      background: transparent;

      .van-field__control {
        padding-left: 20px;
        color: #fff;
      }
      input:-internal-autofill-selected {
        background: transparent !important;
      }
      // 修改input背景色
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-transition-delay: 111111s;
        -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
      }
      .van-icon:before {
        color: #fff;
      }
    }
    .van-checkbox {
      margin: 20px 30px;
      font-size: 24px;
      .van-checkbox__label {
        color: #fff;
      }
    }
    .van-checkbox__icon--checked .van-icon {
      background: #fff !important;
      &::before {
        color: #145bf7 !important;
      }
    }

    .specialField {
      padding: 0px var(--van-cell-horizontal-padding);
      .van-field__left-icon {
        margin-top: 14px;
      }
    }
    .van-button--primary {
      background: #fff;
      border-color: #fff;
      color: #145bf7;
      font-family: PingFang SC;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
    }
  }
}
</style>