<template>
  <div id="login">
    <div class="banner">
      <span>崇明数字农业智能管控系统</span>
    </div>
    <div class="login-panel">
      <span class="lp-title">欢迎登录</span>
      <el-form :model="formData" class="lp-form" :rules="formRules" ref="form">
        <el-form-item prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入用户名">
            <template #prefix>
              <i class="input-prefix icon-username"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" placeholder="请输入登录密码">
            <template #prefix>
              <i class="input-prefix icon-password"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="vCode">
          <el-input v-model="formData.vCode" placeholder="验证码">
            <template #prefix>
              <i class="input-prefix icon-vcode"></i>
            </template>
            <template #suffix>
              <canvas @click="changeValidCode" id="validCode" class="valid-code"></canvas>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button class="lp-btn" @click="handleLogin">登录</el-button>
    </div>
    <div class="copyright">
      <span>所属单位：崇明区农业农村委员会</span>
    </div>
  </div>
</template>

<script>
import { drawPic } from "../../utils/valid-code"
import { Login } from '../../services/user'
import { setCookie } from '@/utils/cookie'
// import { Base64 } from "js-base64";

export default {
  name: 'loginPage',
  data() {
    return {
      formData: {
        userName: '',
        password: '',
        vCode: '',
        vCodeReal: ''
      },
      formRules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        vCode: [{
          required: true, trigger: 'blur',
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入验证码'));
            } else {
              let reg = new RegExp(`^${this.formData.vCodeReal}$`, "i");
              if(!reg.test(value)) {
                callback(new Error('验证码错误'));
                this.changeValidCode()
              } else {
                callback()
              }
            }
          }
        }],
      }
    }
  },
  mounted() {
    this.formData.vCodeReal = drawPic()
  },
  methods: {
    changeValidCode() {
      this.formData.vCodeReal = drawPic()
    },
    handleLogin() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          // let Base64 = require("js-base64").Base64
          Login(
            this.formData.userName,
            // Base64.encode(this.formData.password),
            this.formData.password
          ).then(res => {
            if(res.code==200&&res.msg==='ok') {
              setCookie('cmnw_token', res.data, 3)
              this.$message({type: 'success', message: '登录成功'})
              this.$router.push({
                name: 'Deck'
              })
            } else {
              this.$message({type: 'error', message: '登录失败'})
              this.$refs['form'].resetFields()
              this.changeValidCode()
            }
          })
        }
        
      })
    }
  }
}

</script>

<style lang="scss" scoped>
#login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../../assets/imgs/home/bg-login.jpg') no-repeat;
  background-size: cover;
  background-position: 50% 62%;
  user-select: none;

  .banner {
    position: absolute;
    top: calc(50% - 200px);
    width: 100%;
    height: 400px;
    background: rgba($color: #F7FFFE, $alpha: 0.75);
    z-index: 1;
    &>span {
      position: absolute;
      left: 4%;
      top: 50%;
      transform: translateY(-50%);
      letter-spacing: 20px;
      font-size: 160px;
      font-family: YSBTH;
      font-weight: 400;
      color: #008B7F;
      text-shadow: 3px 3px 5px rgba(0,64,59,0.2);
      -webkit-text-stroke: 0.2px #FFFFFF;
    }
  }

  .login-panel {
    position: absolute;
    top: calc(50% - 620px);
    right: 11%;
    width: 1080px;
    height: 1240px;
    box-sizing: border-box;
    padding: 136px 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #F7FFFE;
    z-index: 2;

    .lp-title {
      font-size: 72px;
      font-weight: bold;
      color: #205859;
    }
    .lp-form {
      height: 504px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      ::v-deep .el-form-item {
        &.is-error .el-input__inner {
          border-color: rgb(255, 72, 72) !important;
        }
        .el-input {
          width: 820px;
          height: 108px;
          background: rgba(255,255,255,0.3);
          .el-input__inner {
            padding: 0 30px 0 100px;
            height: 100%;
            font-size: 44px;
            color: #595959;
            border: 1px solid #008C75;
          }
        }
        .el-form-item__error {
          font-size: 28px;
          margin-top: 10px;
        }
      }
      .input-prefix {
        display: block;
        width: 55px;
        height: 55px;
        margin: 26px 0 0 20px;
        &.icon-username {
          background: url('../../assets/imgs/home/icon-username.png');
          background-size: contain;
        }
        &.icon-password {
          background: url('../../assets/imgs/home/icon-password.png');
          background-size: contain;
        }
        &.icon-vcode {
          background: url('../../assets/imgs/home/icon-vcode.png');
          background-size: contain;
        }
      }
      .valid-code {
        width: 300px;
        height: 100px;
        margin-top: 4px;
        cursor: pointer;
      }
    }
    
    .lp-btn {
      width: 540px;
      height: 140px;
      background: #00998C;
      border-radius: 70px;
      font-size: 52px;
      color: #FFFFFF;
      &:hover {
        filter: brightness(1.1);
      }
    }
  }

  .copyright {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(0deg, rgba(3,0,0,0.49), rgba(0,0,0,0));
    box-sizing: border-box;
    padding-left: 11vw;
    padding-bottom: 27px;
    span {
      font-size: 36px;
      color: #FFFFFF;
    }
  }
}
</style>