<template>
  <div>
    <vxe-modal :value="isShow"
               show-footer
               title="角色"
               show-confirm-button
               :width="600"
               :height="600"
               esc-closable
               @input="e => $emit('update:isShow',e)">
      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
        <el-form-item label="姓名" prop="name" required>
          <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username" required>
          <el-input v-model="form.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
          <el-input v-model="form.password" type="password" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sortnumber">
          <el-input-number controls-position="right" :precision="0" v-model="form.sortnumber"></el-input-number>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { save } from "@/api/user"
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      form: {
        name: "",
        username: "",
        password: "",
        sortnumber: 0
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名" }
        ],
        username: [
          { required: true, message: "请输入用户名" }
        ],
        password: [
          { required: true, message: "请输入密码" },
          {
            validator: (rule, value, callback) => {
              const reg = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}');
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error("您的密码复杂度太低（密码中必须包含字母、数字、特殊字符）！"))
              }
            }
          }
        ],
      }
    }
  },
  methods: {
    submit () {
      this.$refs["elForm"].validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            await save(this.form)
            this.$message.success("新增成功")
            this.$emit('refresh')
            this.$emit('update:isShow',false)
            this.loading = false
            this.$refs["elForm"].resetFields()
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss">
</style>
