<template>
  <div class="container">
    <el-row>
      <el-col :span="13">
        &nbsp;
      </el-col>
      <el-col :span="11">
        <div id="login_form">
          <div id="logo"></div>
          <div id="title">旅游大数据上传后台</div>
          <el-form
            label-width="0px"
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item prop="uname">
              <el-input
                ref="zhanghao"
                placeholder="请输入账号"
                maxlength="16"
                v-model="ruleForm.uname"
                prefix-icon="el-icon-login-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="upass">
              <el-input
                ref="mima"
                placeholder="请输入密码"
                maxlength="16"
                type="password"
                v-model="ruleForm.upass"
                prefix-icon="el-icon-login-pass"
                @keyup.enter.native="submitForm('ruleForm')"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
              >登 陆</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    var checkName = (rule, value, callback) => {
      // console.log(rule, value, callback);
      if (!value) {
        return callback(new Error("请输入账号"));
      }
      setTimeout(() => {
        if (value.length < 5) {
          callback(new Error("账号长度不小于5位"));
        } else {
          callback();
        }
      }, 30);
    };
    var validatePass = (rule, value, callback) => {
      // console.log(rule, value, callback);
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      setTimeout(() => {
        if (value.length < 5) {
          callback(new Error("密码长度不小于5位"));
        } else {
          callback();
        }
      }, 30);
    };
    return {
      ruleForm: {
        uname: "",
        upass: "",
      },
      rules: {
        uname: [
          {
            validator: checkName,
            trigger: "blur",
          },
        ],
        upass: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.$refs["zhanghao"].focus();
  },
  methods: {
    submitForm(formName) {
      let _this = this;
      let params = {};
      var username = String(_this.ruleForm.uname).trim();
      var userpass = String(_this.ruleForm.upass).trim();

      if (username && userpass) {
        params.userName = username;
        params.password = userpass;
      } else {
        _this.$message.warning("请输入账号和密码！");
        if (!username) _this.$refs["zhanghao"].focus();
        else _this.$refs["mima"].focus();
        return;
      }

      _this.$refs[formName].validate((valid) => {
        _this
          .$axios({
            method: "post",
            url:
              "/diseaseRight/adminInfo/login?userName=" +
              username +
              "&password=" +
              userpass,
            headers: {
              "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
            },
          })
          .then((res) => {
            // console.log(res.data);
            if (res.data.success) {
              _this.$message.success(res.data.message);
              sessionStorage.setItem("uname", username);
              sessionStorage.setItem("userType", res.data.data.userType);
              sessionStorage.setItem("token", res.data.data.token);
              // if (typeof(res.data.name) == 'undefined') {
              // 	sessionStorage.setItem('unic', '未设置昵称')
              // } else {
              // 	sessionStorage.setItem('unic', res.data.name)
              // }
              _this.$router.replace("/smoke/index"); //跳转到首页
            } else {
              _this.$message({
                showClose: true,
                message: "登陆异常：" + res.data.message,
                type: "error",
              });
            }
          })
          .catch((err) => {
            // console.log(err);
            _this.$message.error("捕捉异常：" + err);
          });
      });
    },
  },
};
</script>

<style scoped>
@import url("./login.css");
</style>
