<template>
  <div class="lock-container">
    <div class="lock-container-before pull-height">
      <div class="lock-form animated bounceInDown">
        <div
          class="animated"
          :class="{'shake':passwdError,'bounceOut':pass}"
          style="text-align: center"
        >
          <Avatar :src="loginUser" size="large" />
          <p>{{ username }}</p>
          <el-input
            v-model="psd"
            placeholder="请输入密码,回车解锁"
            type="password"
            @keyup.enter.native="_handleLogin"
          >
            <el-button
              slot="append"
              icon="el-icon-d-arrow-right"
              @click="_logout"
            />
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Store from 'store2'
import global from '../api/config'
import { sysSso } from '../api'
/**
 * 锁屏效果--------手动设置的锁屏密码（用登录密码来解锁）
 */
export default {
  layout: 'blank-layout',
  data() {
    return {
      psd: '',
      username: '',
      loginUser: '',
      passwdError: false,
      pass: false
    }
  },
  mounted() {
    this._getUser()
  },
  methods: {
    _getUser() {
      const user = global.getUserInfo()
      this.username = user.username
      if (user.avatar === undefined) {
        this.loginUser = global.staticURL + '/img/loginUser.jpg'
      } else {
        this.loginUser =
          global.baseURL + '/base/v1/company/logo?key=' + user.avatar
      }
    },
    // 解锁失败
    _resultError() {
      this.$message.error('解锁密码错误，请重新输入...')
      this.passwdError = true
      setTimeout(() => {
        this.passwdError = false
      }, 1000)
    },
    // 解锁成功
    _resultSuccess() {
      // 解锁以后要跳转的界面
      this.pass = true
      setTimeout(() => {
        this.$store.commit('clearLock')
        this.$router.replace(Store.session('formPath'))
      }, 100)
    },
    // 解锁
    _handleLogin: async function() {
      const result = await sysSso.validPsd(this.psd)
      if (result) {
        this._resultSuccess()
      } else {
        this._resultError()
      }
    },
    // 退出
    _logout: function() {
      this.visible = false
      this.$confirm('确定要退出系统?', '提示', { type: 'warning' }).then(() => {
        this._ok()
      })
    },
    // 确定
    _ok: async function() {
      const result = await sysSso.logout()
      if (result) {
        global.logout()
        // window.location.href = global.ssoURL
      } else {
        this.$message.error('退出失败，请重试!')
      }
    }
  }
}
</script>
