<!-- 登录页面 -->

<template>
  <div class="page page-login flex flex-v">
    <div class="form-wrap flex flex-1">
      <el-form
        @submit.prevent="onSubmit"
        ref="form"
        :model="form"
        label-width="0px"
        size="small"
      >
        <h1>{{ sysName ? sysName : "智慧政务绩效管理系统" }}</h1>
        <div class="des">数据驱动绩效改善，强化从指标到目标全过程管理</div>
        <el-form-item label="">
          <el-input
            v-model="form.loginName"
            placeholder="请输入用户名"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button
            type="primary"
            native-type="submit"
            :loading="loading"
            @click="onSubmit"
            style="font-size: 20px;"
            >登录</el-button
          >
        </el-form-item>

        <div class="tips">
          温馨提示：请使用谷歌或火狐等非ie内核浏览器，观看效果更佳
        </div>
      </el-form>
    </div>

    <!-- <div class="footer">
      登陆 &copy; <a href="">信宏翔网络科技有限公司</a> 出品
    </div> -->
  </div>
</template>

<script>
import { createSocket } from "@/assets/utils/websocket";

export default {
  name: "login",
  created() {
    localStorage.removeItem("sysName");
    localStorage.removeItem("sysLogo");
    this.$route.query.sysName
      ? localStorage.setItem("sysName", this.$route.query.sysName)
      : "";
    this.$route.query.sysName
      ? (document.title = this.$route.query.sysName)
      : "";
    this.$route.query.sysLogo
      ? localStorage.setItem("sysLogo", this.$route.query.sysLogo)
      : "";
  },
  methods: {
    async login() {
      this.loading = true;
      await this.$post("/login/login", this.form)
        .then(this.loginSuccess)
        .catch(this.loginFail);
    },
    loginSuccess({ data }) {
      console.log("userData", data);
      console.log("redirect", this.redirect);
      this.$store.commit("setUserData", data);
      this.$router.replace({
        path: this.redirect,
      });

      //成功 创建websocket连接 process.env.VUE_WEBSOCKET_BASE_API +
      console.log("process", process.env);
      // createSocket("ws://"+process.env.VUE_APP_BASE_API +"/ws?accessToken="+data.id)
    },
    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"),
    };
  },
};
</script>

<style lang="less">
.el-divider--horizontal {
  margin: 5px 0;
  background: 0 0;
  border-top: 2px solid #e8eaec;
}
.page-login {
  background-image: url("~@/assets/images/login_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  height: 100%;
  overflow: hidden;
  text-align: center;
  .des,
  .tips {
    font-size: 18px;
    white-space: nowrap;
    margin-bottom: 20px;
    margin-top: 10px;
    color: #666;
  }
  .el-form {
    margin: auto;
    width: 640px;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    h1 {
      text-align: center;
      font-size: 40px;
      font-weight: 600;
    }
    button {
      margin-top: 10px;
      width: 240px;
    }
    .el-form-item {
      margin-bottom: 28px;
    }
    .el-input-group__append {
      padding: 0;
      font-size: 0;
    }
    .el-input {
      width: 80%;
    }
    .el-input__inner {
      border-color: #409eff;
      border-radius: 8px;
    }
    .el-input--small .el-input__inner {
      height: 52px;
      line-height: 1em;
      font-size: 15px;
    }
    .el-input__inner::placeholder {
      color: #409eff;
    }
    button {
      width: 80%;
      border-radius: 8px;
      height: 52px;
      background: linear-gradient(
        180deg,
        rgba(24, 69, 198, 1) 0%,
        rgba(41, 153, 255, 1) 100%
      );
    }
  }
  .footer {
    height: 80px;
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 80px;
    a {
      color: #999;
    }
  }
}
// ::v-deep .el-input{
//   width: 80%;
//   border-color: #409EFF;
// }
</style>