<template>
  <!-- 登录 -->
  <div class="login">
    <s-header
      :name="sys ? sys.title : $t('public.sysName')"
      :noback="false"
    ></s-header>
    <div class="loginLogoBox l-re">
      <van-image class="loginLogo" :src="sys ? sys.imgUrl : logiLogoImgUrl" />
      <div class="l-ab pointer languageCon" @click="languageClk">
        <div class="c-text-b c-color-theme">
          {{ compLang }}
        </div>
      </div>
    </div>
    <div class="loginTitleBox l-flex-center">
      <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
            icon-size="18px"
            class="checkedPassWord"
            v-model="checked"
            checked-color="#4d6add"
          >
            <template #default>
              <span :class="checked ? 'c-color-theme' : ''">{{
                $t("login.checkedPassWord")
              }}</span>
            </template>
          </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, computed } from "vue";
import { Toast } from "vant";
import { login, getSys } from "@/service/login";
import { setLocal, getLocal, navigatorLanguage } from "@/common/js/utils";
import sHeader from "@/components/SimpleHeader";
import logiLogoImgUrl from "@/assets/login/logo.png";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
// vant组件的中英文切换
import { Locale } from "vant";
// 引入英文语言包
import enUS from "vant/es/locale/lang/en-US";
// 引入简体中文语言包
import zhCN from "vant/es/locale/lang/zh-CN";

export default {
  setup() {
    let languageName = ref(getLocal("curLang"));
    const { locale,t } = useI18n();
    // 语言点击
    const languageClk = () => {
      if (languageName.value === "zh") {
        locale.value = "en";
        languageName.value = "en";
        setLocal("curLang", "en");
        // 切换vant语言包
        Locale.use("en-US", enUS);
      } else {
        locale.value = "zh";
        languageName.value = "zh";
        setLocal("curLang", "zh");
        // 切换vant语言包
        Locale.use("zh-CN", zhCN);
      }
    };
    const compLang = computed(() => {
      if (languageName.value === "en") {
        return "中文";
      } else {
        return "English";
      }
    });
    const checked = ref(false); // 是否记住密码状态
    const userName = ref("");
    const userPwd = ref("");
    const router = useRouter();
    const route = useRoute();
    const sys = ref(null);
    // 页面初始化
    onMounted(() => {
      // localStorage.clear();
      // 如果没有语言缓存
      if (!getLocal("curLang")) {
        //  根据浏览器语言重新缓存到localstorage
        setLocal("curLang", navigatorLanguage());
        languageName.value = getLocal("curLang");
      }
      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;
        setLocal("loginSys", JSON.stringify(data.data));
        sys.value = data.data;
      }
    };
    // 登录
    const onSubmit = async (values) => {
      const { data } = await login({
        username: values.userName,
        password: md5(values.userPwd),
      });
      if (data.code === "00000") {
        setLocal("loginUser", JSON.stringify(data.data));
        Toast.success(t('login.loginSucess'));
        // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
        // window.location.href = '/';
        setTimeout(()=>{
          router.push("/home");
        },200);
      } 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,
      compLang,
      languageClk,
    };
  },
  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;
    }
    .languageCon {
      right: 10px;
      top: 10px;
      border: 1px solid #4d6add;
      padding: 5px 10px;
      border-radius: 10px;
    }
  }

  .loginTitleBox {
    width: 100%;

    .loginTitle {
      // width: 80px;
      height: 28px;
      overflow-wrap: break-word;
      color: #404d74;
      font-size: 20px;
      font-family: PingFangSC-Medium;
      text-align: center;
      white-space: nowrap;
      line-height: 28px;
      display: block;
      margin: 8px auto 0 auto;
      font-weight: 600;
    }
  }

  .loginFormBox {
    width: 100%;
    margin-top: 38px;

    /deep/ .van-field__body {
      height: 100%;
    }

    .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>
