<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="directoryForm"
    :rules="directoryFormRules"
    ref="directoryRef"
    style="max-width: 80%"
  >
    <el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
      <el-tree-select 
          v-model="directoryForm.p_organization_id" 
          :data="orgData" 
          :props="treeProps" 
          :render-after-expand="false" 
          :check-strictly="true" 
          :disabled="directoryForm.level"
          style="width: 80%;" />
      <el-form-item label="" style="padding-left: 16px">
        <el-checkbox v-model="directoryForm.level" @change="isTop" label="顶级"/>
      </el-form-item>
    </el-form-item>
    
    <el-form-item label="名称" prop="name">
      <el-input v-model="directoryForm.name" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance, nextTick } from 'vue'
  const props = defineProps({
  formType: {
      type: String,
      default: 'create', //false 新建 true 编辑
    },
  });
  const { proxy } = getCurrentInstance()
  const { $axios,$message } = proxy

  const directoryForm = reactive({
    p_organization_id: '',
    name: '',
    level: false
  })

  const directoryFormRules = reactive({
    p_organization_id: [
      { required: true, message: '请输入上级目录', trigger: 'blur' },
    ],
    name: [
      { required: true, message: '请输入名称', trigger: 'blur' },
    ],
  })
  const directoryRef = ref(null)
  const emit = defineEmits(['action'])

  const submitForm = async () => {
    if (!directoryRef) return
    await directoryRef.value.validate((valid, fields) => {
      if (valid) {
        emit('action', directoryForm)
      } else {
        emit('action',null)
      }
    })
  }
  const clearForm = () => {
    if (!directoryRef) return
    directoryRef.value.resetFields()
  } 

  const setForm = (data) => {
    Object.assign(directoryForm, data);
  }

  const orgData = ref([])
  const treeProps = {
    label: 'name',
    children: 'Child',
    value: 'organization_id',
    // disabled: 'disabled'
  }
  const getOrgTree = () => {
    $axios.get(`/apaas/system/v5/org/tree`)
      .then((res) => {
      if (res.data.code == 200) {
          const orgDataTemp =  res.data.data || []
          orgDataTemp.shift()
          orgData.value = filterOrg(orgDataTemp);
          
      }else {
          $message.error(res.data.data)
      }
      })
  }

  const filterOrg = (data) => {
      if(data.length > 0) {
          data.forEach(item => {
            item.disabled = item.data_type === 0 ? false : true;
            if(item.Child){
              filterOrg(item.Child)
            }else {
              return  
            }
        })
      }
    return data;
  }

  const isTop = (data) => {
    directoryForm.p_organization_id = data ? ' ' : ''; //空格绕过表单非空校验
  }

  onBeforeMount(() =>{
    getOrgTree()
  })

  onMounted(() => {
    
  })

  defineExpose({ submitForm, clearForm, setForm })
</script>