<template>
  <div class="login-wrapper">
    <div class="login-main">
      <div class="login_head">
        <img class="iamge_logo" src="../../../public/logo.png" alt="" />
        <div class="headline_login">气瓶安全追溯管理系统</div>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" v-if="!enterWay">
        <el-form-item prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="手机号">
            <template slot="prepend">
              <i class="el-icon-mobile-phone icon_login"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <el-input placeholder="验证码" v-model="ruleForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')"
            @change="submitForm('ruleForm')">
            <template slot="prepend">
              <i class="el-icon-message icon_login"></i>
            </template>
            <el-button slot="suffix" type="primary" size="small" round :disabled="disabled" @click="getCode()">
              <span class="Time">{{btnTxt}}</span>
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" v-else>
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="账号">
            <template slot="prepend">
              <i class="el-icon-user-solid icon_login"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!-- <el-input :class="cipherState ? '' : 'no-autofill-pwd'" placeholder="密码" v-model="ruleForm.password"
            @change="submitForm('ruleForm')">
            <template slot="prepend">
              <i class="el-icon-lock icon_login"></i>
            </template>
            <i class="el-icon-view el-input__icon" slot="suffix" @click="handleIconClick"></i>
          </el-input> -->
          <el-input placeholder="密码" v-model="ruleForm.password" show-password
            @keyup.enter.native="submitForm('ruleForm')">
            <template slot="prepend">
              <i class="el-icon-lock icon_login"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="tipBox">
        <div class="random_title" v-if="!enterWay" @click="getEnter(true)">账号密码登录</div>
        <div class="random_title" v-else @click="getEnter(false)">验证码登录</div>
        <!-- <div class="random_title" @click="randomEntry">直接登录</div> -->
      </div>
      <div class="btnBox center_in">
        <el-button class="login-btn" type="primary" :loading="loginLoading" round
          @click="submitForm('ruleForm')">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getSmsCaptcha,
    login
  } from '@/api/login'
  import {
    mapActions
  } from 'vuex'
  import Cookies from "js-cookie";
  export default {
    name: 'login',
    data: function() {
      return {
        checked: true,
        ruleForm: {
          phone: '',
          verifyCode: '',
          username: 'admin',
          password: '123456'
        },
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          verifyCode: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        btnTxt: '获取验证码',
        disabled: false,
        time: null,
        browserId: '123456',
        enterWay: true,
        cipherState: false,
        loginLoading: false,
      }
    },
    mounted() {},
    methods: {
      ...mapActions(['Login', 'Logout']),
      // 获取验证码
      getCode() {
        // 校验手机号码
        if (!this.ruleForm.phone) {
          //号码校验不通过
          this.$message({
            message: '请输入手机号',
            type: 'warning',
          });
          //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
        } else if (!/1[35789]\d{9}/.test(this.ruleForm.phone)) {
          // 失去焦点后自动触发校验手机号规则
          this.$message.error('手机号格式不正确');
        } else {
          getSmsCaptcha({
            phone: this.ruleForm.phone,
          }).then(res => {
            if (res.Code == 200) {
              this.$message({
                message: '验证码获取成功',
                type: 'success'
              });
              this.time = 60;
              this.disabled = true;
              //调用倒计时方法
              this.timer();
            } else {
              this.$message.error(res.Msg);
            }
          })
        }
      },
      // 倒计时
      timer() {
        if (this.time > 0) {
          this.time--;
          this.btnTxt = this.time + "s";
          setTimeout(this.timer, 1000);
        } else {
          this.time = null;
          this.btnTxt = "获取验证码";
          this.disabled = false;
        }
      },
      // 登录
      submitForm(formName) {
        const {
          Login
        } = this
        this.$refs[formName].validate(valid => {
          if (!valid) {
            this.$message.error('请完善登录表单');
            return false;
          } else {
            var param = {
              type: 1,
            }
            if (this.enterWay) {
              param.type = 1
              param.username = this.ruleForm.username
              param.password = this.ruleForm.password
            } else {
              param.type = 2
              param.phone = this.ruleForm.phone
              param.verifyCode = this.ruleForm.verifyCode
            }
            this.loginLoading = true
            Login(param).then((res) => {
              // 登录成功，跳转至首页
              localStorage.setItem('username', this.ruleForm.username);
              this.$router.push({
                path: '/'
              })
              this.loginLoading = false
            }).catch(() => {
              this.loading = false
              this.loginLoading = false
            })
          }
        });
      },
      // 切换登录方式
      getEnter(value) {
        this.enterWay = value
      },
      // 随机登录
      randomEntry() {
        localStorage.setItem('username', this.browserId);
        Cookies.set('T_uuid', this.browserId, {
          expires: 1
        })
        Cookies.set('T_tokey', this.browserId, {
          expires: 1
        })
        this.$router.push('/');
      },
      // 眼睛
      handleIconClick() {
        if (this.cipherState) {
          this.cipherState = false
        } else {
          this.cipherState = true
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .el-form-item__content .el-input-group {
    margin-top: 4px;
  }

  .el-checkbox {
    color: #fff;
  }

  .login-wrapper {
    height: 100%;
    width: 100%;
    min-width: 1200px;
  }

  .login-main {
    width: 400px;
    height: 370px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -260px;
    margin-top: -250px;

    .login_head {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
    }

    .iamge_logo {
      width: 40px;
      flex: none;
      margin-right: 10px;
    }

    .headline_login {
      color: rgb(255, 255, 255);
      text-align: center;
      font-weight: bold;
      font-size: 26px;
      margin-top: 25px;
      letter-spacing: 7px;
      margin-bottom: 20px;
    }
  }

  .el-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    width: 340px;
    height: 45px;
    border-radius: 32px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
  }

  ::v-deep .el-input-group__prepend {
    background-color: unset !important;
    border: unset !important;
  }

  ::v-deep .el-form-item__content {
    width: 100% !important;
  }

  ::v-deep .el-button--small.is-round {
    margin-top: 3px;
  }

  .icon_login {
    font-size: 16px;
    color: #fff;
  }

  .btnBox {
    width: 100%;
    overflow: hidden;
  }

  .login-btn {
    width: 340px;
    height: 45px;
    background: unset;
    outline: none;
    text-align: center;
    color: rgb(255, 255, 255);
    letter-spacing: 2px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid rgb(29, 144, 197);
    margin-bottom: 10px;
    cursor: pointer;
  }

  .tipBox {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding-bottom: 20px;

    .random_title {
      cursor: pointer;
      color: #fff;
      font-size: 15px;
      margin: 0px 34px;
    }
  }

  .textCenter {
    color: #ddd;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }

  .textCenter:hover {
    color: rgb(29, 144, 197);
  }

  .login-tip {
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }

  .text-right {
    text-align: right;
  }

  ::v-deep .login-main .el-input__inner {
    background-color: unset !important;
    border: unset !important;
    padding: 0 15px !important;
    font-size: 16px !important;
    color: #fff !important;
  }

  .no-autofill-pwd ::v-deep .el-input__inner {
    -webkit-text-security: disc !important;
  }

  .el-input__icon {
    cursor: pointer;
    font-size: 15px;
  }
</style>
