<template>
  <div class="login-wrapper">
    <form class="login-form" @submit.prevent>
      <div class="form-group">
        <label for="userName">用户名：</label>
        <input id="userName" v-model="formData.username" class="form-control" type="text" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="passWord">密码：</label>
        <input id="passWord" v-model="formData.password" class="form-control" type="password" placeholder="请输入密码">
      </div>
      <button class="btn btn-success login-btn" @click.stop="login">登录</button>
      <button class="btn btn-default reset-btn" @click="resetForm">重置</button>
    </form>
  </div>
</template>

<script>
    import ajax from '@/common/ajax/ajax'

    export default {
      name: 'SignUp',
      data () {
        return {
          formData: {
            username: '',
            password: ''
          }
        }
      },
      methods: {
        login () {
          ajax.ajaxApi('/logina', 'post', {
            username: this.formData.username,
            password: this.formData.password
          }).then((response) => {
            localStorage.setItem('user', JSON.stringify(response))
            this.$store.dispatch('setUser', response)
            this.$router.push({path: '/'})
          })
        },
        resetForm () {
          this.formData.username = ''
          this.formData.password = ''
        }

      }
    }
</script>

<style lang="scss" scoped>
    .login-wrapper {
      position: fixed;
      width: 50%;
      top: 50px;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      text-align: center;
    }
    .login-form {
      margin-top: 30px;
      .form-group {
        height: 50px;
        line-height: 50px;
        label {
          display: inline-block;
          width: 100px;
          text-align: right;
          margin: 0 8px 0 8px;
        }
        input {
          border-radius: 4px;
          height: 30px;
          border: 1px solid #bfcbd9;
          padding: 3px 10px;
          font-size: inherit;
          outline: none;
          box-sizing: border-box;
          line-height: 1;
          transition: border-color .2s cubic-bezier(.645,.045,.355,1);
          &:focus{
            outline: none;
            border-color: #20a0ff;
          }
        }
      }
      button {
        height: 30px;
        width: 50px;
        margin: 10px 5px;
      }
    }
</style>

