<template>
  <el-dialog
    top="4%"
    :show-close="false"
    modal-class="my-modal"
    class="flow-chart-dialog"
    :width="'30%'"

    :close-on-click-modal="false"
     destroy-on-close

    :modal="false"
    :append-to-body="false" :model-value="dialogVisible && currentOpNode && Object.keys(currentOpNode).length > 0" title="节点属性"
  >
    <diy-el-form ref="refForm" v-model:model-form="forms " :forms="flowCharDialogForm" />
    <template #footer>
      <span class="dialog-footer">

        <el-button @click="handleClose" >重置</el-button>
        <el-button type="primary" @click="confirm" >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {flowCharDialogForm} from "@/data/all-forms";
import {ref, watch} from "vue";
import DiyElForm from "@/components/common/DiyElForm.vue";

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

    },
    currentOpNode:{

    }
  },
  setup(props,{emit}) {
    const forms = ref({

    })
    const refForm = ref(null)
    function confirm() {
      if (!props.currentOpNode){
        return
      }
      refForm.value.refEl.validate(isValid => {
        if (isValid){
          emit('changeNode',forms.value)
        }
      })

    }
    watch(()=>props.currentOpNode,(val) => {
      if (!val) {
        return
      }

      forms.value['type'] = val.getData().type

      forms.value['name'] = val.getAttrs()?.label?.text || val.getAttrs()?.text?.text
    },{
      deep:true
    })
    function handleClose() {
      emit("update:dialogVisible", false)
    }
    return {
      handleClose,
      flowCharDialogForm,
      forms,
      confirm,
      refForm

    }
  }

}
</script>

<style scoped lang="scss">

</style>
