<template>
 <el-dialog

   :modal="true"
   :close-on-click-modal="false"
   :close-on-press-escape="false"
   destroy-on-close

   :title="title"
   :model-value="dialogVisible"

   :before-close="handleClose"

 >
   <div class="form">
     <diy-el-form :span="24" ref="formRef" :forms="formConfig" v-model:model-form="forms"/>
   </div>
   <template #footer>
     <el-button :icon="SuccessFilled" @click="operationTable">确定</el-button>
     <el-button :icon="Close" @click="handleClose">关闭</el-button>
   </template>
 </el-dialog>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {moduleDetailDialogFormBt, moduleDetailDialogFormInterface} from "@/data/all-forms";
import {Close, SuccessFilled} from "@element-plus/icons-vue";
import {uuidv4} from "@/unit/code";
import {isValid} from "js-base64";

export default {
  name: "ModuleManageDetailEditTableDialog",
  computed: {
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  components: {DiyElForm},
  props:{
    dialogVisible:{

    },
    title:{

    },
    modelType:{

    },
    operationObj:{

    },
    dialogOperationType:{

    }
  },
  setup(props,{emit}){
    const formRef = ref(null)
    const forms = ref({})
    onBeforeMount(() =>{
      if (props.dialogOperationType !== 'add'){
        forms.value = {
          ...props.operationObj
        }
      }else {
        forms.value.UUID = uuidv4()
        forms.value.CODE = uuidv4()
      }
    })
    function operationTable() {
      formRef.value.refEl.validate(isValid => {
        if (isValid){
          emit('operationTable',forms.value)
        }
      })

    }
    const formConfig = ref({...props.modelType === 'btn'?moduleDetailDialogFormBt:moduleDetailDialogFormInterface})
    function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      formConfig,
      forms,
      operationTable,
      formRef
    }
  }
}
</script>

<style scoped lang="scss">
.form{
  padding: 0 15%;
}
</style>
