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