<template>
  <el-dialog v-model="addUserDialog" title="用户" :show-close="false" :close-on-press-escape="false"
    :close-on-click-modal="false">
    <el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
      <el-form-item label="账号" prop="userName">
        <el-input v-model="userInfo.userName" :disabled="dialogFlag !== 'add'" />
      </el-form-item>
      <el-form-item v-if="dialogFlag === 'add'" label="密码" prop="password">
        <el-input v-model="userInfo.password" />
      </el-form-item>
      <el-form-item label="姓名" prop="nickName">
        <el-input v-model="userInfo.nickName" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="userInfo.phone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userInfo.email" />
      </el-form-item>
      <el-form-item label="部门" prop="organizeId">
        <el-cascader v-model="userInfo.organizeId" style="width:100%" :options="props.organizeOptions" show-all-levels
          :props="{ multiple: false, checkStrictly: true, label: 'name', value: 'ID', disabled: 'disabled', emitPath: false }"
          :clearable="false" />
      </el-form-item>
      <el-form-item label="角色" prop="authorityId">
        <el-cascader v-model="userInfo.authorityIds" style="width:100%" :options="props.authOptions"
          :show-all-levels="false"
          :props="{ multiple: true, checkStrictly: true, label: 'authorityName', value: 'authorityId', disabled: 'disabled', emitPath: false }"
          :clearable="false" />
      </el-form-item>
      <el-form-item label="启用" prop="disabled">
        <el-switch v-model="userInfo.enable" inline-prompt :active-value="1" :inactive-value="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeAddUserDialog">取 消</el-button>
        <el-button type="primary" @click="enterAddUserDialog">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  register,
  setUserInfo
} from '@/api/user'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  authOptions: {
    type: Object,
  },
  organizeOptions: {
    type: Object
  }
})

const emit = defineEmits(['on-save', 'on-close'])

// 弹窗相关
const userInfo = ref({
  organizeId: 0,
  userName: '',
  password: '',
  nickName: '',
  phone: '',
  email: '',
  authorityId: '',
  authorityIds: [],
  enable: 1,
})

const rules = ref({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, message: '最低5位字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { min: 6, message: '最低6位字符', trigger: 'blur' }
  ],
  nickName: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' }
  ],
  authorityId: [
    { required: true, message: '请选择用户角色', trigger: 'blur' }
  ]
})
const userForm = ref(null)
const enterAddUserDialog = async () => {
  userInfo.value.authorityId = userInfo.value.authorityIds[0]
  userForm.value.validate(async valid => {
    if (valid) {
      const req = {
        ...userInfo.value
      }
      if (dialogFlag.value === 'add') {
        const res = await register(req)
        if (res.code === 0) {
          ElMessage({ type: 'success', message: '创建成功' })
          closeAddUserDialog()
          emit('on-save')
        }
      }
      if (dialogFlag.value === 'edit') {
        const res = await setUserInfo(req)
        if (res.code === 0) {
          ElMessage({ type: 'success', message: '编辑成功' })
          closeAddUserDialog()
          emit('on-save')
        }
      }
    }
  })
}

const addUserDialog = ref(false)
const closeAddUserDialog = () => {
  userForm.value.resetFields()
  userInfo.value.headerImg = ''
  userInfo.value.authorityIds = []
  addUserDialog.value = false
}

const dialogFlag = ref('add')

const openEdit = (row) => {
  console.log(row)
  if (row !== null && row.userName && row.userName !== '') {
    dialogFlag.value = 'edit'
    userInfo.value = JSON.parse(JSON.stringify(row))
  } else {
    dialogFlag.value = 'add'
    userInfo.value = {
      organizeId: row.organizeId
    }
  }
  addUserDialog.value = true
}

defineExpose({ openEdit })

</script>