<template>
  <div class="container relative">
    <el-row>
      <el-col :span="4">
        <ifOptions :node="node.if" ref="if"></ifOptions>
      </el-col>
      <el-col :span="4">
        <el-select v-model="node.method" placeholder="Select">
          <el-option
            v-for="item in conditionMethodType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <valueOptions :node="node.value" ref="value"></valueOptions>
        <!-- <el-input v-model="node.valueValue.label" placeholder="Please input" /> -->
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { conditionMethodType } from "@/enums/process";
import {
  judge,
} from "@/model/Process";
import ifOptions from "./control/ifOption.vue";
import valueOptions from "./control/valueOption.vue";
@Options({
  components: { ifOptions, valueOptions },
})
export default class control extends Vue {
  @Prop({
    default: new judge(),
    type: judge,
  })
  public node!: IJudge;
  created() {
    let _this = this as any;
    for (var v in conditionMethodType) {
      if (typeof conditionMethodType[v] === "number") {
        this.conditionMethodType.push({ id: <any>conditionMethodType[v], name: _this.$lang[v] });
      }
    }
  }
  // @Prop({
  //   default: new process(),
  //   type: process,
  // })
  // public root!: IProcess;
  // @Watch("root",{immediate:true,deep:false})
  // onRootChange(){
  //   // debugger;
  //   console.log(123);
  // }
  public conditionMethodType = new Array<any>();
  public reload() {
    (this.$refs["if"] as any).loadIfOption();
    (this.$refs["value"] as any).loadValueOption();
  }
}
</script>
<style lang="scss" scoped>
.containerTools {
  right: 0px;
  top: 0px;
  display: none;
}
.container:hover .containerTools {
  display: block;
}
</style>
