<template>
  <div class="login">
    <div class="logo">
      <img :src="getImgUrl('indexImages/yc_logo.png')" />
    </div>
    <h1>六盘水烟草商业安全管理系统</h1>
    <div class="aqbybox">
      <span @click="jump">安全第一</span>
      <span>平安是福</span>
    </div>

    <div class="img">
      <img :src="getImgUrl('indexImages/bb.png')" alt="" />
    </div>
    <div class="box">
      <div class="tab">
        <span :class="openshow ? 'colors' : 'cuper'" @click="openshow = true">密码登录</span>
        <span class="ml10 mr10">/</span>
        <span :class="!openshow ? 'colors' : 'cuper'" @click="openshow = false">二维码登录</span>
      </div>
      <div v-if="openshow">
        <el-form :model="loginForm" ref="loginFromRef" label-width="0" label-position="right" @submit.prevent
          :class="isTrue ? '' : 'mt63'">
          <el-form-item prop="userName" class="row" :rules="{ required: true, message: '请输入账号', trigger: 'blur' }">
            <img class="icon" :src="getImgUrl('indexImages/yonghu.png')" alt="" />
            <el-input class="input" v-model="loginForm.userName" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item prop="password" class="row" :rules="{ required: true, message: '请输入密码', trigger: 'blur' }">
            <img class="icon" :src="getImgUrl('indexImages/suo.png')" alt="" />
            <el-input class="input" type="password" v-model="loginForm.password" show-password placeholder="请输入密码" />
          </el-form-item>
          <el-form-item v-if="isTrue" prop="kaptcha" :rules="{ required: true, message: '请输入验证码', trigger: 'blur' }">
            <el-input class="inputyzm" v-model="loginForm.kaptcha" placeholder="请输入验证码">
            </el-input>

          </el-form-item>
          <el-form-item label-width="0">
            <el-button class="login-btn" native-type="submit" :loading='loading' @click="handleLogin()">
              登录
            </el-button>
          </el-form-item>

        </el-form>
        <img v-if="isTrue" class="imgsyzm" :src="ErmImg" alt="" />
      </div>



    </div>
    <div class="botbox" v-if="!openshow">
      <MOSTY.ErwmImg :url="qrcodepxImg(uuid, 'login', '', '')" :filename='"扫码登录二维码"' />
    </div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { onMounted, ref, onUnmounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { setItem } from "@/utils/storage";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { qrcodepxImg, generateUUID } from "@/utils/tools.js";
import Base64 from "base-64";
const store = useStore();
const router = useRouter();
const isTrue = ref(false)
const timer = ref(null);//定时器
const uuid = ref(generateUUID())
const ErmImg = ref('')
const openshow = ref(true)
const loginForm = ref({
  userName: "",
  password: "",
  kaptcha: "",
  loginType: "02",
  checked: false
});
const loading = ref(false);
const loginFromRef = ref(null);
const handleLogin = () => {
  loginFromRef.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    getlogin()
  });
};
function getlogin() {
  loginForm.value.loginType = '02'
  store.dispatch("user/login", loginForm.value)
    .then((res, code) => {
      loading.value = true;
      // 登录后操作
      if (res) {
        if (res == 4090) {
          loading.value = false;
          getApi({ username: loginForm.value.userName }, '/mosty-base/getKaptcha').then((res) => {
            ErmImg.value = res
            isTrue.value = true
          })
        } else {
          if (loginForm.value.checked) {
            localStorage.setItem("userName", loginForm.value.userName);
            localStorage.setItem("password", loginForm.value.password);
          } else {
            localStorage.setItem("userName", "");
            localStorage.setItem("password", "");
          }
          // 登录成功后，跳转到首页
          store.commit(
            "app/addTagsViewList",
            {
              fullPath: "/dutyBook/home/workbench",
              meta: {
                meta: {
                  title: "消防管理大屏"
                }
              },
              name: "dutyBook/home/workbench",
              params: {},
              path: "/dutyBook/home/workbench",
              query: {},
              title: "消防管理大屏"
            },
            {
              immediate: true
            }
          );
          router.push('/dutyBook/home/workbench')
          getuserinfo()
        }

      } else {
        deptList.value = [...res.dept];
        loginDialog.value = true;
        authorization.value = res.jwtToken;
        ElNotification({
          title: "提示",
          message: "请选择部门",
          duration: 3000
        });
      }
    })
    .catch((err) => {
      loading.value = false;
    });
}
function jump() {
  console.log('跳转');
  router.push('/preview')
}
//	查询用户配置主题色信息
function getuserinfo() {
  getApi({}, '/mosty-base/userConfig/getConfig').then(res => {
    if (res && res.color) {
      setItem("ZtColor", res.color);
    } else {
      setItem("ZtColor", 'rgba(0, 116, 87, 1)');
    }
  })
}
onMounted(() => {
  let userName = localStorage.getItem("userName");
  let password = localStorage.getItem("password");
  if (userName && password) {
    loginForm.value = {
      userName: userName,
      password: password,
      checked: true
    };
  } else {
    loginForm.value = {
      userName: "",
      password: "",
      checked: false
    };
  }
  start()
});
//开启定时器方法
const start = () => {
  //定时器触发周期
  let speed = ref(2000);
  //setInterval会返回一个id,clearTimeout拿到该id才可清除
  timer.value = setInterval(MarqueeTest, speed.value);
};
const MarqueeTest = () => {
  //获取用户登录数据
  getApi({}, '/mosty-base/checkLogin?loginToken=' + uuid.value).then((res) => {
    if (res.loginResult == 'Y') {
      //清除定时器
      clearTimeout(timer.value);
      loginForm.value.userName = Base64.decode(res.loginName)
      loginForm.value.password = Base64.decode(res.password)
      getlogin()
    }



  })
};
onUnmounted(() => {
  //清除定时器
  clearTimeout(timer.value);
});
</script>

<style lang="scss" scoped>
.login {
  background: url("~@/assets/images/gb.jpg") no-repeat center;
  background-size: 100% 100%;
  border: 1px solid #979797;
  height: 970;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  font-family: PingFangSC-Regular;

  h1 {
    font-size: 40px;
    text-align: center;
    letter-spacing: 10px;
  }

  .aqbybox {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    background: linear-gradient(to bottom, #ffffff, #00ffff);
    -webkit-background-clip: text;
    color: transparent;

    >span {
      margin: 0 10px;
    }
  }

  .img {
    position: absolute;
    left: 79.5%;
    top: 49%;
    transform: translate(-50%, -50%);
    background-color: rgb(0, 19, 34);

    img {
      width: 600px;
      height: 560px;
    }
  }

  .box {
    z-index: 999;
    background-size: 100% 100%;
    position: absolute;
    left: 80%;
    top: 47%;
    // background-color: green;
    transform: translate(-50%, -50%);
    width: 567px;
    height: 400px;
    padding: 44px 97px;
    box-sizing: border-box;

    .row {
      margin-bottom: 24px;
      position: relative;
      border-radius: 10px;

      .icon {
        position: absolute;
        z-index: 55;
        width: 24px;
        left: 10px;
        top: 12px;
      }
    }

    .input {
      display: block;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
      height: 54px;
      box-sizing: border-box;
      color: #fff;
      width: 100%;
      border-radius: 10px;

      &::-webkit-input-placeholder {
        font-size: 16px;
        color: #cccccc;
        font-weight: 400;
      }
    }

    .login-btn {
      display: block;
      width: 100%;
      height: 54px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      color: #00181d;
      font-weight: 400;
      background: rgb(0, 255, 255);
      margin-top: 5px;
      border: none;
      cursor: pointer;
      border-radius: 6px;

      &:hover {
        background-color: rgb(72, 210, 210);
      }
    }
  }
}

.tab {
  text-align: center;
  margin-bottom: 20px;
  font-size: 21px;
}

.el-form {
  display: block;
}

::v-deep .el-input__inner {
  height: 100%;
  padding: 0 0 0 48px;
}

::v-deep .el-input-group__append::before {
  height: 30px;
}

.inputyzm {
  padding: 0px;
  // display: block;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 54px;
  box-sizing: border-box;
  color: #fff;
  width: 45%;
  border-radius: 10px;

  &::-webkit-input-placeholder {
    font-size: 16px;
    color: #cccccc;
    font-weight: 400;
  }

  ::v-deep .el-input__inner {
    height: 100%;
    padding: 0 0 0 12px !important;
  }
}

.footerInfor {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;

  .info {
    text-align: center;

    a {
      color: #2b91fb;
      text-decoration-line: underline;
      text-decoration-color: #2b91fb;
    }
  }
}

.logo {
  margin-top: 20px;
  margin-left: 20px;
}

.el-checkbox {
  color: #fff;
  --el-checkbox-checked-bg-color: rgb(0, 255, 255);
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: aqua !important;
}

.colors {
  color: aqua;
}

.cuper {
  cursor: pointer;
}

.imgsyzm {
  position: relative;
  height: 52px;
  width: 200px;
  bottom: 149px;
  /* right: -41px; */
  left: 173px;
}

.botbox {
  ::v-deep .el-image {
    margin-left: 12px !important;
    width: 222px !important;
    height: 221px !important;
  }

  position: absolute;
  z-index: 9999;
  left: 74.5%;
  top: 39%;
}
</style>
