<template>
<el-dialog
  :modal="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  title="保存模板"
  :append-to-body="true"
  :model-value="dialogVisible"
  width="40%"
  :before-close="handleClose"

>
  <diy-el-form :span="12" :forms="formConfig" v-model:model-form="forms"/>
  <template #footer>
    <el-button :icon="Select" @click="$emit('confirm',forms)">保存</el-button>
    <el-button :icon="Close" @click="handleClose">关闭</el-button>
  </template>
</el-dialog>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {Close, Refresh, Select} from "@element-plus/icons-vue";

export default {
  name: "FlowCharNameDialog",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },
    Refresh() {
      return Refresh
    }
  },
  components: {DiyElForm},
  props:{
    dialogVisible:{

    },
    currentOpObj:{

    }
  },
  setup(props,{emit}){
    const formConfig = ref({
      formItemsArr:[
        {type:'input',modelValue:'CATALOG_NAME',label:'名称'}
      ],
      formAttrs:{
        'label-width':'10em'
      }
    })
    const forms = ref({

    })
    onBeforeMount(() => {
      if (props.currentOpObj){
        forms.value = {
          ...props.currentOpObj
        }
      }
    })
    function handleClose() {
      emit('update:dialogVisible',false)

    }
    return {
      handleClose,
      forms,
      formConfig
    }
  }

}
</script>

<style scoped lang="scss">

</style>
