<template>
  <div>
    <el-form
      inline
      :model="form"
      :rules="rules"
      ref="form"
      class="form-wrap dialog-info"
      label-width="100px">

      <el-form-item
        verify
        class="is-required"
        label="账号"
        prop="loginName">
        <el-input v-model="form.loginName"></el-input>
      </el-form-item>

      <el-form-item
        verify
        class="is-required"
        label="所属角色"
        prop="roleIds">
        <el-select
          value-key="id"
          v-model="form.roleIds"
          multiple
          collapse-tags
          placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="密码"
        prop="password">
        <el-input
          v-model="form.password"
          type="password"></el-input>
      </el-form-item>

      <el-form-item
        label="确认密码"
        prop="checkPass">
        <el-input
          v-model="form.checkPass"
          type="password"></el-input>
      </el-form-item>
    </el-form>

    <div class="dialog-btn-wrap">
      <el-button @click="reset">重置</el-button>
      <el-button
        @click="submit"
        type="primary">保存</el-button>
    </div>
  </div>

</template>

<script>
import { addAccount } from '@/api/systemSetting/account'
import { getRoleList } from '@/api/systemSetting/role'
import { verifyPhone } from '@/utils/validate'

export default {
  data () {
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!passwordRegex.test(value)) {
        callback(new Error('密码必须包含至少8个字符，至少一个大写字母，一个小写字母和一个数字'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }

    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      roleList: [],
      form: {
        loginName: '',
        password: '',
        checkPass: '',
        roleIds: []
      },
      rules: {
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    verifyPhone,
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addAccount()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addAccount () {
      addAccount(this.form).then(res => {
        this.$message.success('添加成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    },
    getRoleList () {
      getRoleList({ pageSize: -1, pageNum: 1 }).then(res => {
        this.roleList = res.data.records || []
      })
    }
  },
  watch: {
    visible (val) {
      // 获取角色列表
      val && this.getRoleList()
      // 重置表单
      this.reset()
    }
  }
}
</script>
<style scoped>
.btn-wrap{
  padding-right: 20px;
}
</style>
