<template>
  <!-- 登录 -->
  <div class="login">
    <s-header :name="sys ? sys.title : $t('public.sysName')" :noback="false" ></s-header>
    <div class="loginLogoBox">
      <van-image class="loginLogo" :src="sys ? sys.imgUrl : logiLogoImgUrl"/>
    </div>
    <div class="loginTitleBox">
      <span class="loginTitle">{{ $t('login.title') }}</span>
    </div>
    <div class="loginFormBox">
      <van-form @submit="onSubmit">
        <van-field
          v-model="userName"
          name="userName"
          label=""
          :placeholder="$t('login.userNameInput')"
          :rules="[{ required: true, message: $t('login.userNameInput') }]"
        />
        <van-field
          v-model="userPwd"
          type="password"
          name="userPwd"
          label=""
          :placeholder="$t('login.passWordInput')"
          :rules="[{ required: true, message: $t('login.passWordInput') }]"
        />
        <div class="checkedPasswordBox">
          <van-checkbox class="checkedPassWord" v-model="checked">{{$t('login.checkedPassWord')}}</van-checkbox>
          <span class="forgetPassWord" @click="forgetPassword">{{$t('login.forgetPassWord')}}</span>
        </div>
        <div class="buttonBox">
          <van-button round type="primary" class="register" @click="registerClick">{{$t('login.regusterButton')}}</van-button>
          <van-button round type="primary" native-type="submit">{{$t('login.loginButton')}}</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { onMounted, ref } from 'vue';
import { Toast } from 'vant';
import { login, getSys } from '@/service/login';
import { setLocal } from '@/common/js/utils';
import sHeader from '@/components/SimpleHeader';
import logiLogoImgUrl from "@/assets/login/logo.png";
import { useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const checked = ref(false); // 是否记住密码状态
    const userName = ref('');
    const userPwd = ref('');
    const router = useRouter();
    const route = useRoute();
    const sys = ref(null);
    // 页面初始化
    onMounted(() => {
      localStorage.clear();
      if (route.query.relation_admin_id) {
        getSysFun();
      }
    });
    const getSysFun = async () => {
      const { data } = await getSys({relationAdminId: route.query.relation_admin_id});
      if (data.code === '00000') {
        data.data.relationAdminId = route.query.relation_admin_id;
        localStorage.setItem('loginSys', JSON.stringify(data.data));
        sys.value = data.data;
      }
    }
    // 登录
    const onSubmit = async (values) => {
      console.log(values);
      const { data } = await login({
        "username": values.userName,
        "password": md5(values.userPwd)
      });
      if (data.code === '00000') {
        setLocal('loginUser', JSON.stringify(data.data));
        Toast.success('登陆成功');
        // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
        // window.location.href = '/';
        router.push("/home");
      } else  {
        Toast.fail(data.message);
      }
    }
    // 跳转注册页面
    const registerClick = async () => { router.push("/register"); };
    // 跳转忘记密码页面
    const forgetPassword = async () => { router.push("/forgetpassword"); };

    return {
      logiLogoImgUrl,
      checked,
      userName,
      userPwd,
      onSubmit,
      registerClick,
      forgetPassword,
      sys
    }
  },
  components: { sHeader }
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin';
.login {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  .loginLogoBox {
    width: 100%;
    text-align: center;
    .loginLogo { width: 216px; height: 87px; margin-top: 41px; }
  }
  .loginTitleBox {
    width: 100%;
    .loginTitle {
      width: 80px;
      height: 28px;
      overflow-wrap: break-word;
      color: rgba(64, 77, 116, 1);
      font-size: 20px;
      font-family: PingFangSC-Medium;
      text-align: center;
      white-space: nowrap;
      line-height: 28px;
      display: block;
      margin: 8px auto 0 auto;
    }
  }
  .loginFormBox {
    width: 100%;
    margin-top: 38px;
    .van-form .van-cell {
      width: 281px;
      height: 38px;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 2px;
      border: 0.5px solid rgba(185, 186, 208, 1);
      padding: 0;
      color: rgba(168, 168, 197, 1);
      font-size: 13px;
      margin: 0 auto;
      margin-top: 20px;
      overflow: visible;
      .van-field__control {
        height: 38px;
        line-height: 38px;
        padding: 6px;
        &:-internal-autofill-previewed,
        &:-internal-autofill-selected {
          -webkit-text-fill-color: #323233 !important;
          transition: background-color 5000s ease-in-out 0s !important;
        }
      }
      .van-field__control::-webkit-input-placeholder {
        color: rgba(168, 168, 197, 1);
      }
    }
    .checkedPasswordBox {
      width: 281px;
      margin: 20px auto 0 auto;
      font-size: 13px;
      color: #4d6add;
      display: flex;
      justify-content: space-between;
      height: 13px;
      line-height: 13px;
      .van-checkbox { overflow: visible; }
      .van-checkbox__icon {
        font-size: 13px;
        .van-icon {
          width: 12px;
          height: 12px;
          border-color: #4d6add;
        }
      }
      .van-checkbox__label { color: #4d6add; line-height: 13px; }
      .van-checkbox__icon--checked .van-icon-success{
        border-color: #4d6add;
        background: #4d6add;
      }
      .van-checkbox__icon--checked .van-icon-success::before {
        content: '';
        background: #fff;
        width: 40%;
        height: 40%;
        position: absolute;
        top: 30%;
        left: 30%;
        border-radius: 100%;
      }
      .forgetPassWord { cursor: pointer; }
    }
  }
  .buttonBox {
    width: 281px;
    margin: 58px auto 0 auto;
    display: flex;
    justify-content: space-between;
    .van-button{
      width: 120px;
      height: 34px;
      border: 1px solid rgba(77, 106, 221, 1);
      background-color: rgba(77, 106, 221, 1);
    }
    .register { background-color: transparent; color: rgba(77, 106, 221, 1); }
  }
}
</style>
