<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>
          <Input v-model="psd" placeholder="请输入密码,回车解锁" type="password" size="large" @on-enter="_handleLogin">
          <Button slot="append" icon="ios-unlock" @click="_handleLogin"></Button>
          <Button slot="append" icon="ios-log-out" @click="_logout"></Button>
          </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: `${global.staticURL}/img/loginUser.jpg`,
      passwdError: false,
      pass: false
    }
  },
  mounted() {
    this._getUser()
  },
  beforeDestroy() {
    console.log('ffdddd====', this.$route)
  },
  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({
        content: '解锁密码错误，请重新输入...',
        duration: 2
      })
      this.passwdError = true
      setTimeout(() => {
        this.passwdError = false
      }, 1000)
    },
    // 解锁成功
    _resultSuccess() {
      // 解锁以后要跳转的界面
      this.pass = true
      setTimeout(() => {
        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.$Modal.confirm({
        title: '提示',
        content: '<p>确定要退出系统？</p>',
        onOk: () => this._ok()
      })
    },
    // 确定
    _ok: async function() {
      const result = await sysSso.logout()
      if (result) {
        global.logout()
        window.location.href = global.ssoURL
      } else {
        this.$Message.error('退出失败，请重试!')
      }
    }
  }
}
</script>
