<template>
    <div>
      <div class="login">
        <div class="login-box">
          <h3>注册新用户</h3>
          <input type="text" v-model="registerInfo.username" placeholder="请输入账号">
          <input type="password" v-model="registerInfo.password" placeholder="请输入密码">
          <input type="password" v-model="registerInfo.passwordSame" placeholder="请再次输入密码">
          <button @click="submitRegister">注册</button>
          <router-link to="/">返回首页</router-link>
          <div class="info">
            <p>主办: 包头市人民政府办公厅　　承办: 山西腾狮科技有限公司</p>
            <p>如有问题，咨询电话: 12345</p>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isLoading">
        <img src="@/assets/images/loading.gif" alt="">
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import axios from 'axios'
import url from '@/assets/public/url'
import Footer from '@/assets/components/Footer'
export default {
    name: 'Register',
    components: {
      Footer
    },
    data () {
        return {
          url: url.registerUrl,
          registerInfo: {
            username: '',
            password: '',
            passwordSame: ''
          },
          isLoading: false
        }
    },
    methods: {
      submitRegister: function () {
        var self = this
        self.isLoading = true
        axios.post(self.url + 'app/register/default', self.registerInfo).then(function (res) {
          console.log(res)
          if (res.status == '200') {
            self.isLoading = false
            self.$layer.msg('注册成功')
            setTimeout(function () {
              self.$router.push('/login')
            }, 1500)
          }
        })
      }
    },
    mounted: function () {
      var self = this

    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.login
  padding 120px 0
  background url("~@/assets/images/login-bg.jpg") no-repeat center
  background-size 100% 100%
  .login-box
    width 630px
    padding 60px 70px
    box-sizing border-box
    background #fff
    margin 0 auto
    box-shadow 0 0 10px #fff
    h3
      font-size 24px
      text-align center
      color #0d1c28
      margin-bottom 40px
    input
      width 100%
      height 50px
      border 1px solid #c4c4c4
      padding 0 10px
      box-sizing border-box
      margin-bottom 25px
      font-size 16px
    button
      cursor pointer
      width 100%
      height 50px
      color #fff
      font-size 16px
      background #4293f4
      border none
      outline none
    a
      display block
      margin-top 25px
      font-size 16px
      color #4293f4
    .info
      padding-top 30px
      text-align center
      border-top 1px solid #EEE
      margin-top 25px
      p
        line-height 40px
        font-size 14px
        color #999
</style>
