<template>
  <div>
    <el-button @click="showCalcDialog">{{$lang.calc}}</el-button>
    <el-dialog
      :title="$lang.calcList"
      v-model="calcDialog"
      width="30%"
      :destroy-on-close="true"
    >
      <el-tree
        :data="calcList"
        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="saveCalc">{{$lang.save}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import calcOptions from "@/components/process/editor/components/condition/control/plugins/calc";
import { returnToolType } from "@/enums/process";
@Options({})
export default class process extends Vue {
  private calcOption = new calcOptions();
  public calcDialog = false;
  public treeName = "calcTree";
  public calcList = new Array();
  created() {
    this.calcList = this.calcOption.loadCalcOption();
  }
  public showCalcDialog() {
    this.calcDialog = true;
  }
  public closeDialog() {
    this.calcDialog = false;
  }
  public saveCalc() {
    this.$emit(
      "addTag",
      (this.$refs[this.treeName] as any).getCurrentNode(),
      returnToolType.calc
    );
    this.closeDialog();
  }
}
</script>
<style lang="scss" scoped>
</style>
