<template>
  <div class="padding-20 container">
    <template v-for="(item, index) in node.group" :key="index">
      <div class="relative" v-if="item.type == groupType.judge">
        <process-condition-control
          :node="item.data"
          ref="control"
        ></process-condition-control>
        <div class="containerTools absolute">
          <el-button size="mini" @click="levelDown(item)">{{$lang.down}}</el-button>
          <el-button size="mini" @click="levelUp(item)" v-if="level !== 1"
            >{{$lang.up}}</el-button
          >
          <el-button size="mini" @click="delProcessNode(item.data.id, index)"
            >{{$lang.delete}}</el-button
          >
        </div>
      </div>
      <process-condition-group
        v-else
        :parentNode="item.data"
        :level="level"
        :root="root"
      ></process-condition-group>
    </template>
    <div v-if="node.group.length>1">
      {{$lang.relation}}
      <el-select v-model="node.relation" placeholder="Select">
        <el-option
          v-for="item in relationType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div><el-button size="mini" @click="addJudge">{{$lang.addJudge}}</el-button></div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { relationType, groupType } from "@/enums/process";
import SwtionProcess from "@/plugins/process";
//const container = () => import('@/components/process/editor/condition/container.vue')
import { judgeContainer, condition, process } from "@/model/Process";
@Options({})
export default class container extends Vue {
  @Prop({
    default: new condition(),
    type: condition,
  })
  public node!: ICondition;
  @Prop({
    default: 1,
    type: Number,
  })
  public level!: number;
  @Prop({
    default: new process(),
    type: process,
  })
  public root!: IProcess;
  public groupType = groupType;
  public relationType = new Array<any>();
  // @Watch("root", { deep: true, immediate: true })
  // onchange() {
  //   if (this.$refs["control"]) {
  //     let items = this.$refs["control"] as any;
  //     for (let i = 0; i < items.length; i++) {
  //       items[i].reload();
  //     }
  //   }
  // }
  public reload() {
    let items = this.$refs["control"] as any;
    for (let i = 0; i < items.length; i++) {
      items[i].reload();
    }
  }
  public swtionProcess = new SwtionProcess();
  created() {
    let _this=this as any;
    for (var v in relationType) {
      if (typeof relationType[v] === "number") {
        this.relationType.push({ id: <any>relationType[v], name: _this.$lang[v] });
      }
    }
  }
  public addJudge() {
    this.swtionProcess.addJudge(this.node, groupType.judge);
  }
  public levelUp(judge: judgeContainer) {
    this.swtionProcess.leveJudgelUp(judge, this.root);
  }
  public levelDown(judge: judgeContainer) {
    this.swtionProcess.levelConditionDown(this.node, judge);
  }
  public delProcessNode(id: string, index: number) {
    this.swtionProcess.delProcessNode(id, this.root);
    // this.node.group.removeAt(index)
  }
}
</script>
<style lang="scss" scoped>
.containerTools {
  right: 0px;
  top: 0px;
  display: none;
}
.container:hover .containerTools {
  display: block;
}
.border {
  border: 1px solid #f0f0f0;
}
</style>
