<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"

>
  <div class="form"><diy-el-form :span="12" ref="formRef" v-model:model-form="forms" :forms="dataDictionaryTabDialogForm"/></div>
  <template #footer>
    <el-button :icon="SuccessFilled" @click="editDataDictionary">确定</el-button>
    <el-button @click="handleClose" :icon="Close">取消</el-button>
  </template>

</el-dialog>
</template>

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

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

    },

    currentDialogOpObj:{

    },
    dialogOperationType:{

    }



  },
  setup(props,{emit}){
    function editDataDictionary() {
      console.log('编辑数据字段')
      formRef.value.refEl.validate(isValid => {
        if (isValid){
          emit('editDataDictionary',forms.value)
        }
      })
    }
    onBeforeMount(() => {
      forms.value = {
        ...props.currentDialogOpObj
      }
    })
    const forms = ref({})
    const formRef =ref(null)
    function handleClose() {
      emit('update:dialogVisible',false)

    }
    return {
      handleClose,
      forms,
      formRef,
      dataDictionaryTabDialogForm,
      editDataDictionary

    }
  }
}
</script>

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