<!-- 添加修改用户弹窗 -->
<script lang="ts" setup name="SystemUserAddDialog">
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { addInfo } from './user-interface'
import comTreeSelect from './selecTree.vue'
import { toTreeList } from '@/utils/structure'
import { addUser, updateUser } from '@/api/system/user'
import { getRoleTreeList } from '@/api/system/role'
import { getDeptTreeList } from '@/api/system/dept'
import { getDictByCode } from '@/api/system/dict'
import { RSAencrypt } from '@/utils/security'
const emits = defineEmits(['resetData'])
const ruleFormRef = ref<FormInstance>()
const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
const dialogStatus = ref<string>('')// 对话框类型：create,update
const userForm = reactive<addInfo>({
  id: '', // 编号
  account: '', // 账号
  name: '', // 姓名
  email: '', // 邮箱，/
  phone: '', // 手机号，
  deptId: '', // 组织机构编号
  roleid: '', // 角色
  password: '', // 密码
  rePassword: '', // 重复密码
  birthday: '',
  sex: '', // 性别
})// 表单
const deptProps = reactive({
  parent: 'pid', value: 'id', label: 'name', children: 'children',
})
const roleProps = reactive({
  parent: 'pid', value: 'id', label: 'name', children: 'children',
})
const roleTreeList = ref([])// 角色树列表数据
const deptTreeList = ref([])
const sexList = ref<{ id: string; value: string; name: string }[]>()// 性别选项
const textMap = reactive<{ update: string; create: string }>({
  update: '编辑用户',
  create: '新增用户',
})// 表头显示标题
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  }
  else {
    if (userForm.rePassword !== '') {
      ruleFormRef.value?.validateField('rePassword')
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('重复密码不能为空'))
  }
  else if (value !== userForm.password) {
    callback(new Error('两次输入密码不一致!'))
  }
  else {
    callback()
  }
}
const rules = reactive({
  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
  name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
  rePassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '组织机构必选', trigger: ['blur', 'change'] }],
  roleid: [{ required: true, message: '角色必选', trigger: ['blur', 'change'] }],
  email: [{ required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
  phone: [{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }],
})// 前端校验规则
const roleName = ref<string>()// 角色名，展示用
const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态

// 加载角色树形下拉菜单
const fetchRoleTree = () => {
  getRoleTreeList().then((res) => {
    if (res.data.list) { // 将列表转树结构
      roleTreeList.value = toTreeList(res.data.list, '0', true)
    }
  })
}
// 加载组织机构树形下拉
const fetchDeptTree = () => {
  getDeptTreeList().then((res) => {
    if (res.data) { // 将列表转树结构
      deptTreeList.value = toTreeList(res.data, '0', true)
    }
  })
}
// 重置表单
const resetForm1 = () => {
  userForm.account = ''
  userForm.id = ''
  userForm.name = ''
  userForm.email = ''
  userForm.phone = ''
  userForm.deptId = ''
  userForm.sex = ''
  userForm.birthday = ''
  userForm.roleid = ''
  userForm.password = ''
  userForm.rePassword = ''
}
// 新增数据
const createData = () => {
  ruleFormRef.value?.validate(async (valid) => {
    const userForm1 = JSON.parse(JSON.stringify(userForm))
    userForm1.password = await RSAencrypt(userForm1.password)
    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
    if (valid) {
      btnLoading.value = true
      addUser(userForm1).then((response) => {
        ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'info',
        }).then(() => {
          btnLoading.value = false
          resetForm1()
          nextTick(() => {
            ruleFormRef.value?.clearValidate()
          })
        }).catch(() => {
          dialogFormVisible.value = false
          emits('resetData')
        })
      }).catch(() => { // 异常情况，loading置为false
        btnLoading.value = false
      })
    }
  })
}
// 修改数据
const updateData = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      btnLoading.value = true
      updateUser(userForm).then((response) => {
        ElMessage.success('修改成功')
        dialogFormVisible.value = false
        emits('resetData')
      }).catch(() => { // 异常情况，loading置为false
        btnLoading.value = false
      })
    }
  })
}

// 保存数据
const saveData = () => {
  if (dialogStatus.value === 'update') {
    updateData()
  }
  else if (dialogStatus.value === 'create') {
    createData()
  }
}

const cancel = () => {
  dialogFormVisible.value = false
  // resetForm1()
  ruleFormRef.value?.resetFields()
  emits('resetData')
}
// 初始化对话框
const initDialog = (dialogStatusflag: string, row: addInfo = {
  id: '', // 编号
  account: '', // 账号
  name: '', // 姓名
  email: '', // 邮箱，
  phone: '', // 手机号，
  deptId: '', // 组织机构编号
  roleid: '', // 角色
  password: '', // 密码
  rePassword: '', // 重复密码
  birthday: '',
  sex: '', // 性别
}) => {
  getDictByCode('sex').then((response) => {
    sexList.value = response.data
  })
  fetchRoleTree()
  fetchDeptTree()
  dialogStatus.value = dialogStatusflag
  dialogFormVisible.value = true
  btnLoading.value = false
  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
    userForm.account = row.account
    userForm.id = row.id
    userForm.name = row.name
    userForm.email = row.email
    userForm.phone = row.phone
    userForm.deptId = row.deptId
    userForm.sex = row.sex
    userForm.birthday = row.birthday
    userForm.roleid = row.roleid
    roleName.value = row.roleName
    resetForm1()
    nextTick(() => {
      ruleFormRef.value?.clearValidate()
    })
  }
  else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
    userForm.account = row.account
    userForm.id = row.id
    userForm.name = row.name
    userForm.email = row.email
    userForm.phone = row.phone
    userForm.deptId = row.deptId
    userForm.sex = row.sex
    userForm.birthday = row.birthday
    userForm.roleid = row.roleid
    roleName.value = row.roleName
    delete userForm.password
    delete userForm.rePassword
  }
}
const title = computed(() => {
  const props = Object.keys(textMap)
  const keyValues = props.map((el: string) => {
    return [el, el]
  })
  const keys: object = Object.fromEntries(keyValues)
  return textMap[dialogStatus as keyof typeof keys]
})
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" width="700" :title="title" append-to-body>
    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账号" prop="account">
            <el-input
              v-model.trim="userForm.account" :disabled="dialogStatus === 'update'" type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="userForm.name" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="dialogStatus === 'create'" :gutter="20">
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="userForm.password" type="password" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重复密码" prop="rePassword">
            <el-input v-model.trim="userForm.rePassword" type="password" placeholder="必填" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
            <com-tree-select
              v-model="userForm.roleid" :options="roleTreeList" placeholder="选择角色"
              :tree-props="roleProps"
            />
          </el-form-item>
          <el-form-item v-else label="角色">
            <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织机构" prop="deptId">
            <!-- <dept-select v-model="userForm.deptId" :dept-show="true" :default-expanded-keys="[userForm.roleid]"
              placeholder="请选择组织机构" /> -->
            <com-tree-select
              v-model="userForm.deptId" :options="deptTreeList" placeholder="选择组织机构"
              :tree-props="deptProps"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="userForm.email" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input v-model.trim="userForm.phone" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer footer">
      <el-button :loading="btnLoading" type="primary" @click="saveData">
        保存
      </el-button>
      <el-button @click="cancel">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: flex-end;
}
</style>