<!-- 登录页面 -->

<template>
  <div class="loginpage">
    <!-- 轮播 -->
    <el-carousel
      ref="carousel"
      height="960px"
      :autoplay="true"
      :loop="true"
      arrow="never"
      :interval="3000"
      indicator-position="none"
      @mouseenter.native="delHandleMouseEnter"
    >
      <el-carousel-item>
        <img class="lci-img" src="~@/assets/images/u2.png" />
      </el-carousel-item>
      <el-carousel-item>
        <img class="lci-img" src="~@/assets/images/u3.png" />
      </el-carousel-item>
      <el-carousel-item>
        <img class="lci-img" src="~@/assets/images/u4.png" />
      </el-carousel-item>
    </el-carousel>
    <!-- 右侧 -->
    <div class="l-right">
      <div class="lr-title">欢迎使用企业官网综合管理后台</div>
      <div class="lr-from">
      <el-form
        @submit.prevent="onSubmit"
        ref="form"
        :model="form"
        label-width="80px"
        size="small"
        class="lr-form"
      >
        <el-form-item>
          <el-input v-model="form.loginName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button
            type="primary"
            native-type="submit"
            :loading="loading"
            @click="onSubmit"
            class="denglubtn"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "login",
  mounted() {
    // 为了第一次鼠标进入就触发，需要在mounted方法中写，而且轮播图是多张，所以需要循环遍历index
    this.$refs.carousel.handleMouseEnter = () => {};
  },
  methods: {
    // 鼠标移入卡片banner不停止
    delHandleMouseEnter() {
      this.$refs.carousel.handleMouseEnter = () => {};
    },
    login() {
      this.loading = true;
      this.$post("/login/login", this.form)
        .then(this.loginSuccess)
        .catch(this.loginFail);
    },
    loginSuccess({ data }) {
      this.$store.commit("setUserData", data);
      console.log("userData", this.$store.state.userData);
      console.log("redirect",this.redirect)
      this.$router.replace({
        path: this.redirect
      });
    },
    loginFail(error) {
      this.loading = false;
      //this.refreshCode();
      this.$message.error(error.message);
    },
    // refreshCode() {
    //   this.form.securityCode = '';
    //   this.securityCodeUrl = securityCodeUrl + Math.random();
    // },
    onSubmit(e) {
      e.preventDefault();
      if (!this.form.loginName.length) {
        return this.$message.warning("请输入用户名");
      }
      if (!this.form.password.length) {
        return this.$message.warning("请输入密码");
      }
      this.login();
    }
  },
  data() {
    return {
      originData: [],
      loading: false,
      redirect: this.$route.query.redirect || "/",
      form: {
        loginName: "",
        password: ""
      },
      sysName: localStorage.getItem("sysName")
        ? localStorage.getItem("sysName")
        : "企业服务管理平台"
    };
  }
};
</script>

<style lang="less" scopped>
@import "~@/assets/less/login.less";
</style>
