<template>
  <div class="login" v-loading="load">
    <div class="loginbox">
      <img :src="logo" alt="" />
      <el-row>
        <el-col :span="14">
          <img class="logol" :src="logol" alt="" />
        </el-col>
        <el-col :span="10">
          <el-form ref="form" class="form" :model="form" :rules="rules">
            <h2 class="input">欢迎登录</h2>
            <el-form-item class="input" prop="name">
              <el-input
                v-model="form.name"
                @keyup.enter.native="loginClick('form')"
                placeholder="请输入用户名"
              ></el-input>
              <div class="name icon"></div>
            </el-form-item>
            <el-form-item class="input" prop="password">
              <el-input
                v-model="form.password"
                @keyup.enter.native="loginClick('form')"
                type="password"
                placeholder="请输入密码"
              ></el-input>
              <div class="pwd icon"></div>
            </el-form-item>
            <el-form-item class="but input">
              <el-button @click="loginClick('form')">确认登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// import CanvasNest from 'canvas-nest.js'
import logo from '@/assets/img/login/logo.jpg'
import logoL from '@/assets/img/login/login-left.jpg'
import { getAllGroups2, getNavAll3 } from '@/api/system_manage'
import { getLoginMessage } from '@/api/app'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('app')
export default {
  data() {
    return {
      load: false,
      logo: logo,
      logol: logoL,
      config: {
        color: '0,255,255',
        count: 99,
        opacity: 0.7,
        zIndex: 999
      },
      form: {
        name: '',
        password: ''
      },
      rules: {
        name: [{ required: true, message: '请输入账户', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapMutations([
      'setUserInfo',
      'setNavRecords',
      'servemenuList',
      'tabList'
    ]),
    // 登录事件
    loginClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.load = true
          const formData = new FormData()
          formData.append('username', this.form.name)
          formData.append('password', this.form.password)
          getLoginMessage(formData)
            .then((rt) => {
              console.log(rt.status)
              if (rt.status === '200') {
                const data = {
                  id: this.form.name,
                  displayname: this.form.name
                }
                // 将用户信息存储再vuex中
                this.setUserInfo(data)
                // 获取导航权限
                this.getNavigationMenu()
                this.load = false
              } else if (rt.status === '401') {
                this.$message.error('用户名密码错误')
                this.load = false
              }
            })
            .catch((er) => {
              this.load = false
            })
        }
      })
    },
    // 获取导航权限
    getNavigationMenu() {
      var that = this
      getAllGroups2().then((res) => {
        if (!res) return false
        getNavAll3(res.data[0].id).then((rt) => {
          that.servemenuList = rt.data
          // 跳转至首页
          that.$router.push({ path: '/' })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  min-width: 1360px;
  height: 100%;
  min-height: 625px;
  background: url(../../assets/img/login/beji.jpg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  .loginbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 850px;
    & > img {
      width: 25%;
      margin-bottom: 20px;
    }
    .logol {
      width: 100%;
      height: 335px;
    }
    .form {
      text-align: center;
      background: #fff;
      height: 335px;
      padding: 10px 30px;
      box-sizing: border-box;
    }
    .logo {
      width: 64%;
      margin-bottom: 57px;
    }
    h2 {
      font-size: 24px;
      text-align: center;
      padding-bottom: 32px;
      color: #333333;
      font-weight: 500;
    }
    .input {
      width: 309px;
      position: relative;
    }
    .input /deep/ .el-input__inner {
      height: 42px;
      line-height: 42px;
      // border: 0;
      background-color: #909396;
      text-indent: 64px;
      font-size: 14px;
      color: #fff;
      // border-radius: 40px;
      padding: 0;
    }
    // .input /deep/ .el-input__inner:focus {
    //   background-color: rgb(49, 153, 228);
    // }
    .input /deep/ .el-input__inner::-webkit-input-placeholder {
      color: #fff;
    }
    .input /deep/ .el-input__inner::-moz-placeholder {
      color: #fff;
    }
    .input /deep/ .el-input__inner:-moz-placeholder {
      color: #fff;
    }
    .input /deep/ .el-input__inner:-ms-input-placeholder {
      color: #fff;
    }
    .but /deep/ .el-button {
      width: 100%;
      height: 44px;
      color: white;
      border-radius: 0;
      margin-top: 30px;
      border: 0;
      background: #2d42af;
      // background: -webkit-gradient(
      //   linear,
      //   left top,
      //   right top,
      //   from(#329de2),
      //   to(#3cb9c1)
      // );
      // background: -webkit-linear-gradient(left, #329de2, #3cb9c1);
      // background: -o-linear-gradient(left, #329de2, #3cb9c1);
      // background: linear-gradient(to right, #329de2, #3cb9c1);
    }
    a {
      color: #b1b1b1;
    }
    .icon {
      width: 42px;
      height: 20px;
      border-right: 1px solid #fff;
      position: absolute;
      top: 11px;
      left: 10px;
      background-size: 18px;
    }
    .name {
      background: url(../../assets/img/login/user.png) 10px no-repeat;
    }
    .pwd {
      background: url(../../assets/img/login/pass.png) 10px no-repeat;
    }
    .forget-pwd {
      text-align: right;
      padding-right: 38px;
    }
  }
}
</style>
