<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="orgForm"
    :rules="formRules"
    ref="orgRef"
  >
    <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" 
          :check-strictly="true" 
          :disabled="orgForm.level"
          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 
          :limit="3" 
          :fileTypes="['doc','docx','xls','xlsx','pdf','jpg','jpeg','png','zip','rar']" 
          :otherInfo="'最多可上传三个附件，可上传zip，rar，doc，docx，xlsx，xls，png，jpg，可上传营业执照和相关协议文件等'"
        >
          <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) => {
    Object.assign(orgForm, 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) => {
    orgForm.p_organization_id = data ? ' ' : ''; //空格绕过表单非空校验
  }

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

  onMounted(() => {
      
  })

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