<template>
  <div v-show="locked" class="backstretch">
    <div class="lock-panel">

      <img class="user-avatar" :src="avatar">
      <div class="user-name">{{ username }}</div>
      <div class="showtime">{{ hour }}:{{ min }}:{{ sec }}</div>
      <div class="lock" v-show="!showUnLockForm">
        <a @click="showUnlock" class="lock-btn">
          <p>UNLOCK</p>
        </a>
      </div>
      <transition name="fade">
        <div class="unlock" v-show="showUnLockForm">
          <el-form
            :inline="true"
            :model="loginForm"
            class="demo-form-inline"
            :rules="rules"
            ref="loginForm"
            autocomplete="off">
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password"
                        :readonly="readOnly"
                        placeholder="请输入密码"
                        class="password-input"
                        show-password
                        @focus="passFocus"
                        @keyup.enter.native="login" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="login" :loading="loading">登录
              </el-button>
            </el-form-item>
          </el-form>
          <div>
            <router-link to="/login" style="color: white;font-size: 14px;text-decoration:underline;">切换用户</router-link>
          </div>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {UserAction} from '@/store/actionType';

  export default {
    name: 'LockView', // 锁定页
    inject: ['reload'],
    computed: {
      ...mapGetters([
        'locked'
      ]),
      sec () {
        return this.zeroPadding(this.currTime.getSeconds())
      },
      min () {
        return this.zeroPadding(this.currTime.getMinutes())
      },
      hour () {
        return this.zeroPadding(this.currTime.getHours())
      }
    },
    data () {
      return {
        loginForm: {
          password: '',
          account: this.$store.state.user.account
        },
        readOnly: true,
        currTime: new Date(),
        showUnLockForm: false,
        username: this.$store.state.user.name,
        avatar: this.$store.state.user.avatar,
        rules: {
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        },
        loading: false
      }
    },
    created () {
      setInterval(() => {
        this.currTime = new Date()
      }, 1000)
    },
    methods: {
      zeroPadding (num) {
        return num < 10 ? '0' + num : num
      },
      showUnlock () {
        this.showUnLockForm = true
        this.passType = 'text'
      },
      login () {
        this.loading = true
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$store.dispatch(UserAction.LoginByAccount, this.loginForm).then(() => {
              this.loading = false
              this.$message.success('解除锁定成功')
              this.$store.dispatch(UserAction.UnLocked);
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      passFocus () {
        this.readOnly = false
      }
    }
  }
</script>

<style scoped>
  .showtime {
    width: 100%;
    color: #fff;
    font-size: 90px;
    display: inline-block;
    font-weight: 400;
    font-family: 'Ruda', sans-serif;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .backstretch {
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 2000;
    position: fixed;
    /*background-color: #f2f2f2;*/
    background-color: gray;
    background: url('http://demo.cssmoban.com/cssthemes4/bkt_1_dashgumfree/assets/img/login-bg.jpg') no-repeat center;
  }

  .lock {
    color: white;
    text-align: center;
    font-size: 60px;
  }

  .lock-panel {
    margin-bottom: 30px;
    margin-top: 180px;
    text-align: center;
    color: white;
  }

  .unlock {
    transition: 0.38s;
  }

  .password-input {
    display: inline-table;
    width: 200px;
    margin-right: 15px;
  }

  .lock p {
    font-size: 14px;
  }

  .lock-btn:hover {
    color: #48cfad;
  }

  .user-avatar {
    border-radius: 100px;
    width: 100px;
    height: 100px;
  }

  .user-name {
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
