<template>
  <div class="scale">
    <el-button icon="Plus" size="mini" @click.stop="scale += 10" :disabled="scale >= 150" circle></el-button>
    <span>{{ scale }}%</span>
    <el-button icon="Minus" size="mini" @click.stop="scale -= 10" :disabled="scale <= 40" circle></el-button>
  </div>
    <div :style="'transform: scale('+ scale / 100 +');'">
      <div id="processTree">
        <process-tree ref="processTree" mode="design" id-name="processTree" @selectedNode="nodeSelected"/>
      </div>
    </div>


  <el-drawer :title="selectedNode.name" v-model="showConfig"
             :modal-append-to-body="false"
             :size="selectedNode.type === 'CONDITION' ? '600px':'500px'"
             direction="rtl">
    <template #header>
      <div>
        <el-input v-model="selectedNode.name" size="medium" v-show="showInput"
                  style="width: 300px" @blur="showInput = false"></el-input>
        <el-link v-show="!showInput" @click="showInput = true" style="font-size: medium">
          <i class="el-icon-edit" style="margin-right: 10px"></i>
          {{ selectedNode.name }}
        </el-link>
      </div>
    </template>
    <template #default>
      <div slot="title">
      </div>
      <div class="node-config-content">
        <node-config v-if="showConfig" @initRender="initRender"/>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
import NodeConfig from '@/views/workflow/process/config/NodeConfig.vue'
import {computed, ref, defineExpose} from 'vue';
import {useProcessStore} from '@/stores/processStore.js'

const processStore = useProcessStore()
const scale = ref(100)
const showConfig = ref(false)
const processTree = ref()
const showInput = ref(false)
const selectedNode = computed(() => {
  return processStore.getSelectedNode()
})

const nodeSelected = (node) => {
  showConfig.value = true
}
const initRender = () => {
  nextTick(() => {
    processTree.value.init()
  })
}

const validate = () => {
  return processTree.value.validateProcess()
}


defineExpose({
  validate,
  initRender
})

</script>
