<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" maxlength="300" show-word-limit />
    </el-form-item>
    <el-form-item label="组织附件" prop="logo">
       <bg-upload 
          v-model="orgForm.attachment" 
          customTips 
          :limit="3"
          :fileTypes="['zip','rar','doc','docx','xlsx','xls','png','jpg']" 
          :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 checkCode = (rule, value, callback) => {
  var reg = /^[a-zA-Z0-9]+$/
  if (!reg.test(value)) {
    callback(new Error("只能输入字母和数字"))
  }else {
    callback()
  }
}

const checkName = (rule, value, callback) => {
  var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/
  if (!reg.test(value)) {
    callback(new Error("只能输入字母和汉字"))
  }else {
    callback()
  }
}

const formRules = reactive({
  p_organization_id: [
    { required: true, message: '输入上级目录', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入机构名称', trigger: 'blur' },
    { max: 50, message: '机构名称最大长度为50位', trigger: 'blur' },
    { validator: checkName, trigger: 'blur' }
  ],
  organization_code: [
    { required: true, message: '请输入组织机构代码', trigger: 'blur' },
    { max: 18, message: '组织机构代码最大长度为18位', trigger: 'blur' },
    { validator: checkCode, 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>