<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="orgForm"
    :rules="formRules"
    ref="orgRef"
    style="max-width: 80%"
  >
    <el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
      <el-tree-select v-model="orgForm.p_organization_id" :data="orgData" :props="treeProps" :render-after-expand="false" :filter-node-method="filterNode" :disabled="orgForm.level" :check-strictly="true" style="width: 80%;" />
      <el-form-item label="" style="padding-left: 16px">
        <el-checkbox v-model="orgForm.level" @change="isTop" label="顶级"/>
      </el-form-item>
    </el-form-item>
    <el-form-item label="政务机构名称" prop="name">
      <el-input v-model="orgForm.name" />
    </el-form-item>
    <el-form-item label="组织机构代码" prop="organization_code">
      <el-input v-model="orgForm.organization_code" />
    </el-form-item>
    <el-form-item label="组织介绍" prop="description">
      <el-input type="textarea" :rows="3" v-model="orgForm.description" />
    </el-form-item>
    <el-form-item label="组织附件" prop="logo">
       <bg-upload v-model="orgForm.attachment" customTips>
          <span>将文件拖到此处，或 点击上传</span>
        </bg-upload>
    </el-form-item>
  </el-form>
</template>

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

  const formRules = reactive({
    p_organization_id: [
      { required: true, message: '输入上级目录', trigger: 'blur' },
    ],
    name: [
      { required: true, message: '请输入机构名称', trigger: 'blur' },
    ],
    organization_code: [
      { required: true, message: '请输入组织机构代码', trigger: 'blur' },
    ],
  })

  const orgRef = ref(null)
  const emit = defineEmits(['action'])

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

  const clearForm = () => {
    if (!orgRef) return
    orgRef.value.resetFields()
  } 

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

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

  const filterNode = (value, data) => {
    
    return data.data_type === 0
  }

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

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

  onMounted(() => {
      
  })

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