<template>
<el-dialog
  :modal="true"

  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close
  title="单位新增"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
  <diy-el-form :span="10" ref="formRef" v-model:model-form="forms" :forms="processStateTableDetailDialogFormConfig"/>
 <template #footer>
   <el-button @click="handleClose">关闭</el-button>
   <el-button type="info" @click="editTableInfo">提交</el-button>
 </template>
</el-dialog>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref, watch} from "vue";
import {processStateTableDetailDialogForm} from "@/data/all-forms";
import {useRootStore} from "@/stores/useStore";
import {isValid} from "js-base64";

export default {
  name: "AddUnitDialog",
  components: {DiyElForm},
  props:{
    dialogVisible:{},
    currentDialogObj:{

    },
    dialogOperationType:{}
  },
  setup(props,{emit}){
    function editTableInfo() {
      let findAllTd= processStateTableDetailDialogFormConfig.value.formItemsArr.find(i => i.modelValue === 'DATASOURCE_UNIT_TYPE')
      formRef.value.refEl.validate(isValid => {
        if (isValid){
          emit('editTableInfo',{
            ...forms.value,
            td:findAllTd.options.find(i =>i.value && i.value === forms.value.DATASOURCE_UNIT_TYPE)?.label.toUpperCase()
          })
        }
      })

    }
    const formRef = ref(null)

    const forms = ref({})
    const processStateTableDetailDialogFormConfig = ref({...processStateTableDetailDialogForm()})
    watch(() => forms.value['DATASOURCE_UNIT_TYPE'],(val) => {
      let val2 = val || ''
      let findAdd = processStateTableDetailDialogForm().formItemsArr.find(i => i.modelValue === 'DATASOURCE_UNIT_TYPE').options.find(it => it.value === val2)?.forms || []
      processStateTableDetailDialogFormConfig.value.formItemsArr = processStateTableDetailDialogForm().formItemsArr.slice(0,2).concat(findAdd)
    },{
     immediate:true
    })

   onBeforeMount(() => {
     if (props.dialogOperationType!=='add'){
       forms.value = {
         ...forms.value,
         ...props.currentDialogObj
       }
     }
   })
    function handleClose(){
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      forms,
      processStateTableDetailDialogFormConfig,
      editTableInfo,
      formRef
    }
  }
}
</script>

<style scoped lang="scss">

</style>
