<template>
  <div>
    <el-button @click="showProcessDialog">{{$lang.process}}</el-button>
    <el-dialog
      :title="$lang.processList"
      v-model="processDialog"
      width="30%"
      :destroy-on-close="true"
    >
      <el-tree
        :data="processList"
        node-key="id"
        :ref="treeName"
        :props="{
          value: 'id',
          label: 'name',
        }"
      >
      </el-tree>
      <span class="dialog-footer">
        <el-button @click="closeDialog()">{{$lang.cancel}}</el-button>
        <el-button type="primary" @click="saveProcess">{{$lang.save}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import processOptions from "@/components/process/editor/components/condition/control/plugins/process";
import { returnToolType } from "@/enums/process";
@Options({})
export default class process extends Vue {
  private procOptions = new processOptions();
  public processDialog = false;
  public treeName = "processTree";
  public processList = new Array();
  created() {
    this.processList = this.procOptions.loadProcessOption();
  }
  public showProcessDialog() {
    this.processDialog = true;
  }
  public closeDialog() {
    this.processDialog = false;
  }
  public saveProcess() {
      //console.log((this.$refs[this.treeName] as any).getCurrentNode())
    this.$emit(
      "addTag",
      (this.$refs[this.treeName] as any).getCurrentNode(),
      returnToolType.process
    );
    this.closeDialog();
  }
}
</script>
<style lang="scss" scoped>
</style>
