<template>
  <el-container>
    <el-main>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="ruleForm.username"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="ruleForm.name"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item label="密码" prop="pass">
              <el-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="3" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                v-model="ruleForm.checkPass"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="3" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="角色">
              <el-checkbox-group v-model="ruleForm.roles" size="mini">
                <el-checkbox
                  v-for="role in allRoles"
                  :key="role.id"
                  border=""
                  :label="role"
                >{{ role.description }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="8" :lg="18" :xl="11">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="ruleForm.remark" type="text" />
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="8" :lg="2" :xl="5" />
        </el-row>

        <el-row :gutter="10">
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
          <el-col :xs="24" :sm="22" :md="22" :lg="18" :xl="11">
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
              >创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="0" :sm="1" :md="1" :lg="2" :xl="5" />
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        username: '',
        name: '',
        password: '',
        checkPass: '',
        remark: '',
        roles: []
      },
      user: {
        username: '',
        name: '',
        password: '',
        remark: '',
        sysRoles: []
        // createTime:'',
        // updateTime:'',
        // locked:'',
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 4,
            max: 12,
            message: '账号长度在4-12个字符之间',
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            min: 2,
            max: 5,
            message: '姓名长度在2-5个字符之间',
            trigger: 'blur'
          }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' },
          {
            min: 4,
            max: 12,
            message: '密码长度在4-12个字符之间',
            trigger: 'blur'
          }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
          {
            min: 4,
            max: 12,
            message: '密码长度在4-12个字符之间',
            trigger: 'blur'
          }
        ],
        remark: [
          { required: false, message: '', trigger: 'blur' },
          {
            min: 0,
            max: 255,
            message: '备注不能多于255个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    allRoles() {
      return this.$store.getters.allRoles
    }
  },
  created() {
    console.log('created')
    this.$store.dispatch('role/getAllRoles')
    // this.$store.dispatch('authority/getAllAuthorities')
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          console.log('ruleForm', this.ruleForm)
          this.user.username = this.ruleForm.username
          this.user.password = this.ruleForm.password
          this.user.remark = this.ruleForm.remark
          this.user.sysRoles = this.ruleForm.roles
          this.user.name = this.ruleForm.name

          this.$store
            .dispatch('user/createUser', this.user)
            .then((res) => {
              console.log('create user res0', res)
              if (res.data.success) {
                this.$message({ message: '用户添加成功!!!', type: 'success' })
                this.$refs[formName].resetFields()
              } else {
                this.$message.error('用户添加失败!!!')
              }
            })
            .catch((error) => {
              console.log('error', error)
              this.$message.error('用户添加失败!!!')
            })
        } else {
          console.log('error submit!!')
          this.$message.error('请认真填写!')
          return false
        }
      })
    },
    resetForm(formName) {
      console.log('roles', this.$store.getters.allRoles)
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
