<template>
  <div id="login">
    <div class="login-con">
      <div class="login_top">
        <div class="login_title">四维看看·管理后台</div>
      </div>
      <div class="login_center">
        <div class="login_center_con">
          <div class="login_center_left">
            <div class="login_center_left_con">
              <img src="@/assets/images/svg_logo/logo.png" alt="">
              <p style="font-size: 60px;font-weight: 700;">陪你看世界</p>
              <p style="font-size:40px;letter-spacing: 2px;">SEE THE WORLD WITH YOU</p>
              <p>数字中国·数字万物</p>
            </div>
          </div>
          <div class="login-con-right">
            <div class="login-con-right_con">
              <div class="login-title">
                <span style="color: #333">后台登录</span>
              </div>
              <div style="margin-top: 50px;">
                <el-form label-position="top" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                  <el-form-item prop="username">
                    <el-input type="username" placeholder="账号" v-model="ruleForm2.username" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item prop="pass" id='no-bottom'>
                    <el-input type="password" placeholder="密码" @keyup.enter.native="submitForm('ruleForm2')" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                  </el-form-item>
                  <!-- <el-form-item>
                    <el-checkbox>记住密码（在公共场所电脑请勿勾选）</el-checkbox>
                  </el-form-item> -->
                </el-form>
              </div>
              <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="submitForm('ruleForm2')">登录</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'login',
  data () {
    var validateUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else if (value.length < 3) {
        callback(new Error('用户名不合法'))
      } else {
        callback()
      }
    }

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }

    return {
      fullscreenLoading: false,
      ruleForm2: {
        username: '',
        pass: ''
      },
      rules2: {
        username: [
          { validator: validateUser, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      param: {
        user: 'userName',
        pw: 'password'
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login()
        } else {
          this.$alert('请填写正确信息', '提示', {
            confirmButtonText: '确定',
            callback: action => {}
          })
          return false
        }
      })
    },

    async login () {
      let param = {
        [this.param.user]: this.ruleForm2.username,
        [this.param.pw]: this.ruleForm2.pass
      }

      let data = await this.$http.post('/sso/manager/login', param)
      this.fullscreenLoading = true

      if (data.code === 0) {
        this.$http.setToken(data.data.token)
        this.$router.replace({name: 'Home'})
      } else {
        this.$alert('登录失败', '提示', {
          confirmButtonText: '确定',
          callback: action => {}
        })
      }
    }
  },
  mounted () {
    let token = sessionStorage.getItem('token')
    if (token) {
      this.$http.setToken('token', token)
      this.$router.replace({name: 'Home'})
    }
  }
}

</script>
<style lang="css" scoped>
@import url('./style.css');
</style>
