<template>
  <el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle" style="max-width: 400px;">
    <el-form v-if="dialogFormVisible" ref="elFormRef" :inline="true" :model="form" :rules="rules" label-position="top"
      label-width="85px">
      <el-form-item label="部门名称" prop="name" style="width:90%">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父节点ID" style="width:90%">
        <el-cascader v-model="form.parentId" style="width:100%" :disabled="true" :options="props.organizeOptions"
          :props="{ checkStrictly: true, label: 'name', value: 'ID', disabled: 'disabled', emitPath: false }"
          :show-all-levels="false" filterable />
      </el-form-item>
      <el-form-item label="排序" prop="sort" style="width:90%">
        <el-input-number v-model.number="form.sort" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  addOrganize,
  updateOrganize,
  getOrganizeById,
} from '@/api/organize'

defineOptions({
  name: 'OrganizeEdit',
})
const props = defineProps({
  organizeOptions: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['on-save', 'on-close'])
// ------ form 相关 ------
const dialogTitle = ref('')
const isEdit = ref(false)
const dialogFormVisible = ref(false)
const rules = reactive({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ],
})
const elFormRef = ref(null)
const form = ref({
  ID: 0,
  parentId: '',
  name: '',
  sort: '',
})
const initForm = () => {
  elFormRef.value.resetFields()
  form.value = {
    ID: 0,
    parentId: '',
    name: '',
    sort: '',
  }
}

// 关闭弹窗
const handleClose = () => {
  initForm()
  dialogFormVisible.value = false
}

// 确认弹窗
const handleSubmit = async () => {
  elFormRef.value.validate(async valid => {
    if (valid) {
      let res
      if (isEdit.value) {
        res = await updateOrganize(form.value)
      } else {
        res = await addOrganize(form.value)
      }
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: isEdit.value ? '编辑成功' : '添加成功!'
        })
        emit('on-save')
      }
      initForm()
      dialogFormVisible.value = false
    }
  })
}

const openEdit = async (row) => {
  console.log(row)
  if (row !== null && row.name && row.name !== '') {
    isEdit.value = true
    dialogTitle.value = '修改-' + row.name
    const res = await getOrganizeById({ ID: row.ID })
    form.value = res.data.organize
  } else {
    isEdit.value = false
    dialogTitle.value = '新增'
    form.value = {
      parentId: row.organizeId
    }
  }
  dialogFormVisible.value = true
}

defineExpose({ openEdit })

</script>