<template>
  <div>
    <div class="scale">
      <el-button icon="Plus" size="mini" @click="scale += 10" :disabled="scale >= 150" circle></el-button>
      <span>{{ scale }}%</span>
      <el-button icon="Minus" size="mini" @click="scale -= 10" :disabled="scale <= 40" circle></el-button>
    </div>
  </div>
  <div style="margin-top: 40px">
    <div :style="'transform: scale('+ scale / 100 +');'">
      <div id="previewProcess">
        <process-tree :mode="mode" ref="processTreePreview" id-name="previewProcess"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'

const processTreePreview = ref()
const scale = ref(100)
const props = defineProps({
  mode: {
    type: String,
    default: 'preview'
  }
})

nextTick(()=>{
  processTreePreview.value.init()
})
</script>
