<template>
  <div class="login center_in">
    <div class="card_login_form">
      <el-image style="height: 500px;margin-right: 150px;" :src="require('@/assets/images/login1.png')"></el-image>
      <div class="form_login">
        <div style="display: flex;align-items: center;justify-content: center;">
          <el-image style="height: 35px;width: 35px;margin-right: 10px;"
            :src="require('@/assets/logo3.png')"></el-image>
          <h3>智配送安全追溯AI管理平台</h3>
        </div>
        <el-form :model="form" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm"
          @keyup.enter.native="getLogin">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <div style="display: flex;">
              <el-input v-model="form.captcha" placeholder="请输入验证码"></el-input>
              <div style="margin-left: 5px;cursor: pointer;" @click="refreshCode">
                <identifyingCode :identify-code="identifyCode" :contentWidth="140"></identifyingCode>
              </div>
            </div>
          </el-form-item>
          <div class="card_check">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <el-form-item>
            <div style="width: 100%;">
              <el-button style="width: 100%;" type="primary" :loading="loginLoading" @click="getLogin">立即登录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import identifyingCode from '@/components/identifyingCode'
  import {
    mapActions
  } from 'vuex'
  export default {
    name: 'LoginView',
    components: {
      identifyingCode
    },
    data() {
      return {
        form: {
          name: '',
          password: '',
          captcha: ''
        },
        checked: false,
        loginLoading: false,
        identifyCode: "", // 验证码
        identifyCodes: '1234567890', //验证码随机范围
        rules: {
          name: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }, ],
          captcha: [{
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }],
        }
      }
    },
    created() {
      this.getuserpwd()
    },
    mounted() {
      this.refreshCode()
    },
    methods: {
      ...mapActions(['Login', 'Logout']),
      getLogin() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.identifyCode != this.form.captcha) {
              this.refreshCode()
              this.$message({
                message: '请输入正确的验证码',
                type: 'error'
              });
            } else {
              const {
                Login
              } = this
              this.loginLoading = true
              Login({
                type: 1,
                username: this.form.name,
                password: this.form.password,
              }).then((res) => {
                if (res.code == 200) {
                  if (this.checked) {
                    let arrList = JSON.stringify(this.form)
                    localStorage.setItem("userData", arrList);
                  }
                  // 登录成功，跳转至首页
                  this.$router.push({
                    path: '/'
                  })
                } else {
                  this.refreshCode()
                }
                this.loginLoading = false
              }).catch(() => {
                this.loginLoading = false
                this.refreshCode()
              })
            }
          } else {
            return false;
          }
        });
      },
      getuserpwd() {
        const arrList = localStorage.getItem('userData')
        if (arrList) {
          const arrData = JSON.parse(arrList)
          this.form.name = arrData.name
          this.form.password = arrData.password
          this.checked = true
        }
      },
      // 验证码点击刷新方法
      refreshCode() {
        this.identifyCode = ''
        // 4位验证码可以根据自己需要来定义验证码位数
        this.makeCode(this.identifyCodes, 4)
      },
      // 随机数
      randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 随机生成验证码字符串
      makeCode(data, len) {
        for (let i = 0; i < len; i++) {
          this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
        console.log("随机验证码:", this.identifyCode)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    height: 100vh;
    background-color: #f3f7f9;
    background: url(../assets/images/login.png) no-repeat;
    background-color: #ebebea;
    background-position: 0 0;
    background-size: 62% 100%;
    text-align: center;
  }

  .card_login_form {
    display: flex;
    align-items: center;
    // width: 800px;
    // height: 450px;
    // box-shadow: 0 0 20px 0 rgba(12, 1, 4, .05);
    // background: #fff;
    // border-radius: 10px;
    overflow: hidden;
  }

  .card_login_form ::v-deep .el-input__inner {
    color: #606266;
    border: 1px solid #DCDFE6;
    background-color: #FFF;
  }

  .card_login_form ::v-deep .el-input.is-active .el-input__inner,
  .card_login_form ::v-deep .el-input__inner:focus {
    border-color: #409EFF;
  }

  .form_login {
    width: 400px;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    justify-content: center;
    background-color: #fff;
    border-radius: 10px;
  }

  .card_form {
    margin-bottom: 20px;
  }

  .card_form_code {
    display: flex;
  }

  .image_card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex: 1;
    background: linear-gradient(to bottom, #46c4bd, #cdefed);
  }

  .triangle {
    position: absolute;
    left: 0;
    width: 0px;
    height: 0px;
    border-width: 0px 0px 450px 60px;
    border-style: solid;
    border-left-color: #fff;
    border-bottom-color: transparent;
  }

  .card_check {
    margin-bottom: 20px;
    display: flex;
  }
</style>
