<template>
  <div class="login">
    <div class="login-head">
      <h1><span>东部战区心理战训练系统</span></h1>
      <div>
        <span class="date" v-text="myDate.day"></span>&emsp;&emsp;
        <span class="week" v-text="myDate.week"></span>
      </div>
    </div>
    <div class="login-content">
      <div class="login-left-content">
        <img :src="leftOne" alt="" style="margin-left: 25%;margin-top: 13%;">
        <img :src="leftTwo" alt="" style="margin-left: 16%;margin-top: 19%;">
      </div>
      <div class="login-center-content">
        <div class="login-content-form">
        </div>
        <div class="myForm">
          <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
            class="demo-ruleForm login-container">
            <el-form-item prop="account">
              <el-input type="text" prefix-icon="el-icon-user-solid" v-model="ruleForm2.account" auto-complete="off"
                placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input type="password" prefix-icon="el-icon-s-goods" v-model="ruleForm2.checkPass" auto-complete="off"
                placeholder="请输入密码" @keyup.enter.native="keyupEnter"></el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button style="width: 100%" @click="login" :loading="logining"
                class="buuton-login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="login-right-content">
        <img :src="rightOne" alt="" style="margin-left: 5%;margin-top: 19%;">
        <img :src="rightTwo" alt="" style="margin-left: 16%;margin-top: 13%;">
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "../util/login_util";
import leftOne from '../assets/img/login/text1.png';
import leftTwo from '../assets/img/login/text2.png';
import rightOne from '../assets/img/login/text3.png';
import rightTwo from '../assets/img/login/text4.png';
import dayjs from "dayjs";
export default {
  name: "login",
  data() {
    return {
      logining: false,
      ruleForm2: {
        account: "",
        checkPass: "",
      },
      rules2: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        checkPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      checked: true,
      leftOne: leftOne,
      leftTwo: leftTwo,
      rightOne: rightOne,
      rightTwo: rightTwo,
      myDate: {
        day: null,
        week: null
      }
    };
  },
  methods: {
    handleReset2() {
      this.$refs.ruleForm2.resetFields();
    },
    login(ev) {
      this.$refs.ruleForm2.validate((valid) => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: "账号或密码不为空",
            type: "warning",
          });
          return;
        }
        this.logining = true;
        login(
          this.ruleForm2.account,
          this.ruleForm2.checkPass
        )
          .then((res) => {
            this.logining = false;
            this.$message({
              showClose: true,
              message: res,
              type: "success",
            });
            this.$router.push("/homepage");
          })
          .catch((err) => {
            this.logining = false;
            this.$message({
              showClose: true,
              message: err,
              type: "warning",
            });
            return false;
          });
      });
    },
    keyupEnter() {
      this.login();
    }
  },
  activated() {
    if (this.$route.params.code == 9040 || this.$route.params.code == 9041 || this.$route.params.code == 9042) {
      this.$message({
        showClose: true,
        message: this.$route.params.message,
        type: "warning",
      });
    }
    //获取时间
    this.myDate.day = dayjs().format('YYYY年MM月DD日');
    const weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    this.myDate.week = weekList[dayjs().get('day')]
  }
};
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/img/login/loginBg.png");
  background-size: 100% 100%;
  margin: 0;
  padding: 0;

  .login-head {
    width: 100%;
    height: 120px;
    background-image: url('../assets/img/login/loginHeader.png');
    background-size: 90% 73%;
    background-repeat: no-repeat;
    background-position: center 33px;

    h1 {
      font-size: 34px;
      letter-spacing: 7px;
      padding-top: 23px;
      margin-top: 0px;
      margin-bottom: 0px !important;
      font-family: cursive;
      text-align: center;

      span {
        background-image: linear-gradient(to right, #498ce1, #75f8d2, #498ce1);
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(#0ff 0px 0px 12px);
      }
    }

    div {
      margin-top: 40px;
      font-size: 13px;
      color: #75879b;
      text-align: center;
      line-height: initial;
      font-weight: 900;
      letter-spacing: 1;
    }
  }

  .login-content {
    width: 100%;
    height: calc(100% - 120px);
    display: flex;
    background: url("../assets/img/login/loginContent.png");
    background-size: 100% 100%;


    .login-left-content {
      width: calc(50% - 350px);
      -webkit-animation: warn 3s ease-out infinite;
      -moz-animation: warn 3s ease-out infinite;
      animation: warn 3s ease-out infinite;
      animation-direction: alternate;
    }

    .login-center-content {
      width: 700px;
      height: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }



    .login-content-form {
      width: 560px;
      height: 560px;
      // padding: 145px;
      background: url("../assets/img/login/loginCenter.png");
      display: flex;
      justify-content: center;
      align-items: center;
      animation: roate 50s infinite linear;

      @keyframes roate {
        0% {
          transform: rotateZ(0);
          -ms-transform: rotateZ(0);
          -moz-transform: rotateZ(0);
          -webkit-transform: rotateZ(0);
          -o-transform: rotateZ(0);
        }

        100% {
          transform: rotateZ(360deg);
          -ms-transform: rotateZ(360deg);
          -moz-transform: rotateZ(360deg);
          -webkit-transform: rotateZ(360deg);
          -o-transform: rotateZ(360deg);
        }
      }

    }

    .myForm {
      position: absolute;

      .myInput {
        color: white;
        background-image: url("../assets/img/login/loginInput.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: 2px solid #1b416f;
      }

      .myButton {
        width: 100%;
        color: white;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: transparent;
        border: none;
        background-image: url('../assets/img/login/loginButton.png');
      }

      input:-webkit-autofill,
      textarea:-webkit-autofill,
      select:-webkit-autofill {
        -webkit-text-fill-color: #ededed !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s;
      }

      input {
        background-color: transparent;
      }
    }
  }

  .login-right-content {
    width: calc(50% - 350px);
    -webkit-animation: warn 3s ease-out infinite;
    -moz-animation: warn 3s ease-out infinite;
    animation: warn 3s ease-out infinite;
    animation-direction: alternate;
  }

  @keyframes warn {
    from {
      opacity: 1;
      transform: scale(0.98);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
</style>