<template>
  <div>
    <el-card>
      <el-form label-position="left" :model="addUserForm" ref="addUserForm" :rules="rules">
        <el-form-item label="登录账号:" label-width="120px" prop="account">
          <el-input v-model="addUserForm.account"
                    clearable
                    size="small"
                    style="width: 200px;margin-left: 5px;"
                    placeholder="请输入登录账号"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" label-width="120px" prop="userName">
          <el-input v-model="addUserForm.userName"
                    clearable
                    size="small"
                    style="width: 200px;margin-left: 5px;"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="输入密码:" label-width="120px" prop="password">
          <el-input v-model="addUserForm.password"
                    show-password
                    clearable
                    size="small"
                    style="width: 200px;margin-left: 5px;"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码:" label-width="120px" prop="confirmedPassword">
          <el-input v-model="addUserForm.confirmedPassword"
                    show-password
                    clearable
                    size="small"
                    style="width: 200px;margin-left: 5px;"
                    placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item label="是否作废:" label-width="120px" prop="status">
          <el-radio v-model="addUserForm.status" label="0">正常</el-radio>
          <el-radio v-model="addUserForm.status" label="1">作废</el-radio>
        </el-form-item>
        <el-form-item style="margin-left: 100px;">
          <el-button type="primary" @click="addOuterUser" :loading="addBtnLoading">提交</el-button>
          <el-button type="primary" @click="cancel(true)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {addOuterUser} from "@/api/system/user";

export default {
  name: "AddUserPage",
  data() {
    return {
      userId: null,
      addUserForm: {
        account: '',
        userName: '',
        password: '',
        confirmedPassword: '',
        status: '0'
      },
      userDetail: {},
      rules: {
        account: [
          {required: true, message: '登录账号不能为空,长度为6-15', trigger: 'blur', min: 5, max: 16},
          {pattern: /^[A-Za-z0-9]+$/, message: '包含字母和数字'}
        ],
        userName: [
          {required: true, message: '姓名不能为空,长度为1-20', trigger: 'blur', min: 1, max: 20},
        ],
        status: [
          {required: true, message: '是否作废不能为空', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '大于8位，包含字母和数字', trigger: 'blur', min: 9, max: 16},
          {pattern: /^[A-Za-z0-9]+$/, message: '大于8位，包含字母和数字'}
        ],
        confirmedPassword: [
          {required: true, message: '大于8位，包含字母和数字', trigger: 'blur', min: 9, max: 16},
          {pattern: /^[A-Za-z0-9]+$/, message: '大于8位，包含字母和数字'}
        ]
      },
      addBtnLoading: false
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      this.addUserForm = {
        account: '',
        userName: '',
        password: '',
        confirmedPassword: '',
        status: '0'
      }
    },
    addOuterUser() {
      this.addBtnLoading = true

      //新增
      this.$refs.addUserForm.validate((valid) => {
        if (valid) {
          addOuterUser(this.addUserForm).then(res => {
            this.$message.success('新增外部用户成功')
            this.addBtnLoading = false
            this.cancel(true)
          }, err => {
            this.addBtnLoading = false
          })
        } else {
          this.addBtnLoading = false
          return false;
        }
      });

    },
    cancel(val) {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.push({name: 'UserManagement', params: {flush: val}})
      })
    }
  }
}
</script>

<style scoped>

</style>
