<template>
  <div class="border container">
    <div>
      <!-- <template :key="index" v-for="(item, index) in parentNode.group"> -->
      <div class="relative">
        <process-condition-container :level="level+1" :node="parentNode" :root="root"></process-condition-container>
        <div class="containerTools absolute">
          <el-button size="mini" @click="levelDown(parentNode)"
            >{{$lang.down}}</el-button
          >
          <el-button
            size="mini"
            @click="levelUp(parentNode)"
            >{{$lang.up}}</el-button
          >
          <el-button size="mini" @click="delProcessNode(parentNode.id)"
            >{{$lang.delete}}</el-button
          >
        </div>
      </div>
      
    </div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";

// const group = () => import('@/components/process/editor/condition/group.vue')
import { groupType } from "@/enums/process";
import SwtionProcess from "@/plugins/process";
import { condition, process } from "@/model/Process";
@Options({})
export default class group extends Vue {
  @Prop({
    default: new condition(),
    type: condition,
  })
  public parentNode!: ICondition;
  @Prop({
    default: new process(),
    type: process,
  })
  public root!: IProcess;
  @Prop({
    default: 1,
    type: Number,
  })
  public level!: number;
  created() {
    // console.log(this.node);
    // this.loadEleOption();
  }
  public swtionProcess = new SwtionProcess();
  public addJudge() {
    this.swtionProcess.addJudge(this.parentNode, groupType.condition);
  }
  public delProcessNode(id: string) {
    this.swtionProcess.delProcessNode(id, this.root);
  }
  public levelUp(node: ICondition) {
    this.swtionProcess.leveConditionlUp(node,this.root);
  }
  public levelDown(parentNode: ICondition) {
    this.swtionProcess.levelJudgeDown(parentNode);
  }
}
</script>
<style lang="scss" scoped>
.containerTools {
  right: 0px;
  top: -30px;
  // display: none;
}
.container:hover .containerTools {
  display: block;
}
.border {
  border: 1px solid #f0f0f0;
}
</style>
