<template>
  <div>
    <el-card>
      <el-form label-position="left" label-width="120px" :model="editUserForm" ref="editUserForm">
        <el-form-item label="登录账号:" label-width="120px" prop="account">
          <el-input v-model="editUserForm.account"
                    clearable
                    disabled
                    @change="changeAccount(editUserForm.account)"
                    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
                    disabled
                    size="small"
                    style="width: 200px;margin-left: 5px;"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色维护:">
          <el-checkbox-group v-model="editUserForm.roleIds">
            <el-checkbox v-for="role in roleList" :label="role.roleId" :key="role.roleId">{{ role.name }}</el-checkbox>
            <br/>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="用户部门:" label-width="120px" prop="status">
          <el-radio-group v-model="editUserForm.deptId">
            <el-radio v-for="dept in departments" :key="dept.id" :label="dept.id">{{ dept.name }}</el-radio>
          </el-radio-group>
        </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="editInnerUser" :loading="addBtnLoading">提交</el-button>
          <el-button type="primary" @click="cancel(true)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

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

export default {
  name: "EditInnerUserPage",
  data() {
    return {
      userId: null,
      editUserForm: {
        account: '',
        userName: '',
        status: '0',
        roleIds: [],
        deptId: 0
      },
      roleList: [
        {roleId: '6', name: '标注员(内部)'},
        {roleId: '5', name: '资源管理负责人 '},
        {roleId: '4', name: '分类管理负责人'},
        {roleId: '8', name:'标签配置负责人'},
        {roleId: '3', name: '任务分配负责人'},
        {roleId: '2', name: '人员管理负责人'}
      ],
      userDetail: {},
      addBtnLoading: false,
      departments: []
    }
  },
  mounted() {
    let userId = this.$route.params.userId
    this.initForm()
    if (userId != null) {
      //查询用户基本信息
      this.userId = userId;
      this.fetchUserDetail(userId)
    }
  },
  methods: {
    initForm() {
      this.editUserForm = {
        account: '',
        userName: '',
        status: '0',
        roleIds: [],
        deptId: 0
      }
      this.getInnerDepartments()
    },
    fetchUserDetail(userId) {
      getUserById(userId).then(res => {
        this.userDetail = res.result;
        this.editUserForm = {
          account: this.userDetail.account,
          userName: this.userDetail.userName,
          status: String(this.userDetail.status),
          roleIds: this.userDetail.roleIds,
          deptId: this.userDetail.deptId
        }
      })
    },
    changeAccount(account) {
      if (account == null || account.trim() === '') {
        this.$message.error("请输入账号")
        return false
      } else {
        getInnerUserInfo(account.trim()).then(res => {
          this.editUserForm.userName = res.result.displayName
        }, err => {

        })
      }
    },
    editInnerUser() {
      this.addBtnLoading = true

      //新增
      this.$refs.editUserForm.validate((valid) => {
        if (valid) {
          if (this.editUserForm.roleIds == null || this.editUserForm.roleIds == [] || this.editUserForm.roleIds.length < 1) {
            this.$message.error('用户角色不能为空')
            this.addBtnLoading = false
          }
          editInnerUser(this.editUserForm, this.userId).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}})
      })
    },
    getInnerDepartments() {
      getInnerDepartmentsApi().then(res => {
        this.departments = res.result
      })
    }
  }
}
</script>

<style scoped>

</style>
