<template>
    <div :class="type==1?'login':''">
      <div class="login-contet">
        <div class="login-form">
        <el-form ref="loginFormRef" size="large" :model="loginForm" :rules="loginRules">
          <div style="display: flex;width: 100%; align-items: center;justify-content:center;padding-bottom: 10px;">
            <img src="../../assets/logo/logo.png" width="85" height="36" alt="" />
            <h3 style="margin-left: 10px;padding-left: 10px;font-size: 32px;color: #2771bb;border-left: 3px solid #2771bb;">智慧换电管理系统</h3>
          </div>
          <!--large / default / small-->
        <el-form-item prop="username" size="large">
          <el-input size="large" v-model="loginForm.username" type="text" clearable auto-complete="off" placeholder="账号">
            <template #prefix>
              <el-icon>
                <myUser />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item size="large" prop="password">
          <el-input size="large" v-model="loginForm.password" type="password" clearable auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
            <template #prefix>
              <el-icon>
                <myPassword />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item size="large" v-if="captchaEnabled" prop="code">
          <el-input size="large" v-model="loginForm.code" auto-complete="off" clearable placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
            <template #prefix>
              <el-icon>
                <myValidCode />
              </el-icon>
            </template>
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" class="login-code-img" @click="getCode" />
          </div>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
        <el-form-item style="width: 100%">
          <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div v-if="register" style="float: right">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
      </div>
      </div>
      <!--  底部  -->
      <div v-if="type==1" class="el-login-footer">
        <span>河北伊特</span>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup name="LoginPage">
  import { ref, watch, onMounted } from "vue";
  import { getCodeImg,checkcaptcha } from "@/api/login";
  import type { LoginReq } from "@/api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from "@/utils/jsencrypt";
  import { useRoute, useRouter } from "vue-router";
  import userStore from "@/stores/user";
  
  import appStore from "@/stores/app";

  const props = withDefaults(defineProps<{
    type?:string|number
  }>(), {
    type:1
  })

  const emit = defineEmits<{
    update: []
  }>()

  const router = useRouter();
  const route = useRoute();
  const store = userStore();
  
  const codeUrl = ref<string>("");
  const loginForm = ref<LoginReq>({
    username: "",
    password: "",
    rememberMe: false,
    code: "",
    uuid: "",
  });
  const loginRules = ref({
    username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
    password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
    code: [{ required: true, trigger: "change", message: "请输入验证码" }],
  });
  const loading = ref(false);
  // 验证码开关
  const captchaEnabled = ref(true);
  // 注册开关
  const register = ref(false);
  const redirect = ref<null | undefined | string>(undefined);
  
  watch(
    route,
    (value) => {
      redirect.value = (value.query && value.query.redirect) as string;
    },
    {
      immediate: true, // 这个属性是重点啦
      // deep: true // 深度监听的参数
    }
  );
  
  /**
   * 获取验证码
   */
  let ipcode = ref<string>("");
  const getCode = () => {
    loginForm.value.code = ''
    getCodeImg().then( res => {
      let data = res.data as any
      if(data){
        ipcode.value = data.split(':')[0];
        codeUrl.value = data.substring(data.indexOf(":") + 1);
      }
      // captchaEnabled.value = res.data === undefined ? true : res.data;
      // if (captchaEnabled.value) {
      //   codeUrl.value = "data:image/gif;base64," + res.img;
      //   loginForm.value.uuid = res.uuid;
      // }
    });
  };
  
  //检查验证码是否有效
  function checkcode() {
     return checkcaptcha({
      code:`${ipcode.value}:${loginForm.value.code}`
    })
  }
  
  /**
   * 获取Cookie数据
   */
  const getCookie = () => {
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get("rememberMe");
  
    const tempPwd = password ? decrypt(password) : false;
    loginForm.value = {
      username: username === undefined ? loginForm.value.username : username,
      password: tempPwd || "",
      rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
    };
  };
  
  const loginFormRef = ref();
  /**
   * 登录
   */
  const handleLogin = () => {
    loginFormRef.value?.validate((valid: boolean) => {
      if (valid) {
        checkcode().then(rps => {
          loading.value = true;
        if (loginForm.value.rememberMe) {
          Cookies.set("username", loginForm.value.username, { expires: 30 });
          const tempPwd = loginForm.value.password ? encrypt(loginForm.value.password) : false;
          Cookies.set("password", tempPwd || "", { expires: 30 });
          Cookies.set("rememberMe", loginForm.value.rememberMe.toString(), {
            expires: 30,
          });
        } else {
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove("rememberMe");
        }
        store
          .Login(Object.assign({},loginForm.value,{code:`${ipcode.value}:${loginForm.value.code}`}))
          .then(() => {
            loading.value = false;
            appStore().setInit(true)
            if(props.type == 1){
                router.push({ path: redirect.value || "/" });
            }else{
                emit('update')
            }
            
          })
          .catch(() => {
            loading.value = false;
            if (captchaEnabled.value) {
              getCode();
            }
          });
        })
        
      }
    });
  };
  
  onMounted(() => {
    getCode();
    getCookie();
  });
  </script>
  
  <style lang="less" scoped>
  .login {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // height: 100%;
    // background-image: url("../../assets/images/login-background.jpg");
    // background-size: cover;
  
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../../assets/images/login-background.jpg") no-repeat 0 0;
    background-size: cover;
  }
  
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }
  
  .login-contet {
    position: absolute;
    top: 25%;
    right: 10%;
    width: 500px;
    //border-radius: 6px;
    border: 10px solid #7cbcf5;
    background: #ffffff;
    border-radius: 5px;
    .login-form{
      padding: 25px 25px 5px 25px;
      border: 4px solid #6287c9;
      //border-radius: 5px;
      .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
  
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
   
  }
  
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    padding-left: 5px;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  
  .login-code-img {
    height: 38px;
  }
  </style>
  