<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="orgForm"
    :rules="formRules"
    ref="orgRef"
    style="max-width: 80%"
  >
    <el-form-item label="上级目录" prop="parent">
      <el-input v-model="orgForm.parent" style="width: 80%"/>
      <el-form-item label="" style="padding-left: 16px">
        <el-checkbox v-model="orgForm.level" label="顶级"/>
      </el-form-item>
    </el-form-item>
    <el-form-item label="政务机构名称" prop="orgName">
      <el-input v-model="orgForm.orgName" />
    </el-form-item>
    <el-form-item label="组织机构代码" prop="code">
      <el-input v-model="orgForm.code" />
    </el-form-item>
    <el-form-item label="组织介绍" prop="desc">
      <el-input type="textarea" :rows="3" v-model="orgForm.desc" />
    </el-form-item>
    <el-form-item label="组织附件" prop="logo">
       <bg-upload v-model="orgForm.file" customTips>
          <span>将文件拖到此处，或 点击上传</span>
        </bg-upload>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'

const orgForm = reactive({
  parent: '',
  level: '',
  orgName: '',
  code: '',
  desc: '',
  desc: '',
  file: ''
})

const formRules = reactive({
  parent: [
    { required: true, message: '输入上级目录', trigger: 'blur' },
  ],
  orgName: [
    { required: true, message: '请输入机构名称', trigger: 'blur' },
  ],
  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);
}

onMounted(() => {
    
})

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