<template lang="">
  <div>
    <el-dialog
      v-model="addChildVisible"
      title="新建部门"
      width="500"
      align-center
    >
      <el-form
        ref="departmentFormRef"
        style="max-width: 600px"
        :model="depForm"
        status-icon
        :rules="depRules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <div class="label">
            <div>部门名称</div>
            <div class="red">*</div>
          </div>
          <el-input
            v-model="depForm.name"
            autocomplete="on"
            placeholder="请输入部门名称"
          />
        </el-form-item>
        <el-form-item prop="departmentNo">
          <div class="label">
            <div>部门ID</div>
          </div>
          <el-input
            v-model="depForm.departmentNo"
            autocomplete="on"
            placeholder="请输入部门 ID，若不输入则自动生成"
          />
        </el-form-item>
        <el-form-item prop="parentId">
          <div class="label">
            <div>上级部门</div>
            <div class="red">*</div>
          </div>
          <el-select
            v-model="depForm.parentId"
            clearable
            filterable
            placeholder="请选择上级部门"
            :disabled="isSelect"
          >
            <el-option
              v-for="item in depList"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="describeStr">
          <div class="label">
            <div>部门描述</div>
          </div>
          <el-input
            v-model="depForm.describeStr"
            autocomplete="on"
            placeholder="请输入部门描述"
            type="textarea"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addChildCancel">取消</el-button>
          <el-button type="info" @click="conAddDepart"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive,defineEmits } from 'vue'
import { addDepartment, getDepartmentName } from '@/api/department'
import { ElMessageBox } from 'element-plus'
import { defineProps } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
const emit = defineEmits(['getList'])
const userStore = useUserStore()

const addChildVisible = ref(false)
const addChildHandle = () => {
  let departmentId = userStore.addDepartmentId
  console.log(1111)
  console.log(departmentId)
  addChildVisible.value = true
  isSelect.value = false
  getDepName()
  if (departmentId != null) {
    isSelect.value = true
    depForm.parentId = departmentId
  }
}
const depForm = reactive({
  name: '',
  departmentNo: '',
  parentId: '',
  describeStr: '',
  type: 1,
})
const depList = ref([])
const isSelect = ref(false)
const depRules = {
  name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
}

const departmentFormRef = ref(null)
const conAddDepart = () => {
  departmentFormRef.value.validate(valid => {
    if (valid) {
      console.log(111)
      console.log(depForm)
      addDepartment(depForm)
        .then(res => {
          if (res.data.code == 200) {
            ElMessageBox.alert('添加成功', '提示', {
              confirmButtonText: '确定',
              type: 'success',
            })
            resetForm()
            addChildVisible.value=false;
            emit('getList')
          }
        })
        .catch(err => {
          console.log(err)
        })
    } else {
      return false
    }
  })
}
const addChildCancel = () => {
  addChildVisible.value = false
  resetForm()
}
const resetForm = () => {
  depForm.name = ''
  depForm.departmentNo = ''
  depForm.parentId = ''
  depForm.describeStr = ''
}
// 获取部门名称

const getDepName = () => {
  getDepartmentName().then(res => {
    depList.value = res.data.data
  })
}

defineExpose({
  addChildHandle,
})
</script>
<style lang="scss" scoped>
.label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #1f2329;
  .red {
    color: #ff3535;
  }
}
</style>
