<template>
  <div class="login-container">
    <el-popconfirm :class="'logout'" placement="bottom-end" :title="'是否退出登录？'" v-show="userState" trigger="click"
      :hide-icon="true" @confirm="logout">
      <el-button class="user_button" slot="reference" :title="renderUserInfo.username">
        <img src="../assets/img/user.png" alt="" />
        {{ renderUserInfo.username }}
      </el-button>
    </el-popconfirm>
    <div class="login" v-show="!userState" @click="open">
      <img src="../assets/img/systemInto.png" alt="" />
      <p>登录</p>
    </div>
    <el-dialog :custom-class="'userloginContainer'" :title="'用户登录'" :visible.sync="isShowUserLogin" width="30%"
      :before-close="close" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="userLoginForm" label-width="100px"
        class="demo-ruleForm" :label-position="'top'">
        <el-form-item prop="username">
          <div class="userTop">用户名</div>
          <el-input type="username" v-model="ruleForm.username" autocomplete="off" placeholder="登录账号" class="username">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <div class="userTop">密码</div>
          <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="登录密码" class="password">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="login">登 录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/userlogin";

export default {
  data() {
    return {
      isShowUserLogin: false,

      userState: false,
      renderUserInfo: {
        username: "",
      },
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    if (this.$store.getters.getUserState == true) {
      this.userState = true;
      this.renderUserInfo = this.$store.getters.getUserInfo;
      this.$store.commit("setUserState", true);
      this.$store.commit(
        "setUserInfo",
        JSON.parse(JSON.stringify(this.renderUserInfo))
      );
      return;
    } else {
      this.userState = false;
      this.$router.push({ path: "/" });
    }
  },
  methods: {
    open() {
      this.isShowUserLogin = true;
    },
    close() {
      this.isShowUserLogin = false;
    },

    login() {
      let that = this;

      this.$refs.userLoginForm.validate((valid) => {
        if (valid) {
          api
            .login({
              userName: that.ruleForm.username,
              password: that.ruleForm.password,
              clientId: "2",
            })
            .then((result) => {
              if (result.code == 200) {
                that.renderUserInfo = {
                  username: that.ruleForm.username,
                };
                that.$store.commit("setToken", result.message);
                that.$store.commit("setUserState", true);
                that.$store.commit("setUserInfo", {
                  username: that.ruleForm.username,
                });
                that.isShowUserLogin = false;
                that.userState = true;
              } else {
                that.$message({
                  type: "error",
                  message: result.content,
                });
              }
            })
            .catch((err) => {
              that.$message({
                type: "error",
                message: err,
              });
            });
        }
      });
    },
    logout() {
      // 退出登录
      this.$store.commit("setToken", "");
      this.$store.commit("setUserState", false);
      this.$store.commit("setUserInfo", { username: "" });
      this.userState = false;
      this.renderUserInfo = {
        username: "",
      };
      this.ruleForm = {
        username: "",
        password: "",
      };
      this.$router.push({ path: "/" });
      this.$refs.userLoginForm.clearValidate();
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  .login {
    float: right;
    height: 40px;
    line-height: 40px;
    margin: 20px 30px 20px 10px;
    padding: 0px 10px;
    font-size: 16px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 4px;
    background: #084a8e;

    img {
      width: 20px;
      height: 20px;
      padding-top: 7px;
      padding-bottom: 9px;
      display: inline-block;
      vertical-align: middle;
    }

    p {
      display: inline-block;
      padding-left: 10px;
      height: 100%;

      &:hover {
        color: #3ba1ff;
      }
    }
  }

  .user_button {
    height: 40px;
    font-size: 16px;
    padding: 10px 10px 10px 48px;
    margin: 20px 30px 20px 10px;
    float: right;
    border: 0px solid;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: transparent;
    color: #ffffff;
    border-radius: 4px;
    background: #084a8e;
    position: relative;

    img {
      width: 32px;
      height: 32px;
      position: absolute;
      left: 10px;
      top: 4px;
    }
  }

  /deep/.el-dialog__body {
    padding: 0px 20px;
  }

  /deep/.el-dialog__title {
    font-weight: bold;
  }

  /deep/.el-input__inner {
    background-color: #f4f4f4ff !important;
    box-shadow: 0px 0px 5px #cccdce inset;
  }

  .username /deep/.el-input__inner {
    background: url(../assets/img/yonghu.png) no-repeat 10px;
    padding: 0px 50px;
    /*输入内容左右边距控制*/
  }

  .password /deep/.el-input__inner {
    background: url(../assets/img/mima.png) no-repeat 10px;
    padding: 0px 50px;
    /*输入内容左右边距控制*/
  }

  .userTop {
    font-weight: bold;
    color: #808080ff;
  }
}
</style>