<template>
  <div>
    <h1>账号登录</h1>
    <div>
      <el-input
        placeholder="请输入登录账号"
        class="input-box"
        v-model.trim="phone"
        autocomplete="on"
        maxlength="11"
        @input="phone=phone.replace(/[\u4e00-\u9fa5]/ig,'')"
      />
      <!--   -->
      <!-- 密码输入框 -->
      <div class="el-input input-box input-password">
        <input
          :type="[openOrClose?'password':'text']"
          maxlength="30"
          autocomplete="off"
          v-model.trim="password"
          @input="password=password.replace(/[\u4e00-\u9fa5]/ig,'')"
          class="el-input__inner"
          placeholder="请输入密码"
        />
        <div class="icon" @click="changeOpen">
          <i class="iconfont" :class="[openOrClose?'iconYJ':'iconYC']"></i>
        </div>
      </div>
      <!-- 底部登录按钮 -->
      <div class="sign-in-btn" @click="loginStart">登录</div>
      <!-- 记住密码or设置密码等 -->
    </div>
  </div>
</template>
<script>
import * as storage from "@/plugins/storage";
import { GO_URLS } from "@/config/URLS";
export default {
  data() {
    return {
      phone: "",
      openOrClose: true, // 是否显示密码
      password: "",
      isclick: true
    };
  },
  methods: {
    // 电话+验证码登录
    async loginStart() {
      if (this.isclick) {
        this.isclick = false;
        //下面添加需要执行的事件
        if (this.password === "") {
          this.$message.error("请输入密码");
          this.isclick = true;
          return;
        }

        const res = await this.$ajax({
          type: "post",
          url: GO_URLS.login,
          params: {
            login_type: 4,
            user: this.phone,
            pwd: this.$md5(
              String(this.password) + this.$md5(String(this.password.length))
            )
          }
        });
        this.isclick = true;
        if (res && res.data) {
          storage.setLogin(
            res.data,
            {
              login_type: 0,
              phone: this.phone,
              pwd: this.password
            },
            this.isAutoLogin
          );
          this.$router.push({ path: "/categoryManage" });
        }
      }
    },
    // 是否显示密码
    changeOpen() {
      this.openOrClose = !this.openOrClose;
    }
  }
};
</script>
<style lang="less" scoped>
.sign-in-btn {
  width: 441px;
  height: 44px;
  background: #0cc399;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  line-height: 44px;
  color: white;
  text-align: center;
  &:hover {
    box-shadow: 0px 2px 6px 0px #0cc399;
  }
}
.input-password {
  position: relative;
  .icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0;
    width: 18px;
    line-height: 2.8;
    height: 100%;
  }
}
.input-box {
  margin-bottom: 16px;
  /deep/ .el-input__inner {
    height: 44px !important;
    &:focus {
      border-color: #0cc399 !important;
      outline: 0;
    }
    &::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #797d84;
    }
    &:-moz-placeholder {
      color: #797d84;
    }
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #797d84;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #797d84;
    }
  }
}
h1 {
  font-size: 30px;
  font-weight: 400;
  color: rgba(53, 53, 53, 1);
  line-height: 42px;
  text-align: center;
  margin: 0;
  margin-top: 96px;
  margin-bottom: 36px;
}
</style>