<template lang="html">
  <div class="userAddVue pop-up">
      <div class="title">
        新建用户
        <i class="close" @click="close()"></i>
      </div>
      <div class="main">
        <p>
          <span>用户名</span>:
          <input type="text" name="" v-model="username" spellcheck="false">
        </p>
        <p>
          <span>密码</span>:
          <input type="text" name="" v-model="password" spellcheck="false">
        </p>
        <p>
          <span>等级</span>:
          <input type="number" name="" v-model="lv" spellcheck="false">
        </p>
      </div>
      <div class="btns">
        <button type="button" class="btn3" @click="submit()">创建</button>
        <button type="button" class="btn3" @click="close()">取消</button>
      </div>
  </div>
</template>

<script>
import { bus, requestSavePerson } from '@/vuex/request.js'

export default {
  data () {
    return {
      username: '',
      password: '',
      lv: ''
    }
  },
  props: ['userInfo'],
  mounted () {
    // 弹框弹出动画
    window.$(() => {
      bus.$emit('pop-up-show', '.userAddVue.pop-up')
    })
  },
  methods: {
    // 关闭弹窗&动画
    close () {
      window.$(() => {
        bus.$emit('pop-up-close', '.userAddVue.pop-up')
        setTimeout(() => {
          this.$emit('close')
        }, 500)
      })
    },
    submit () {
      if (this.username === '' || this.password === '' || this.lv === '') {
        bus.$emit('alert', '存在未填写项！')
        return false
      }
      if (this.lv.search(/[^\d]/g) !== -1) {
        bus.$emit('alert', '等级只能为整数！')
        return false
      }
      let data = {
        username: this.username,
        password: this.password,
        lv: this.lv,
        creator: this.userInfo.username
      }
      requestSavePerson({}, data, (response) => {
        if (response.data) {
          if (response.data.state) {
            bus.$emit('alert', response.data.message)
            this.$emit('update')
            this.$emit('close')
          } else {
            bus.$emit('alert', response.data.message)
          }
        } else {
          bus.$emit('alert', response + '.')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userAddVue{
  width: 500px;
  .main{
    padding: 50px 0;
    p{
      text-align: center;
      margin-bottom: 20px;
      span{
        display: inline-block;
        width: 50px;
      }
      input{
        width: 300px;
        height: 31px;
        background-color: #2F363E;
        border: 1px solid #505A64;
        background-image: none;
        text-align: left;
      }
    }
  }
}
</style>
