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

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