<template>
  <div>
    <el-card>
      <el-form label-position="left" :model="editUserForm" ref="editUserForm" :rules="rules">
        <el-form-item label="登录账号:" label-width="120px" prop="account">
          <el-input v-model="editUserForm.account"
                    clearable
                    disabled
                    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="editUserForm.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="editUserForm.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="editUserForm.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="editUserForm.status" label="0">正常</el-radio>
          <el-radio v-model="editUserForm.status" label="1">作废</el-radio>
        </el-form-item>
        <el-form-item style="margin-left: 100px;">
          <el-button type="primary" @click="editOuterUser" :loading="editBtnLoading">提交</el-button>
          <el-button type="primary" @click="cancel(true)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {editOuterUser, getUserById} from "@/api/system/user";

export default {
  name: "EddUserPage",
  data() {
    return {
      userId: null,
      editUserForm: {
        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'},
        ]
      },
      editBtnLoading: false
    }
  },
  mounted() {
    this.initForm()
    let userId = this.$route.params.userId
    if (userId != null) {
      //查询用户基本信息
      this.userId = userId;
      this.fetchUserDetail(userId)
    }
  },
  methods: {
    initForm() {
      this.editUserForm = {
        account: '',
        userName: '',
        password: '',
        confirmedPassword: '',
        status: '0'
      }
    },
    fetchUserDetail(userId) {
      getUserById(userId).then(res => {
        this.userDetail = res.result;
        this.editUserForm = {
          password: '',
          confirmedPassword: '',
          account: this.userDetail.account,
          userName: this.userDetail.userName,
          status: String(this.userDetail.status)
        }
      })
    },
    editOuterUser() {
      this.editBtnLoading = true
      let reg = /^[A-Za-z0-9]+$/
      if (this.editUserForm.password != '' &&!reg.test(this.editUserForm.password)){
        this.$message.error('密码大于8位，包含字母和数字')
        this.editBtnLoading=false
        return false
      }
      if (this.editUserForm.confirmedPassword != '' &&!reg.test(this.editUserForm.confirmedPassword)){
        this.$message.error('密码大于8位，包含字母和数字')
        this.editBtnLoading=false
        return false
      }

      //编辑
      this.$refs.editUserForm.validate((valid) => {
        if (valid) {
          editOuterUser(this.editUserForm, this.userId).then(res => {
            this.$message.success('修改外部用户成功')
            this.editBtnLoading = false
            this.cancel(true)
          }, err => {
            this.editBtnLoading = false
          })
        } else {
          this.editBtnLoading = 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>
